@stripe/react-stripe-js - npm Package Compare versions

Comparing version 1.9.0 to 1.10.0

dist/react-stripe.d.ts

@@ -236,2 +236,8 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "linkAuthentication";
+    }) => any;
 }
@@ -286,2 +292,8 @@ type LinkAuthenticationElementComponent = FunctionComponent<LinkAuthenticationElementProps>;
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "payment";
+    }) => any;
 }
@@ -331,2 +343,8 @@ type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "shippingAddress";
+    }) => any;
 }
@@ -333,0 +351,0 @@ type ShippingAddressElementComponent = FunctionComponent<ShippingAddressElementProps>;

dist/react-stripe.esm.d.ts

@@ -236,2 +236,8 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "linkAuthentication";
+    }) => any;
 }
@@ -286,2 +292,8 @@ type LinkAuthenticationElementComponent = FunctionComponent<LinkAuthenticationElementProps>;
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "payment";
+    }) => any;
 }
@@ -331,2 +343,8 @@ type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "shippingAddress";
+    }) => any;
 }
@@ -333,0 +351,0 @@ type ShippingAddressElementComponent = FunctionComponent<ShippingAddressElementProps>;

dist/react-stripe.esm.js

@@ -356,3 +356,3 @@ import React from 'react';
       name: 'react-stripe-js',
-      version: "1.9.0"
+      version: "1.10.0"
     });
@@ -362,3 +362,3 @@
       name: 'react-stripe-js',
-      version: "1.9.0",
+      version: "1.10.0",
       url: 'https://stripe.com/docs/stripe-js/react'
@@ -452,3 +452,5 @@ });
         _ref$onLoadError = _ref.onLoadError,
-        onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError;
+        onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError,
+        _ref$onLoaderStart = _ref.onLoaderStart,
+        onLoaderStart = _ref$onLoaderStart === void 0 ? noop : _ref$onLoaderStart;
 
@@ -467,2 +469,3 @@ var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
     var callOnLoadError = useCallbackReference(onLoadError);
+    var callOnLoaderStart = useCallbackReference(onLoaderStart);
     React.useLayoutEffect(function () {
@@ -483,3 +486,7 @@ if (elementRef.current == null && elements && domNode.current != null) {
 
-        element.on('loaderror', callOnLoadError); // Users can pass an onClick prop on any Element component
+        element.on('loaderror', callOnLoadError); // Users can pass an onLoaderStart prop on any Element component
+        // just as they could listen for the `loaderstart` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('loaderstart', callOnLoaderStart); // Users can pass an onClick prop on any Element component
         // just as they could listen for the `click` event on any Element,
@@ -540,2 +547,3 @@ // but only the PaymentRequestButton will actually trigger the event.
     onLoadError: PropTypes.func,
+    onLoaderStart: PropTypes.func,
     options: PropTypes.object
@@ -542,0 +550,0 @@ };

dist/react-stripe.js

@@ -362,3 +362,3 @@ 'use strict';
       name: 'react-stripe-js',
-      version: "1.9.0"
+      version: "1.10.0"
     });
@@ -368,3 +368,3 @@
       name: 'react-stripe-js',
-      version: "1.9.0",
+      version: "1.10.0",
       url: 'https://stripe.com/docs/stripe-js/react'
@@ -458,3 +458,5 @@ });
         _ref$onLoadError = _ref.onLoadError,
-        onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError;
+        onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError,
+        _ref$onLoaderStart = _ref.onLoaderStart,
+        onLoaderStart = _ref$onLoaderStart === void 0 ? noop : _ref$onLoaderStart;
 
@@ -473,2 +475,3 @@ var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
     var callOnLoadError = useCallbackReference(onLoadError);
