@commercelayer/react-components 3.6.2 → 3.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import{CardElement,Elements,useElements,useStripe}from"@stripe/react-stripe-js";import Parent from"./utils/Parent";import OrderContext from"../context/OrderContext";import{setCustomerOrderParam}from"../utils/localStorage";const defaultOptions={style:{base:{fontSize:"16px",color:"#424770","::placeholder":{color:"#aab7c4"}},invalid:{color:"#9e2146"}},hidePostalCode:!0},StripePaymentForm=({options=defaultOptions,templateCustomerSaveToWallet})=>{var _a;const ref=useRef(null),{currentPaymentMethodType,setPaymentMethodErrors,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),stripe=useStripe(),elements=useElements();useEffect(()=>{var _a2;return ref.current&&stripe&&elements&&((_a2=order==null?void 0:order.payment_source)===null||_a2===void 0?void 0:_a2.id)&&(ref.current.onsubmit=paymentSource=>onSubmit({event:ref.current,stripe,elements,paymentSource}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}},[ref,stripe,elements,(_a=order==null?void 0:order.payment_source)===null||_a===void 0?void 0:_a.id]);const onSubmit=async({event,stripe:stripe2,elements:elements2,paymentSource})=>{var _a2,_b;if(!stripe2)return!1;const savePaymentSourceToCustomerWallet=(_b=(_a2=event==null?void 0:event.elements)===null||_a2===void 0?void 0:_a2.save_payment_source_to_customer_wallet)===null||_b===void 0?void 0:_b.checked;savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet);const cardElement=elements2&&elements2.getElement(CardElement);if(cardElement){const billingInfo=order==null?void 0:order.billing_address,email=order==null?void 0:order.customer_email,billing_details={name:billingInfo==null?void 0:billingInfo.full_name,email,phone:billingInfo==null?void 0:billingInfo.phone,address:{city:billingInfo==null?void 0:billingInfo.city,country:billingInfo==null?void 0:billingInfo.country_code,line1:billingInfo==null?void 0:billingInfo.line_1,postal_code:billingInfo==null?void 0:billingInfo.zip_code,state:billingInfo==null?void 0:billingInfo.state_code}}
|
|
1
|
+
import{__rest}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import{CardElement,Elements,useElements,useStripe}from"@stripe/react-stripe-js";import Parent from"./utils/Parent";import OrderContext from"../context/OrderContext";import{setCustomerOrderParam}from"../utils/localStorage";const defaultOptions={style:{base:{fontSize:"16px",color:"#424770","::placeholder":{color:"#aab7c4"}},invalid:{color:"#9e2146"}},hidePostalCode:!0},StripePaymentForm=({options=defaultOptions,templateCustomerSaveToWallet})=>{var _a;const ref=useRef(null),{setPaymentSource,currentPaymentMethodType,setPaymentMethodErrors,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),stripe=useStripe(),elements=useElements();useEffect(()=>{var _a2;return ref.current&&stripe&&elements&&((_a2=order==null?void 0:order.payment_source)===null||_a2===void 0?void 0:_a2.id)&&(ref.current.onsubmit=paymentSource=>onSubmit({event:ref.current,stripe,elements,paymentSource}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}},[ref,stripe,elements,(_a=order==null?void 0:order.payment_source)===null||_a===void 0?void 0:_a.id]);const onSubmit=async({event,stripe:stripe2,elements:elements2,paymentSource})=>{var _a2,_b;if(!stripe2)return!1;const savePaymentSourceToCustomerWallet=(_b=(_a2=event==null?void 0:event.elements)===null||_a2===void 0?void 0:_a2.save_payment_source_to_customer_wallet)===null||_b===void 0?void 0:_b.checked;savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet);const cardElement=elements2&&elements2.getElement(CardElement);if(cardElement){const billingInfo=order==null?void 0:order.billing_address,email=order==null?void 0:order.customer_email,billing_details={name:billingInfo==null?void 0:billingInfo.full_name,email,phone:billingInfo==null?void 0:billingInfo.phone,address:{city:billingInfo==null?void 0:billingInfo.city,country:billingInfo==null?void 0:billingInfo.country_code,line1:billingInfo==null?void 0:billingInfo.line_1,postal_code:billingInfo==null?void 0:billingInfo.zip_code,state:billingInfo==null?void 0:billingInfo.state_code}},{paymentMethod}=await stripe2.createPaymentMethod({type:"card",card:cardElement,billing_details}),clientSecret=paymentSource==null?void 0:paymentSource.client_secret,paymentSourceId=paymentSource==null?void 0:paymentSource.id;if(clientSecret){const{error,paymentIntent}=await stripe2.confirmCardPayment(clientSecret,{payment_method:{card:cardElement,billing_details}});if(error)return console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1;if(paymentIntent&&paymentMethod&&paymentSourceId&¤tPaymentMethodType)try{return await setPaymentSource({paymentSourceId,paymentResource:currentPaymentMethodType,attributes:{options:Object.assign(Object.assign({},paymentMethod),{setup_future_usage:"off_session"})}}),!0}catch{return!1}}}return!1};return _jsxs("form",Object.assign({ref},{children:[_jsx(CardElement,{options:Object.assign(Object.assign({},defaultOptions),options)}),templateCustomerSaveToWallet&&_jsx(Parent,Object.assign({},{name:"save_payment_source_to_customer_wallet"},{children:templateCustomerSaveToWallet}))]}))},StripePayment=_a=>{var{publishableKey,show,options,locale="auto"}=_a,p=__rest(_a,["publishableKey","show","options","locale"]);const[isLoaded,setIsLoaded]=useState(!1),[stripe,setStripe]=useState(null),{containerClassName,templateCustomerSaveToWallet,fonts=[]}=p,divProps=__rest(p,["containerClassName","templateCustomerSaveToWallet","fonts"]);return useEffect(()=>{if(show&&publishableKey){const{loadStripe}=require("@stripe/stripe-js");(async()=>{const res=await loadStripe(publishableKey,{locale});setStripe(res),setIsLoaded(!0)})()}return()=>{setIsLoaded(!1)}},[show,publishableKey]),isLoaded&&stripe?_jsx("div",Object.assign({className:containerClassName},divProps,{children:_jsx(Elements,Object.assign({stripe,options:{fonts}},{children:_jsx(StripePaymentForm,{options,templateCustomerSaveToWallet})}))})):null};export default StripePayment;
|