UNPKG

@stripe/react-stripe-js

Version:

React components for Stripe.js and Stripe Elements

2 lines (1 loc) 17.8 kB
!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){u(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 i(e,n,t,r,o,i,c){try{var u=e[i](c),a=u.value}catch(e){return void t(e)}u.done?n(a):Promise.resolve(a).then(r,o)}function c(e){return function(){var n=this,t=arguments;return new Promise((function(r,o){var c=e.apply(n,t);function u(e){i(c,r,o,u,a,"next",e)}function a(e){i(c,r,o,u,a,"throw",e)}u(void 0)}))}}function u(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={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[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,i=[],c=!0,u=!1;try{for(t=t.call(e);!(c=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);c=!0);}catch(e){u=!0,o=e}finally{try{c||null==t.return||t.return()}finally{if(u)throw o}}return i}(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,i,c){if(c!==e){var u=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 u.name="Invariant Violation",u}}function o(){return r}r.isRequired=r;var i={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 i.PropTypes=i,i}}()();var g=p(y.exports),v=function(e,t,r){var o=!!r,i=n.useRef(r);n.useEffect((function(){i.current=r}),[r]),n.useEffect((function(){if(!o||!e)return function(){};var n=function(){if(i.current)return i.current.apply(i,arguments)};return e.on(t,n),function(){e.off(t,n)}}),[o,t,e,i])},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 i=Object.keys(n),c=Object.keys(t);if(i.length!==c.length)return!1;for(var u={},a=0;a<i.length;a+=1)u[i[a]]=!0;for(var s=0;s<c.length;s+=1)u[c[s]]=!0;var l=Object.keys(u);if(l.length!==i.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,i){var c=!E(n)||!k(e[i],n[i]);return t.includes(i)?(c&&console.warn("Unsupported prop change: options.".concat(i," is not a mutable property.")),o):c?r(r({},o||{}),{},u({},i,e[i])):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:"6.5.0"}),e.registerAppInfo({name:"react-stripe-js",version:"6.5.0",url:"https://stripe.com/docs/stripe-js/react"}))},x=n.createContext(null);x.displayName="ElementsContext";var I=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,i=n.useMemo((function(){return O(t)}),[t]),c=s(n.useState((function(){return{stripe:"sync"===i.tag?i.stripe:null,elements:"sync"===i.tag?i.stripe.elements(r):null}})),2),u=c[0],a=c[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"!==i.tag||u.stripe?"sync"!==i.tag||u.stripe||n(i.stripe):i.stripePromise.then((function(t){t&&e&&n(t)})),function(){e=!1}}),[i,u,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(u.elements){var e=S(r,p,["clientSecret","fonts"]);e&&u.elements.update(e)}}),[r,p,u.elements]),n.useEffect((function(){j(u.stripe)}),[u.stripe]),n.createElement(x.Provider,{value:u},o)};A.propTypes={stripe:g.any,options:g.object};var R=function(e){var t=n.useContext(x);return I(t,e)},D=function(e){return(0,e.children)(R("mounts <ElementsConsumer>"))};D.propTypes={children:g.func.isRequired};var N=n.createContext(null);N.displayName="CheckoutContext";var M=function(e){var t=n.useContext(N),r=n.useContext(x);if(t){if(r)throw new Error("You cannot wrap the part of your app that ".concat(e," in both a checkout provider and <Elements> provider."));return t}return I(r,e)},L=["mode"],T=function(e,t,r){var o,i="".concat((o=e).charAt(0).toUpperCase()+o.slice(1),"Element"),c=t?function(e){M("mounts <".concat(i,">"));var t=e.id,r=e.className;return n.createElement("div",{id:t,className:r})}:function(t){var r,o=t.id,c=t.className,u=t.options,l=void 0===u?{}:u,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,I=t.onAvailablePaymentMethodsChange,A=M("mounts <".concat(i,">")),R="elements"in A?A.elements:null,D="checkoutState"in A?A.checkoutState:null,N="success"===(null==D?void 0:D.type)||"loading"===(null==D?void 0:D.type)?D.sdk:null,T=s(n.useState(null),2),U=T[0],Y=T[1],_=n.useRef(null),B=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,"availablepaymentmethodschange",I),v(U,"change",m),d&&(r="expressCheckout"===e?d:function(){d(U)}),v(U,"ready",r),n.useLayoutEffect((function(){if(null===_.current&&null!==B.current&&(R||N)){var n=null;if(N){var t=N,r=N;switch(e){case"paymentForm":n=r.createForm(l);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 o=l.mode,c=a(l,L);if("shipping"===o)n=t.createShippingAddressElement(c);else{if("billing"!==o)throw new Error("Invalid options.mode. mode must be 'billing' or 'shipping'.");n=t.createBillingAddressElement(c)}break;case"expressCheckout":n=t.createExpressCheckoutElement(l);break;case"currencySelector":n=N.createCurrencySelectorElement();break;case"taxId":n=t.createTaxIdElement(l);break;case"contactDetails":n=t.createContactDetailsElement();break;default:throw new Error("<".concat(i,"> is not supported inside a checkout provider. Use an <Elements> provider instead."))}}else R&&(n=R.create(e,l));_.current=n,Y(n),n&&n.mount(B.current)}}),[R,N,l]);var F=b(l);return n.useEffect((function(){if(_.current){var e=S(l,F,["paymentRequest"]);e&&"update"in _.current&&_.current.update(e)}}),[l,F]),n.useLayoutEffect((function(){return function(){if(_.current&&"function"==typeof _.current.destroy)try{_.current.destroy(),_.current=null}catch(e){}}}),[]),n.createElement("div",{id:o,className:c,ref:B})};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,onAvailablePaymentMethodsChange:g.func,options:g.object},c.displayName=i,c.__elementType=e,c},U="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},B=U?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,i=n.useRef(!1),c=n.useRef(null);return n.useLayoutEffect((function(){return!i.current&&o&&null!==c.current&&(o.mount(c.current),i.current=!0),function(){if(i.current&&o)try{o.unmount(),i.current=!1}catch(e){}}}),[o]),n.createElement("div",{ref:c,id:t,className:r})},F=T("auBankAccount",U),W=T("card",U),q=T("cardNumber",U),H=T("cardExpiry",U),V=T("cardCvc",U),$=T("iban",U),z=T("payment",U),G=T("expressCheckout",U),J=T("paymentRequestButton",U),K=T("linkAuthentication",U),Q=T("contactDetails",U),X=T("address",U),Z=T("shippingAddress",U),ee=T("paymentMethodMessaging",U),ne=T("taxId",U),te=T("issuingCardNumberDisplay",U),re=T("issuingCardCvcDisplay",U),oe=T("issuingCardExpiryDisplay",U),ie=T("issuingCardPinDisplay",U),ce=T("issuingCardCopyButton",U);e.AddressElement=X,e.AuBankAccountElement=F,e.CardCvcElement=V,e.CardElement=W,e.CardExpiryElement=H,e.CardNumberElement=q,e.ContactDetailsElement=Q,e.Elements=A,e.ElementsConsumer=D,e.EmbeddedCheckout=B,e.EmbeddedCheckoutProvider=function(e){var t=e.stripe,r=e.options,o=e.children,i=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]),c=n.useRef(null),u=n.useRef(null),a=s(n.useState({embeddedCheckout:null}),2),l=a[0],p=a[1];n.useEffect((function(){if(!u.current&&!c.current){var e=function(e){u.current||c.current||(u.current=e,c.current=u.current.createEmbeddedCheckoutPage(r).then((function(e){p({embeddedCheckout:e})})))};"async"!==i.tag||u.current||!r.clientSecret&&!r.fetchClientSecret?"sync"!==i.tag||u.current||!r.clientSecret&&!r.fetchClientSecret||e(i.stripe):i.stripePromise.then((function(n){n&&e(n)}))}}),[i,r,l,u]),n.useEffect((function(){return function(){l.embeddedCheckout?(c.current=null,l.embeddedCheckout.destroy()):c.current&&c.current.then((function(){c.current=null,l.embeddedCheckout&&l.embeddedCheckout.destroy()}))}}),[l.embeddedCheckout]),n.useEffect((function(){j(u)}),[u]);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,i=e.options,u=null==i?void 0:i.businessName,a=null==i?void 0:i.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=c(regeneratorRuntime.mark((function e(){var n,t,i,c;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:u,learnMoreLink:a});case 4:n=e.sent,t=n.htmlElement,(i=n.error)&&o?o(i):t&&((c=l.current).innerHTML="",c.appendChild(t),r&&r());case 8:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();e()}),[d,u,a,r,o]),n.createElement("div",{ref:l})},e.IbanElement=$,e.IssuingCardCopyButtonElement=ce,e.IssuingCardCvcDisplayElement=re,e.IssuingCardExpiryDisplayElement=oe,e.IssuingCardNumberDisplayElement=te,e.IssuingCardPinDisplayElement=ie,e.IssuingDisclosure=function(e){var t=e.stripe,r=e.onLoad,o=e.onError,i=e.options,u=null==i?void 0:i.issuingProgramID,a=null==i?void 0:i.publicCardProgramName,l=null==i?void 0:i.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=c(regeneratorRuntime.mark((function e(){var n,t,i,c;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:u,publicCardProgramName:a,learnMoreLink:l});case 4:n=e.sent,t=n.htmlElement,(i=n.error)&&o?o(i):t&&((c=p.current).innerHTML="",c.appendChild(t),r&&r());case 8:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();e()}),[m,u,a,l,r,o]),n.createElement("div",{ref:p})},e.LinkAuthenticationElement=K,e.PaymentElement=z,e.PaymentMethodMessagingElement=ee,e.PaymentRequestButtonElement=J,e.ShippingAddressElement=Z,e.TaxIdElement=ne,e.useElements=function(){return R("calls useElements()").elements},e.useStripe=function(){return M("calls useStripe()").stripe}}));