+    var callOnLoaderStart = useCallbackReference(onLoaderStart);
     React.useLayoutEffect(function () {
@@ -489,3 +492,7 @@ if (elementRef.current == null && elements && domNode.current != null) {
 
-        element.on('loaderror', callOnLoadError); // Users can pass an onClick prop on any Element component
+        element.on('loaderror', callOnLoadError); // Users can pass an onLoaderStart prop on any Element component
+        // just as they could listen for the `loaderstart` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('loaderstart', callOnLoaderStart); // Users can pass an onClick prop on any Element component
         // just as they could listen for the `click` event on any Element,
@@ -546,2 +553,3 @@ // but only the PaymentRequestButton will actually trigger the event.
     onLoadError: PropTypes.func,
+    onLoaderStart: PropTypes.func,
     options: PropTypes.object
@@ -548,0 +556,0 @@ };

dist/react-stripe.umd.d.ts

@@ -236,2 +236,8 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "linkAuthentication";
+    }) => any;
 }
@@ -286,2 +292,8 @@ type LinkAuthenticationElementComponent = FunctionComponent<LinkAuthenticationElementProps>;
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "payment";
+    }) => any;
 }
@@ -331,2 +343,8 @@ type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "shippingAddress";
+    }) => any;
 }
@@ -333,0 +351,0 @@ type ShippingAddressElementComponent = FunctionComponent<ShippingAddressElementProps>;

dist/react-stripe.umd.js

@@ -439,3 +439,3 @@ (function (global, factory) {
 	      name: 'react-stripe-js',
-	      version: "1.9.0"
+	      version: "1.10.0"
 	    });
@@ -445,3 +445,3 @@
 	      name: 'react-stripe-js',
-	      version: "1.9.0",
+	      version: "1.10.0",
 	      url: 'https://stripe.com/docs/stripe-js/react'
@@ -535,3 +535,5 @@ });
 	        _ref$onLoadError = _ref.onLoadError,
-	        onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError;
+	        onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError,
+	        _ref$onLoaderStart = _ref.onLoaderStart,
+	        onLoaderStart = _ref$onLoaderStart === void 0 ? noop : _ref$onLoaderStart;
 
@@ -550,2 +552,3 @@ var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
 	    var callOnLoadError = useCallbackReference(onLoadError);
+	    var callOnLoaderStart = useCallbackReference(onLoaderStart);
 	    React.useLayoutEffect(function () {
@@ -566,3 +569,7 @@ if (elementRef.current == null && elements && domNode.current != null) {
 
-	        element.on('loaderror', callOnLoadError); // Users can pass an onClick prop on any Element component
+	        element.on('loaderror', callOnLoadError); // Users can pass an onLoaderStart prop on any Element component
+	        // just as they could listen for the `loaderstart` event on any Element,
+	        // but only certain Elements will trigger the event.
+
+	        element.on('loaderstart', callOnLoaderStart); // Users can pass an onClick prop on any Element component
 	        // just as they could listen for the `click` event on any Element,
@@ -623,2 +630,3 @@ // but only the PaymentRequestButton will actually trigger the event.
 	    onLoadError: propTypes.func,
+	    onLoaderStart: propTypes.func,
 	    options: propTypes.object
@@ -625,0 +633,0 @@ };

dist/react-stripe.umd.min.d.ts

@@ -236,2 +236,8 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "linkAuthentication";
+    }) => any;
 }
@@ -286,2 +292,8 @@ type LinkAuthenticationElementComponent = FunctionComponent<LinkAuthenticationElementProps>;
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "payment";
+    }) => any;
 }
@@ -331,2 +343,8 @@ type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
     }) => any;
+    /**
+     * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+     */
+    onLoaderStart?: (event: {
+        elementType: "shippingAddress";
+    }) => any;
 }
@@ -333,0 +351,0 @@ type ShippingAddressElementComponent = FunctionComponent<ShippingAddressElementProps>;

