@stripe/react-stripe-js/dist/react-stripe.umd.min.js

React components for Stripe.js and Stripe Elements

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).ReactStripe={},e.React)}(this,(function(e,n){"use strict";function t(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function r(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?t(Object(r),!0).forEach((function(n){i(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function o(e){return o="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},o(e)}function c(e,n,t,r,o,c,u){try{var i=e[c](u),a=i.value}catch(e){return void t(e)}i.done?n(a):Promise.resolve(a).then(r,o)}function u(e){return function(){var n=this,t=arguments;return new Promise((function(r,o){var u=e.apply(n,t);function i(e){c(u,r,o,i,a,"next",e)}function a(e){c(u,r,o,i,a,"throw",e)}i(void 0)}))}}function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function a(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},c=Object.keys(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function s(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==t)return;var r,o,c=[],u=!0,i=!1;try{for(t=t.call(e);!(u=(r=t.next()).done)&&(c.push(r.value),!n||c.length!==n);u=!0);}catch(e){i=!0,o=e}finally{try{u||null==t.return||t.return()}finally{if(i)throw o}}return c}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return l(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return l(e,n)}(e,n)||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 l(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function p(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var f,d,m,h,y={exports:{}};y.exports=function(){if(h)return m;h=1;var e=d?f:(d=1,f="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");function n(){}function t(){}return t.resetWarningCache=n,m=function(){function r(n,t,r,o,c,u){if(u!==e){var i=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 i.name="Invariant Violation",i}}function o(){return r}r.isRequired=r;var c={array:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:o,element:r,elementType:r,instanceOf:o,node:r,objectOf:o,oneOf:o,oneOfType:o,shape:o,exact:o,checkPropTypes:t,resetWarningCache:n};return c.PropTypes=c,c}}()();var g=p(y.exports),v=function(e,t,r){var o=!!r,c=n.useRef(r);n.useEffect((function(){c.current=r}),[r]),n.useEffect((function(){if(!o||!e)return function(){};var n=function(){c.current&&c.current.apply(c,arguments)};return e.on(t,n),function(){e.off(t,n)}}),[o,t,e,c])},b=function(e){var t=n.useRef(e);return n.useEffect((function(){t.current=e}),[e]),t.current},E=function(e){return null!==e&&"object"===o(e)},C="[object Object]",k=function e(n,t){if(!E(n)||!E(t))return n===t;var r=Array.isArray(n);if(r!==Array.isArray(t))return!1;var o=Object.prototype.toString.call(n)===C;if(o!==(Object.prototype.toString.call(t)===C))return!1;if(!o&&!r)return n===t;var c=Object.keys(n),u=Object.keys(t);if(c.length!==u.length)return!1;for(var i={},a=0;a<c.length;a+=1)i[c[a]]=!0;for(var s=0;s<u.length;s+=1)i[u[s]]=!0;var l=Object.keys(i);if(l.length!==c.length)return!1;var p=n,f=t;return l.every((function(n){return e(p[n],f[n])}))},S=function(e,n,t){return E(e)?Object.keys(e).reduce((function(o,c){var u=!E(n)||!k(e[c],n[c]);return t.includes(c)?(u&&console.warn("Unsupported prop change: options.".concat(c," is not a mutable property.")),o):u?r(r({},o||{}),{},i({},c,e[c])):o}),null):null},P="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.",w=function(e){var n,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:P;if(null===e||E(n=e)&&"function"==typeof n.elements&&"function"==typeof n.createToken&&"function"==typeof n.createPaymentMethod&&"function"==typeof n.confirmCardPayment)return e;throw new Error(t)},O=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:P;if(function(e){return E(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then((function(e){return w(e,n)}))};var t=w(e,n);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},j=function(e){e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"5.4.1"}),e.registerAppInfo({name:"react-stripe-js",version:"5.4.1",url:"https://stripe.com/docs/stripe-js/react"}))},x=n.createContext(null);x.displayName="ElementsContext";var R=function(e,n){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(n," in an <Elements> provider."));return e},A=function(e){var t=e.stripe,r=e.options,o=e.children,c=n.useMemo((function(){return O(t)}),[t]),u=s(n.useState((function(){return{stripe:"sync"===c.tag?c.stripe:null,elements:"sync"===c.tag?c.stripe.elements(r):null}})),2),i=u[0],a=u[1];n.useEffect((function(){var e=!0,n=function(e){a((function(n){return n.stripe?n:{stripe:e,elements:e.elements(r)}}))};return"async"!==c.tag||i.stripe?"sync"!==c.tag||i.stripe||n(c.stripe):c.stripePromise.then((function(t){t&&e&&n(t)})),function(){e=!1}}),[c,i,r]);var l=b(t);n.useEffect((function(){null!==l&&l!==t&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[l,t]);var p=b(r);return n.useEffect((function(){if(i.elements){var e=S(r,p,["clientSecret","fonts"]);e&&i.elements.update(e)}}),[r,p,i.elements]),n.useEffect((function(){j(i.stripe)}),[i.stripe]),n.createElement(x.Provider,{value:i},o)};A.propTypes={stripe:g.any,options:g.object};var I=function(e){var t=n.useContext(x);return R(t,e)},T=function(e){return(0,e.children)(I("mounts <ElementsConsumer>"))};T.propTypes={children:g.func.isRequired};var L=n.createContext(null);L.displayName="CheckoutContext",g.any,g.shape({clientSecret:g.oneOfType([g.string,g.instanceOf(Promise)]).isRequired,elementsOptions:g.object}).isRequired;var N=function(e){var t=n.useContext(L),r=n.useContext(x);if(t){if(r)throw new Error("You cannot wrap the part of your app that ".concat(e," in both <CheckoutProvider> and <Elements> providers."));return t}return R(r,e)},M=["mode"],U=function(e,t){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=t?function(e){N("mounts <".concat(o,">"));var t=e.id,r=e.className;return n.createElement("div",{id:t,className:r})}:function(t){var r,c=t.id,u=t.className,i=t.options,l=void 0===i?{}:i,p=t.onBlur,f=t.onFocus,d=t.onReady,m=t.onChange,h=t.onEscape,y=t.onClick,g=t.onLoadError,E=t.onLoaderStart,C=t.onNetworksChange,k=t.onConfirm,P=t.onCancel,w=t.onShippingAddressChange,O=t.onShippingRateChange,j=t.onSavedPaymentMethodRemove,x=t.onSavedPaymentMethodUpdate,R=N("mounts <".concat(o,">")),A="elements"in R?R.elements:null,I="checkoutState"in R?R.checkoutState:null,T="success"===(null==I?void 0:I.type)||"loading"===(null==I?void 0:I.type)?I.sdk:null,L=s(n.useState(null),2),U=L[0],D=L[1],Y=n.useRef(null),_=n.useRef(null);v(U,"blur",p),v(U,"focus",f),v(U,"escape",h),v(U,"click",y),v(U,"loaderror",g),v(U,"loaderstart",E),v(U,"networkschange",C),v(U,"confirm",k),v(U,"cancel",P),v(U,"shippingaddresschange",w),v(U,"shippingratechange",O),v(U,"savedpaymentmethodremove",j),v(U,"savedpaymentmethodupdate",x),v(U,"change",m),d&&(r="expressCheckout"===e?d:function(){d(U)}),v(U,"ready",r),n.useLayoutEffect((function(){if(null===Y.current&&null!==_.current&&(A||T)){var n=null;if(T)switch(e){case"paymentForm":n=T.createPaymentFormElement();break;case"payment":n=T.createPaymentElement(l);break;case"address":if(!("mode"in l))throw new Error("You must supply options.mode. mode must be 'billing' or 'shipping'.");var t=l.mode,r=a(l,M);if("shipping"===t)n=T.createShippingAddressElement(r);else{if("billing"!==t)throw new Error("Invalid options.mode. mode must be 'billing' or 'shipping'.");n=T.createBillingAddressElement(r)}break;case"expressCheckout":n=T.createExpressCheckoutElement(l);break;case"currencySelector":n=T.createCurrencySelectorElement();break;case"taxId":n=T.createTaxIdElement(l);break;default:throw new Error("Invalid Element type ".concat(o,". You must use either the <PaymentElement />, <AddressElement options={{mode: 'shipping'}} />, <AddressElement options={{mode: 'billing'}} />, or <ExpressCheckoutElement />."))}else A&&(n=A.create(e,l));Y.current=n,D(n),n&&n.mount(_.current)}}),[A,T,l]);var q=b(l);return n.useEffect((function(){if(Y.current){var e=S(l,q,["paymentRequest"]);e&&"update"in Y.current&&Y.current.update(e)}}),[l,q]),n.useLayoutEffect((function(){return function(){if(Y.current&&"function"==typeof Y.current.destroy)try{Y.current.destroy(),Y.current=null}catch(e){}}}),[]),n.createElement("div",{id:c,className:u,ref:_})};return c.propTypes={id:g.string,className:g.string,onChange:g.func,onBlur:g.func,onFocus:g.func,onReady:g.func,onEscape:g.func,onClick:g.func,onLoadError:g.func,onLoaderStart:g.func,onNetworksChange:g.func,onConfirm:g.func,onCancel:g.func,onShippingAddressChange:g.func,onShippingRateChange:g.func,onSavedPaymentMethodRemove:g.func,onSavedPaymentMethodUpdate:g.func,options:g.object},c.displayName=o,c.__elementType=e,c},D="undefined"==typeof window,Y=n.createContext(null);Y.displayName="EmbeddedCheckoutProviderContext";var _=function(){var e=n.useContext(Y);if(!e)throw new Error("<EmbeddedCheckout> must be used within <EmbeddedCheckoutProvider>");return e},q=D?function(e){var t=e.id,r=e.className;return _(),n.createElement("div",{id:t,className:r})}:function(e){var t=e.id,r=e.className,o=_().embeddedCheckout,c=n.useRef(!1),u=n.useRef(null);return n.useLayoutEffect((function(){return!c.current&&o&&null!==u.current&&(o.mount(u.current),c.current=!0),function(){if(c.current&&o)try{o.unmount(),c.current=!1}catch(e){}}}),[o]),n.createElement("div",{ref:u,id:t,className:r})},B=U("auBankAccount",D),F=U("card",D),W=U("cardNumber",D),H=U("cardExpiry",D),V=U("cardCvc",D),$=U("iban",D),z=U("payment",D),G=U("expressCheckout",D),J=U("paymentRequestButton",D),K=U("linkAuthentication",D),Q=U("address",D),X=U("shippingAddress",D),Z=U("paymentMethodMessaging",D),ee=U("taxId",D);e.AddressElement=Q,e.AuBankAccountElement=B,e.CardCvcElement=V,e.CardElement=F,e.CardExpiryElement=H,e.CardNumberElement=W,e.Elements=A,e.ElementsConsumer=T,e.EmbeddedCheckout=q,e.EmbeddedCheckoutProvider=function(e){var t=e.stripe,r=e.options,o=e.children,c=n.useMemo((function(){return O(t,"Invalid prop `stripe` supplied to `EmbeddedCheckoutProvider`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")}),[t]),u=n.useRef(null),i=n.useRef(null),a=s(n.useState({embeddedCheckout:null}),2),l=a[0],p=a[1];n.useEffect((function(){if(!i.current&&!u.current){var e=function(e){i.current||u.current||(i.current=e,u.current=i.current.initEmbeddedCheckout(r).then((function(e){p({embeddedCheckout:e})})))};"async"!==c.tag||i.current||!r.clientSecret&&!r.fetchClientSecret?"sync"!==c.tag||i.current||!r.clientSecret&&!r.fetchClientSecret||e(c.stripe):c.stripePromise.then((function(n){n&&e(n)}))}}),[c,r,l,i]),n.useEffect((function(){return function(){l.embeddedCheckout?(u.current=null,l.embeddedCheckout.destroy()):u.current&&u.current.then((function(){u.current=null,l.embeddedCheckout&&l.embeddedCheckout.destroy()}))}}),[l.embeddedCheckout]),n.useEffect((function(){j(i)}),[i]);var f=b(t);n.useEffect((function(){null!==f&&f!==t&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the `stripe` prop after setting it.")}),[f,t]);var d=b(r);return n.useEffect((function(){null!=d&&(null!=r?(void 0===r.clientSecret&&void 0===r.fetchClientSecret&&console.warn("Invalid props passed to EmbeddedCheckoutProvider: You must provide one of either `options.fetchClientSecret` or `options.clientSecret`."),null!=d.clientSecret&&r.clientSecret!==d.clientSecret&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the client secret after setting it. Unmount and create a new instance of EmbeddedCheckoutProvider instead."),null!=d.fetchClientSecret&&r.fetchClientSecret!==d.fetchClientSecret&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change fetchClientSecret after setting it. Unmount and create a new instance of EmbeddedCheckoutProvider instead."),null!=d.onComplete&&r.onComplete!==d.onComplete&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the onComplete option after setting it."),null!=d.onShippingDetailsChange&&r.onShippingDetailsChange!==d.onShippingDetailsChange&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the onShippingDetailsChange option after setting it."),null!=d.onLineItemsChange&&r.onLineItemsChange!==d.onLineItemsChange&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the onLineItemsChange option after setting it.")):console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot unset options after setting them."))}),[d,r]),n.createElement(Y.Provider,{value:l},o)},e.ExpressCheckoutElement=G,e.FinancialAccountDisclosure=function(e){var t=e.stripe,r=e.onLoad,o=e.onError,c=e.options,i=null==c?void 0:c.businessName,a=null==c?void 0:c.learnMoreLink,l=n.useRef(null),p=n.useMemo((function(){return O(t)}),[t]),f=s(n.useState("sync"===p.tag?p.stripe:null),2),d=f[0],m=f[1];n.useEffect((function(){var e=!0;return"async"===p.tag?p.stripePromise.then((function(n){n&&e&&m(n)})):"sync"===p.tag&&m(p.stripe),function(){e=!1}}),[p]);var h=b(t);return n.useEffect((function(){null!==h&&h!==t&&console.warn("Unsupported prop change on FinancialAccountDisclosure: You cannot change the `stripe` prop after setting it.")}),[h,t]),n.useEffect((function(){j(d)}),[d]),n.useEffect((function(){var e=function(){var e=u(regeneratorRuntime.mark((function e(){var n,t,c,u;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(d&&l.current){e.next=2;break}return e.abrupt("return");case 2:return e.next=4,d.createFinancialAccountDisclosure({businessName:i,learnMoreLink:a});case 4:n=e.sent,t=n.htmlElement,(c=n.error)&&o?o(c):t&&((u=l.current).innerHTML="",u.appendChild(t),r&&r());case 8:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();e()}),[d,i,a,r,o]),n.createElement("div",{ref:l})},e.IbanElement=$,e.IssuingDisclosure=function(e){var t=e.stripe,r=e.onLoad,o=e.onError,c=e.options,i=null==c?void 0:c.issuingProgramID,a=null==c?void 0:c.publicCardProgramName,l=null==c?void 0:c.learnMoreLink,p=n.useRef(null),f=n.useMemo((function(){return O(t)}),[t]),d=s(n.useState("sync"===f.tag?f.stripe:null),2),m=d[0],h=d[1];n.useEffect((function(){var e=!0;return"async"===f.tag?f.stripePromise.then((function(n){n&&e&&h(n)})):"sync"===f.tag&&h(f.stripe),function(){e=!1}}),[f]);var y=b(t);return n.useEffect((function(){null!==y&&y!==t&&console.warn("Unsupported prop change on IssuingDisclosure: You cannot change the `stripe` prop after setting it.")}),[y,t]),n.useEffect((function(){j(m)}),[m]),n.useEffect((function(){var e=function(){var e=u(regeneratorRuntime.mark((function e(){var n,t,c,u;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(m&&p.current){e.next=2;break}return e.abrupt("return");case 2:return e.next=4,m.createIssuingDisclosure({issuingProgramID:i,publicCardProgramName:a,learnMoreLink:l});case 4:n=e.sent,t=n.htmlElement,(c=n.error)&&o?o(c):t&&((u=p.current).innerHTML="",u.appendChild(t),r&&r());case 8:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();e()}),[m,i,a,l,r,o]),n.createElement("div",{ref:p})},e.LinkAuthenticationElement=K,e.PaymentElement=z,e.PaymentMethodMessagingElement=Z,e.PaymentRequestButtonElement=J,e.ShippingAddressElement=X,e.TaxIdElement=ee,e.useElements=function(){return I("calls useElements()").elements},e.useStripe=function(){return N("calls useStripe()").stripe}}));