UNPKG

@stripe/react-stripe-js

Version:

React components for Stripe.js and Stripe Elements

2 lines (1 loc) 18.3 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){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function r(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 o(e){return function(){var n=this,t=arguments;return new Promise((function(o,i){var c=e.apply(n,t);function u(e){r(c,o,i,u,a,"next",e)}function a(e){r(c,o,i,u,a,"throw",e)}u(void 0)}))}}function i(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function c(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 u(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,i,c,u=[],a=!0,s=!1;try{if(i=(t=t.call(e)).next,0===n);else for(;!(a=(r=i.call(t)).done)&&(u.push(r.value),u.length!==n);a=!0);}catch(e){s=!0,o=e}finally{try{if(!a&&null!=t.return&&(c=t.return(),Object(c)!==c))return}finally{if(s)throw o}}return u}}(e,n)||function(e,n){if(e){if("string"==typeof e)return t(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}(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 s(e){return s="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},s(e)}function l(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var p,f,d,m,h={exports:{}};h.exports=function(){if(m)return d;m=1;var e=f?p:(f=1,p="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");function n(){}function t(){}return t.resetWarningCache=n,d=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 y=l(h.exports),g=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])},v=function(e){var t=n.useRef(e);return n.useEffect((function(){t.current=e}),[e]),t.current},b=function(e){return null!==e&&"object"===s(e)},E="[object Object]",C=function e(n,t){if(!b(n)||!b(t))return n===t;var r=Array.isArray(n);if(r!==Array.isArray(t))return!1;var o=Object.prototype.toString.call(n)===E;if(o!==(Object.prototype.toString.call(t)===E))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])}))},k=function(e,n,t){return b(e)?Object.keys(e).reduce((function(r,o){var c=!b(n)||!C(e[o],n[o]);return t.includes(o)?(c&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),r):c?u(u({},r||{}),{},i({},o,e[o])):r}),null):null},S="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.",P=function(e){var n,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:S;if(null===e||b(n=e)&&"function"==typeof n.elements&&"function"==typeof n.createToken&&"function"==typeof n.createPaymentMethod&&"function"==typeof n.confirmCardPayment)return e;throw new Error(t)},w=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:S;if(function(e){return b(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then((function(e){return P(e,n)}))};var t=P(e,n);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},O=function(e){e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"6.8.0"}),e.registerAppInfo({name:"react-stripe-js",version:"6.8.0",url:"https://stripe.com/docs/stripe-js/react"}))},j=n.createContext(null);j.displayName="ElementsContext";var x=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},I=function(e){var t=e.stripe,r=e.options,o=e.children,i=n.useMemo((function(){return w(t)}),[t]),c=a(n.useState((function(){return{stripe:"sync"===i.tag?i.stripe:null,elements:"sync"===i.tag?i.stripe.elements(r):null}})),2),u=c[0],s=c[1];n.useEffect((function(){var e=!0,n=function(e){s((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=v(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=v(r);return n.useEffect((function(){if(u.elements){var e=k(r,p,["clientSecret","fonts"]);e&&u.elements.update(e)}}),[r,p,u.elements]),n.useEffect((function(){O(u.stripe)}),[u.stripe]),n.createElement(j.Provider,{value:u},o)};I.propTypes={stripe:y.any,options:y.object};var A=function(e){var t=n.useContext(j);return x(t,e)},R=function(e){return(0,e.children)(A("mounts <ElementsConsumer>"))};R.propTypes={children:y.func.isRequired};var D=n.createContext(null);D.displayName="CheckoutContext";var N=function(e){var t=n.useContext(D),r=n.useContext(j);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 x(r,e)},T=["mode"],M=function(e,t,r){var o,i="".concat((o=e).charAt(0).toUpperCase()+o.slice(1),"Element"),c=t?function(e){N("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,s=void 0===u?{}:u,l=t.onBlur,p=t.onFocus,f=t.onReady,d=t.onChange,m=t.onEscape,h=t.onClick,y=t.onLoadError,b=t.onLoaderStart,E=t.onNetworksChange,C=t.onConfirm,S=t.onCancel,P=t.onShippingAddressChange,w=t.onShippingRateChange,O=t.onSavedPaymentMethodRemove,j=t.onSavedPaymentMethodUpdate,x=t.onAvailablePaymentMethodsChange,I=N("mounts <".concat(i,">")),A="elements"in I?I.elements:null,R="checkoutState"in I?I.checkoutState:null,D="success"===(null==R?void 0:R.type)||"loading"===(null==R?void 0:R.type)?R.sdk:null,M=a(n.useState(null),2),L=M[0],U=M[1],Y=n.useRef(null),_=n.useRef(null);g(L,"blur",l),g(L,"focus",p),g(L,"escape",m),g(L,"click",h),g(L,"loaderror",y),g(L,"loaderstart",b),g(L,"networkschange",E),g(L,"confirm",C),g(L,"cancel",S),g(L,"shippingaddresschange",P),g(L,"shippingratechange",w),g(L,"savedpaymentmethodremove",O),g(L,"savedpaymentmethodupdate",j),g(L,"availablepaymentmethodschange",x),g(L,"change",d),f&&(r="expressCheckout"===e?f:function(){f(L)}),g(L,"ready",r),n.useLayoutEffect((function(){if(null===Y.current&&null!==_.current&&(A||D)){var n=null;if(D){var t=D,r=D;switch(e){case"paymentForm":n=r.createForm(s);break;case"payment":n=t.createPaymentElement(s);break;case"address":if(!("mode"in s))throw new Error("You must supply options.mode. mode must be 'billing' or 'shipping'.");var o=s.mode,c=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==n.indexOf(r))continue;t[r]=e[r]}return t}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],-1===n.indexOf(t)&&{}.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(s,T);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(s);break;case"currencySelector":n=D.createCurrencySelectorElement();break;case"taxId":n=t.createTaxIdElement(s);break;case"contactDetails":n=t.createContactDetailsElement();break;case"terms":n=t.createTermsElement(s);break;default:throw new Error("<".concat(i,"> is not supported inside a checkout provider. Use an <Elements> provider instead."))}}else A&&(n=A.create(e,s));Y.current=n,U(n),n&&n.mount(_.current)}}),[A,D,s]);var B=v(s);return n.useEffect((function(){if(Y.current){var e=k(s,B,["paymentRequest"]);e&&"update"in Y.current&&Y.current.update(e)}}),[s,B]),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:o,className:c,ref:_})};return c.propTypes={id:y.string,className:y.string,onChange:y.func,onBlur:y.func,onFocus:y.func,onReady:y.func,onEscape:y.func,onClick:y.func,onLoadError:y.func,onLoaderStart:y.func,onNetworksChange:y.func,onConfirm:y.func,onCancel:y.func,onShippingAddressChange:y.func,onShippingRateChange:y.func,onSavedPaymentMethodRemove:y.func,onSavedPaymentMethodUpdate:y.func,onAvailablePaymentMethodsChange:y.func,options:y.object},c.displayName=i,c.__elementType=e,c},L="undefined"==typeof window,U=n.createContext(null);U.displayName="EmbeddedCheckoutProviderContext";var Y=function(){var e=n.useContext(U);if(!e)throw new Error("<EmbeddedCheckout> must be used within <EmbeddedCheckoutProvider>");return e},_=L?function(e){var t=e.id,r=e.className;return Y(),n.createElement("div",{id:t,className:r})}:function(e){var t=e.id,r=e.className,o=Y().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})},B=M("auBankAccount",L),F=M("card",L),W=M("cardNumber",L),q=M("cardExpiry",L),H=M("cardCvc",L),V=M("currencySelector",L),$=M("iban",L),z=M("payment",L),G=M("expressCheckout",L),J=M("paymentRequestButton",L),K=M("linkAuthentication",L),Q=M("contactDetails",L),X=M("address",L),Z=M("shippingAddress",L),ee=M("paymentMethodMessaging",L),ne=M("taxId",L),te=M("issuingCardNumberDisplay",L),re=M("issuingCardCvcDisplay",L),oe=M("issuingCardExpiryDisplay",L),ie=M("issuingCardPinDisplay",L),ce=M("issuingCardCopyButton",L),ue=M("terms",L);e.AddressElement=X,e.AuBankAccountElement=B,e.CardCvcElement=H,e.CardElement=F,e.CardExpiryElement=q,e.CardNumberElement=W,e.ContactDetailsElement=Q,e.CurrencySelectorElement=V,e.Elements=I,e.ElementsConsumer=R,e.EmbeddedCheckout=_,e.EmbeddedCheckoutProvider=function(e){var t=e.stripe,r=e.options,o=e.children,i=n.useMemo((function(){return w(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),s=a(n.useState({embeddedCheckout:null}),2),l=s[0],p=s[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(){O(u)}),[u]);var f=v(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=v(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(U.Provider,{value:l},o)},e.ExpressCheckoutElement=G,e.FinancialAccountDisclosure=function(e){var t=e.stripe,r=e.onLoad,i=e.onError,c=e.options,u=null==c?void 0:c.businessName,s=null==c?void 0:c.learnMoreLink,l=n.useRef(null),p=n.useMemo((function(){return w(t)}),[t]),f=a(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=v(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(){O(d)}),[d]),n.useEffect((function(){var e=function(){var e=o(regeneratorRuntime.mark((function e(){var n,t,o,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:s});case 4:n=e.sent,t=n.htmlElement,(o=n.error)&&i?i(o):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,s,r,i]),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,i=e.onError,c=e.options,u=null==c?void 0:c.issuingProgramID,s=null==c?void 0:c.publicCardProgramName,l=null==c?void 0:c.learnMoreLink,p=n.useRef(null),f=n.useMemo((function(){return w(t)}),[t]),d=a(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=v(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(){O(m)}),[m]),n.useEffect((function(){var e=function(){var e=o(regeneratorRuntime.mark((function e(){var n,t,o,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:s,learnMoreLink:l});case 4:n=e.sent,t=n.htmlElement,(o=n.error)&&i?i(o):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,s,l,r,i]),n.createElement("div",{ref:p})},e.LinkAuthenticationElement=K,e.PaymentElement=z,e.PaymentMethodMessagingElement=ee,e.PaymentRequestButtonElement=J,e.ShippingAddressElement=Z,e.TaxIdElement=ne,e.TermsElement=ue,e.useElements=function(){return A("calls useElements()").elements},e.useStripe=function(){return N("calls useStripe()").stripe}}));