dist/react-stripe.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactStripe={},e.React)}(this,(function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function n(){}function r(){}r.resetWarningCache=n;var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,u){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==u){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o,o}()}));function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,u=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(u.push(r.value),!t||u.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return u}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return p(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var f=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},l=function(e){return null!==e&&"object"===i(e)},y=function(e,t,n){return l(e)?Object.keys(e).reduce((function(r,o){var u=!l(t)||!function e(t,n){if(!l(t)||!l(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o="[object Object]"===Object.prototype.toString.call(t);if(o!==("[object Object]"===Object.prototype.toString.call(n)))return!1;if(!o&&!r)return t===n;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var i={},a=0;a<u.length;a+=1)i[u[a]]=!0;for(var s=0;s<c.length;s+=1)i[c[s]]=!0;var p=Object.keys(i);if(p.length!==u.length)return!1;var f=t,y=n;return p.every((function(t){return e(f[t],y[t])}))}(e[o],t[o]);return n.includes(o)?(u&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),r):u?c(c({},r||{}),{},a({},o,e[o])):r}),null):null},m=function(e){if(null===e||l(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;var t;throw new Error("Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")},d=function(e){if(function(e){return l(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(m)};var t=m(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},v=t.createContext(null);v.displayName="ElementsContext";var b=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useMemo((function(){return d(n)}),[n]),c=s(t.useState((function(){return{stripe:"sync"===u.tag?u.stripe:null,elements:"sync"===u.tag?u.stripe.elements(r):null}})),2),i=c[0],a=c[1];t.useEffect((function(){var e=!0,t=function(e){a((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==u.tag||i.stripe?"sync"!==u.tag||i.stripe||t(u.stripe):u.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[u,i,r]);var p=f(n);t.useEffect((function(){null!==p&&p!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[p,n]);var l=f(r);return t.useEffect((function(){if(i.elements){var e=y(r,l,["clientSecret","fonts"]);e&&i.elements.update(e)}}),[r,l,i.elements]),t.useEffect((function(){var e=i.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"1.9.0"}),e.registerAppInfo({name:"react-stripe-js",version:"1.9.0",url:"https://stripe.com/docs/stripe-js/react"}))}),[i.stripe]),t.createElement(v.Provider,{value:i},o)};b.propTypes={stripe:o.any,options:o.object};var h=function(e){return function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e}(t.useContext(v),e)},E=function(e){return(0,e.children)(h("mounts <ElementsConsumer>"))};E.propTypes={children:o.func.isRequired};var g=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},O=function(){},j=function(e,n){var r,u="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){h("mounts <".concat(u,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,o=n.className,c=n.options,i=void 0===c?{}:c,a=n.onBlur,s=void 0===a?O:a,p=n.onFocus,l=void 0===p?O:p,m=n.onReady,d=void 0===m?O:m,v=n.onChange,b=void 0===v?O:v,E=n.onEscape,j=void 0===E?O:E,P=n.onClick,S=void 0===P?O:P,k=n.onLoadError,C=void 0===k?O:k,w=h("mounts <".concat(u,">")).elements,A=t.useRef(null),x=t.useRef(null),R=g(d),T=g(s),B=g(l),_=g(S),I=g(b),N=g(j),M=g(C);t.useLayoutEffect((function(){if(null==A.current&&w&&null!=x.current){var t=w.create(e,i);A.current=t,t.mount(x.current),t.on("ready",(function(){return R(t)})),t.on("change",I),t.on("blur",T),t.on("focus",B),t.on("escape",N),t.on("loaderror",M),t.on("click",_)}}));var L=f(i);return t.useEffect((function(){if(A.current){var e=y(i,L,["paymentRequest"]);e&&A.current.update(e)}}),[i,L]),t.useLayoutEffect((function(){return function(){A.current&&(A.current.destroy(),A.current=null)}}),[]),t.createElement("div",{id:r,className:o,ref:x})};return c.propTypes={id:o.string,className:o.string,onChange:o.func,onBlur:o.func,onFocus:o.func,onReady:o.func,onClick:o.func,onLoadError:o.func,options:o.object},c.displayName=u,c.__elementType=e,c},P="undefined"==typeof window,S=j("auBankAccount",P),k=j("card",P),C=j("cardNumber",P),w=j("cardExpiry",P),A=j("cardCvc",P),x=j("fpxBank",P),R=j("iban",P),T=j("idealBank",P),B=j("p24Bank",P),_=j("epsBank",P),I=j("payment",P),N=j("paymentRequestButton",P),M=j("linkAuthentication",P),L=j("shippingAddress",P),q=j("affirmMessage",P),D=j("afterpayClearpayMessage",P);e.AffirmMessageElement=q,e.AfterpayClearpayMessageElement=D,e.AuBankAccountElement=S,e.CardCvcElement=A,e.CardElement=k,e.CardExpiryElement=w,e.CardNumberElement=C,e.Elements=b,e.ElementsConsumer=E,e.EpsBankElement=_,e.FpxBankElement=x,e.IbanElement=R,e.IdealBankElement=T,e.LinkAuthenticationElement=M,e.P24BankElement=B,e.PaymentElement=I,e.PaymentRequestButtonElement=N,e.ShippingAddressElement=L,e.useElements=function(){return h("calls useElements()").elements},e.useStripe=function(){return h("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactStripe={},e.React)}(this,(function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function n(){}function r(){}r.resetWarningCache=n;var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,u){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==u){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o,o}()}));function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,u=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(u.push(r.value),!t||u.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return u}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return f(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var l=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},p=function(e){return null!==e&&"object"===i(e)},y=function(e,t,n){return p(e)?Object.keys(e).reduce((function(r,o){var u=!p(t)||!function e(t,n){if(!p(t)||!p(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o="[object Object]"===Object.prototype.toString.call(t);if(o!==("[object Object]"===Object.prototype.toString.call(n)))return!1;if(!o&&!r)return t===n;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var i={},a=0;a<u.length;a+=1)i[u[a]]=!0;for(var s=0;s<c.length;s+=1)i[c[s]]=!0;var f=Object.keys(i);if(f.length!==u.length)return!1;var l=t,y=n;return f.every((function(t){return e(l[t],y[t])}))}(e[o],t[o]);return n.includes(o)?(u&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),r):u?c(c({},r||{}),{},a({},o,e[o])):r}),null):null},m=function(e){if(null===e||p(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;var t;throw new Error("Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")},d=function(e){if(function(e){return p(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(m)};var t=m(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},v=t.createContext(null);v.displayName="ElementsContext";var b=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useMemo((function(){return d(n)}),[n]),c=s(t.useState((function(){return{stripe:"sync"===u.tag?u.stripe:null,elements:"sync"===u.tag?u.stripe.elements(r):null}})),2),i=c[0],a=c[1];t.useEffect((function(){var e=!0,t=function(e){a((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==u.tag||i.stripe?"sync"!==u.tag||i.stripe||t(u.stripe):u.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[u,i,r]);var f=l(n);t.useEffect((function(){null!==f&&f!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[f,n]);var p=l(r);return t.useEffect((function(){if(i.elements){var e=y(r,p,["clientSecret","fonts"]);e&&i.elements.update(e)}}),[r,p,i.elements]),t.useEffect((function(){var e=i.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"1.10.0"}),e.registerAppInfo({name:"react-stripe-js",version:"1.10.0",url:"https://stripe.com/docs/stripe-js/react"}))}),[i.stripe]),t.createElement(v.Provider,{value:i},o)};b.propTypes={stripe:o.any,options:o.object};var h=function(e){return function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e}(t.useContext(v),e)},E=function(e){return(0,e.children)(h("mounts <ElementsConsumer>"))};E.propTypes={children:o.func.isRequired};var g=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},O=function(){},j=function(e,n){var r,u="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){h("mounts <".concat(u,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,o=n.className,c=n.options,i=void 0===c?{}:c,a=n.onBlur,s=void 0===a?O:a,f=n.onFocus,p=void 0===f?O:f,m=n.onReady,d=void 0===m?O:m,v=n.onChange,b=void 0===v?O:v,E=n.onEscape,j=void 0===E?O:E,S=n.onClick,P=void 0===S?O:S,k=n.onLoadError,C=void 0===k?O:k,w=n.onLoaderStart,A=void 0===w?O:w,x=h("mounts <".concat(u,">")).elements,R=t.useRef(null),T=t.useRef(null),B=g(d),_=g(s),I=g(p),N=g(P),L=g(b),M=g(j),q=g(C),D=g(A);t.useLayoutEffect((function(){if(null==R.current&&x&&null!=T.current){var t=x.create(e,i);R.current=t,t.mount(T.current),t.on("ready",(function(){return B(t)})),t.on("change",L),t.on("blur",_),t.on("focus",I),t.on("escape",M),t.on("loaderror",q),t.on("loaderstart",D),t.on("click",N)}}));var U=l(i);return t.useEffect((function(){if(R.current){var e=y(i,U,["paymentRequest"]);e&&R.current.update(e)}}),[i,U]),t.useLayoutEffect((function(){return function(){R.current&&(R.current.destroy(),R.current=null)}}),[]),t.createElement("div",{id:r,className:o,ref:T})};return c.propTypes={id:o.string,className:o.string,onChange:o.func,onBlur:o.func,onFocus:o.func,onReady:o.func,onClick:o.func,onLoadError:o.func,onLoaderStart:o.func,options:o.object},c.displayName=u,c.__elementType=e,c},S="undefined"==typeof window,P=j("auBankAccount",S),k=j("card",S),C=j("cardNumber",S),w=j("cardExpiry",S),A=j("cardCvc",S),x=j("fpxBank",S),R=j("iban",S),T=j("idealBank",S),B=j("p24Bank",S),_=j("epsBank",S),I=j("payment",S),N=j("paymentRequestButton",S),L=j("linkAuthentication",S),M=j("shippingAddress",S),q=j("affirmMessage",S),D=j("afterpayClearpayMessage",S);e.AffirmMessageElement=q,e.AfterpayClearpayMessageElement=D,e.AuBankAccountElement=P,e.CardCvcElement=A,e.CardElement=k,e.CardExpiryElement=w,e.CardNumberElement=C,e.Elements=b,e.ElementsConsumer=E,e.EpsBankElement=_,e.FpxBankElement=x,e.IbanElement=R,e.IdealBankElement=T,e.LinkAuthenticationElement=L,e.P24BankElement=B,e.PaymentElement=I,e.PaymentRequestButtonElement=N,e.ShippingAddressElement=M,e.useElements=function(){return h("calls useElements()").elements},e.useStripe=function(){return h("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@stripe/react-stripe-js",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "React components for Stripe.js and Stripe Elements",
@@ -65,3 +65,3 @@ "main": "dist/react-stripe.js",
     "@storybook/react": "^6.5.0-beta.8",
-    "@stripe/stripe-js": "^1.32.0",
+    "@stripe/stripe-js": "^1.34.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -110,3 +110,3 @@ "@testing-library/react": "^13.1.1",
   "peerDependencies": {
-    "@stripe/stripe-js": "^1.32.0",
+    "@stripe/stripe-js": "^1.34.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -113,0 +113,0 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"

src/types/index.ts

@@ -299,2 +299,7 @@ import {FunctionComponent} from 'react';
   }) => any;
+
+  /**
+   * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+   */
+  onLoaderStart?: (event: {elementType: 'linkAuthentication'}) => any;
 }
@@ -360,2 +365,7 @@
   onLoadError?: (event: {elementType: 'payment'; error: StripeError}) => any;
+
+  /**
+   * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+   */
+  onLoaderStart?: (event: {elementType: 'payment'}) => any;
 }
@@ -419,2 +429,7 @@
   }) => any;
+
+  /**
+   * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+   */
+  onLoaderStart?: (event: {elementType: 'shippingAddress'}) => any;
 }
@@ -421,0 +436,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

291512

increased by2.35%

Lines of code

6168

increased by2.22%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes