@commercelayer/react-components/lib/cjs/components/payment_source/StripePayment.js

The Official Commerce Layer React Components

"use client";
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StripePayment=StripePayment;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),react_stripe_js_1=require("@stripe/react-stripe-js"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),localStorage_1=require("../../utils/localStorage"),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),StripeExpressPayment_1=require("./StripeExpressPayment"),useCommerceLayer_1=tslib_1.__importDefault(require("../../hooks/useCommerceLayer")),PlaceOrderContext_1=tslib_1.__importDefault(require("../../context/PlaceOrderContext")),defaultOptions={layout:{type:"accordion",defaultCollapsed:!1,radios:!0,spacedAccordionItems:!1},fields:{billingDetails:"never"}},defaultAppearance={theme:"stripe",variables:{colorText:"#32325d",fontFamily:'"Helvetica Neue", Helvetica, sans-serif'}};function StripePaymentForm({options=defaultOptions,templateCustomerSaveToWallet,stripe}){const ref=(0,react_1.useRef)(null),{currentPaymentMethodType,setPaymentMethodErrors,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order,setOrderErrors}=(0,react_1.useContext)(OrderContext_1.default),{sdkClient}=(0,useCommerceLayer_1.default)(),{setPlaceOrderStatus}=(0,react_1.useContext)(PlaceOrderContext_1.default),elements=(0,react_stripe_js_1.useElements)();(0,react_1.useEffect)(()=>(ref.current&&stripe&&elements&&(ref.current.onsubmit=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){return yield onSubmit({event:ref.current,stripe,elements})}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,stripe,elements]);const onSubmit=_a=>tslib_1.__awaiter(this,[_a],void 0,function*({event,stripe:stripe2,elements:elements2}){var _b,_c,_d,_e,_f,_g,_h;if(!stripe2)return!1;const sdk=sdkClient();if(sdk==null||order==null)return!1;const{status}=yield sdk.orders.retrieve(order?.id,{fields:["status"]});if(status==="draft")return setOrderErrors([{code:"VALIDATION_ERROR",resource:"orders",message:"Draft order cannot be placed"}]),setPlaceOrderStatus?.({status:"disabled"}),!1;const savePaymentSourceToCustomerWallet=(_c=(_b=event?.elements)===null||_b===void 0?void 0:_b.save_payment_source_to_customer_wallet)===null||_c===void 0?void 0:_c.checked;if(savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),elements2!=null){const billingInfo=order?.billing_address,email=(_d=order?.customer_email)!==null&&_d!==void 0?_d:"",billingDetails={name:(_e=billingInfo?.full_name)!==null&&_e!==void 0?_e:"",email,phone:billingInfo?.phone,address:{city:billingInfo?.city,country:billingInfo?.country_code,line1:billingInfo?.line_1,line2:(_f=billingInfo?.line_2)!==null&&_f!==void 0?_f:"",postal_code:(_g=billingInfo?.zip_code)!==null&&_g!==void 0?_g:"",state:billingInfo?.state_code}},url=new URL(window.location.href),cleanUrl=`${url.origin}${url.pathname}?accessToken=${url.searchParams.get("accessToken")}`,{error}=yield stripe2.confirmPayment({elements:elements2,confirmParams:{return_url:cleanUrl,payment_method_data:{billing_details:billingDetails}},redirect:"if_required"});return error?(console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:(_h=error.message)!==null&&_h!==void 0?_h:""}]),!1):!0}return!1});function handleChange(event){return tslib_1.__awaiter(this,void 0,void 0,function*(){if(console.debug("StripePaymentElement onChange event",{event}),event.complete&&["applepay","googlepay"].includes(event.value.type)){const sdk=sdkClient();if(sdk==null||order==null)return;const{status}=yield sdk.orders.retrieve(order?.id,{fields:["status"]});if(status==="draft"){setOrderErrors([{code:"VALIDATION_ERROR",resource:"orders",message:"Draft order cannot be placed"}]),setPlaceOrderStatus?.({status:"disabled"});return}}})}return(0,jsx_runtime_1.jsxs)("form",{ref,children:[(0,jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement,{id:"payment-element",options:Object.assign(Object.assign({},defaultOptions),options),onChange:handleChange}),templateCustomerSaveToWallet&&(0,jsx_runtime_1.jsx)(Parent_1.default,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]})}function StripePayment(_a){var{publishableKey,show,options,clientSecret,locale="auto",expressPayments=!1,connectedAccount}=_a,p=tslib_1.__rest(_a,["publishableKey","show","options","clientSecret","locale","expressPayments","connectedAccount"]);const[isLoaded,setIsLoaded]=(0,react_1.useState)(!1),[stripe,setStripe]=(0,react_1.useState)(null),{containerClassName,templateCustomerSaveToWallet,fonts=[],appearance}=p,divProps=tslib_1.__rest(p,["containerClassName","templateCustomerSaveToWallet","fonts","appearance"]);(0,react_1.useEffect)(()=>(show&&publishableKey&&Promise.resolve().then(()=>tslib_1.__importStar(require("@stripe/stripe-js"))).then(({loadStripe})=>{tslib_1.__awaiter(this,void 0,void 0,function*(){const options2=Object.assign({locale},connectedAccount?{stripeAccount:connectedAccount}:{}),res=yield loadStripe(publishableKey,options2);res!=null?(setStripe(res),setIsLoaded(!0)):(console.error("Stripe failed to load"),setIsLoaded(!1))})}),()=>{setIsLoaded(!1)}),[show,publishableKey,connectedAccount]);const elementsOptions={clientSecret,appearance:Object.assign(Object.assign({},defaultAppearance),appearance),fonts};return isLoaded&&stripe!=null&&clientSecret!=null?(0,jsx_runtime_1.jsx)("div",Object.assign({className:containerClassName},divProps,{children:(0,jsx_runtime_1.jsx)(react_stripe_js_1.Elements,{stripe,options:elementsOptions,children:expressPayments?(0,jsx_runtime_1.jsx)(StripeExpressPayment_1.StripeExpressPayment,{clientSecret}):(0,jsx_runtime_1.jsx)(StripePaymentForm,{stripe,options,templateCustomerSaveToWallet})})})):null}exports.default=StripePayment;