@commercelayer/react-components 3.4.2 → 3.5.0

package/lib/components/CheckoutComPayment.d.ts

@@ -6,6 +6,8 @@ export declare type CheckoutComConfig = {
     containerClassName?: string;
     hintLabel?: string;
     name?: string;
+    success_url?: string;
+    failure_url?: string;
     options?: {
         style: FramesStyle;
     };

package/lib/components/CheckoutComPayment.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useRef}from"react";import useExternalScript from"../utils/hooks/useExternalScript";import PaymentMethodContext from"../context/PaymentMethodContext";import{Frames,CardNumber,ExpiryDate,Cvv}from"frames-react";import OrderContext from"../context/OrderContext";import Parent from"./utils/Parent";import{setCustomerOrderParam}from"../utils/localStorage";const scriptUrl="https://cdn.checkout.com/js/framesv2.min.js",systemLanguages=["DE-DE","EN-GB","ES-ES","FR-FR","IT-IT","KR-KR","NL-NL"],defaultOptions={style:{base:{color:"black",fontSize:"18px"},autofill:{backgroundColor:"yellow"},hover:{color:"blue"},focus:{color:"blue"},valid:{color:"green"},invalid:{color:"red"},placeholder:{base:{color:"gray"},focus:{border:"solid 1px blue"}}}},CheckoutComPayment=_a=>{var{publicKey,options=defaultOptions,locale="EN-GB"}=_a,p=__rest(_a,["publicKey","options","locale"]);const ref=useRef(null),loaded=useExternalScript(scriptUrl),{setPaymentRef,currentPaymentMethodType,paymentSource,setPaymentSource,setPaymentMethodErrors}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),{containerClassName,templateCustomerSaveToWallet}=p,divProps=__rest(p,["containerClassName","templateCustomerSaveToWallet"]),handleSubmit=async()=>{var _a2,_b,_c,_d,_e,_f,_g,_h,_j,_k,_l;const savePaymentSourceToCustomerWallet=(_c=(_b=(_a2=ref==null?void 0:ref.current)===null||_a2===void 0?void 0:_a2.elements)===null||_b===void 0?void 0:_b.save_payment_source_to_customer_wallet)===null||_c===void 0?void 0:_c.checked;if(savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),window.Frames){window.Frames.cardholder={name:(_d=order==null?void 0:order.billing_address)===null||_d===void 0?void 0:_d.full_name,billingAddress:{addressLine1:(_e=order==null?void 0:order.billing_address)===null||_e===void 0?void 0:_e.line_1,addressLine2:(_f=order==null?void 0:order.billing_address)===null||_f===void 0?void 0:_f.line_2,zip:(_g=order==null?void 0:order.billing_address)===null||_g===void 0?void 0:_g.zip_code,city:(_h=order==null?void 0:order.billing_address)===null||_h===void 0?void 0:_h.city,state:(_j=order==null?void 0:order.billing_address)===null||_j===void 0?void 0:_j.state_code,country:(_k=order==null?void 0:order.billing_address)===null||_k===void 0?void 0:_k.country_code},phone:(_l=order==null?void 0:order.billing_address)===null||_l===void 0?void 0:_l.phone};try{const data=await window.Frames.submitCard();if(data.token&&paymentSource&&currentPaymentMethodType){const ps=await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{token:data.token,payment_type:"token",success_url:window.location.href,failure_url:window.location.href,_authorize:!0}});ps&&ps.redirect_uri&&(window.location.href=ps.redirect_uri)}}catch(error){console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error==null?void 0:error.message}])}}return!1},lang=`${locale.toUpperCase()}-${locale.toUpperCase()}`,localization=systemLanguages.includes(lang)?lang:"EN-GB";return loaded?_jsxs("form",Object.assign({ref},{children:[_jsx("div",Object.assign({className:containerClassName},divProps,{children:_jsxs(Frames,Object.assign({config:Object.assign({debug:!0,publicKey,localization},options),cardValidationChanged:e=>{e.isValid&&ref.current&&(ref.current.onsubmit=()=>handleSubmit(),setPaymentRef({ref}))},cardTokenized:data=>data},{children:[_jsx(CardNumber,{},void 0),_jsx(ExpiryDate,{},void 0),_jsx(Cvv,{},void 0)]}),void 0)}),void 0),templateCustomerSaveToWallet&&_jsx(Parent,Object.assign({},{name:"save_payment_source_to_customer_wallet"},{children:templateCustomerSaveToWallet}),void 0)]}),void 0):null};export default CheckoutComPayment;
+import{__rest}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useRef}from"react";import useExternalScript from"../utils/hooks/useExternalScript";import PaymentMethodContext from"../context/PaymentMethodContext";import{Frames,CardNumber,ExpiryDate,Cvv}from"frames-react";import OrderContext from"../context/OrderContext";import Parent from"./utils/Parent";import{setCustomerOrderParam}from"../utils/localStorage";const scriptUrl="https://cdn.checkout.com/js/framesv2.min.js",systemLanguages=["DE-DE","EN-GB","ES-ES","FR-FR","IT-IT","KR-KR","NL-NL"],defaultOptions={style:{base:{color:"black",fontSize:"18px"},autofill:{backgroundColor:"yellow"},hover:{color:"blue"},focus:{color:"blue"},valid:{color:"green"},invalid:{color:"red"},placeholder:{base:{color:"gray"},focus:{border:"solid 1px blue"}}}},CheckoutComPayment=_a=>{var{publicKey,options=defaultOptions,locale="EN-GB"}=_a,p=__rest(_a,["publicKey","options","locale"]);const ref=useRef(null),loaded=useExternalScript(scriptUrl),{setPaymentRef,currentPaymentMethodType,paymentSource,setPaymentSource,setPaymentMethodErrors}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),{containerClassName,templateCustomerSaveToWallet,success_url=window.location.href,failure_url=window.location.href,show}=p,divProps=__rest(p,["containerClassName","templateCustomerSaveToWallet","success_url","failure_url","show"]),handleSubmit=async()=>{var _a2,_b,_c,_d,_e,_f,_g,_h,_j,_k,_l;const savePaymentSourceToCustomerWallet=(_c=(_b=(_a2=ref==null?void 0:ref.current)===null||_a2===void 0?void 0:_a2.elements)===null||_b===void 0?void 0:_b.save_payment_source_to_customer_wallet)===null||_c===void 0?void 0:_c.checked;if(savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),window.Frames){window.Frames.cardholder={name:(_d=order==null?void 0:order.billing_address)===null||_d===void 0?void 0:_d.full_name,billingAddress:{addressLine1:(_e=order==null?void 0:order.billing_address)===null||_e===void 0?void 0:_e.line_1,addressLine2:(_f=order==null?void 0:order.billing_address)===null||_f===void 0?void 0:_f.line_2,zip:(_g=order==null?void 0:order.billing_address)===null||_g===void 0?void 0:_g.zip_code,city:(_h=order==null?void 0:order.billing_address)===null||_h===void 0?void 0:_h.city,state:(_j=order==null?void 0:order.billing_address)===null||_j===void 0?void 0:_j.state_code,country:(_k=order==null?void 0:order.billing_address)===null||_k===void 0?void 0:_k.country_code},phone:(_l=order==null?void 0:order.billing_address)===null||_l===void 0?void 0:_l.phone};try{const data=await window.Frames.submitCard();if(data.token&&paymentSource&&currentPaymentMethodType){const ps=await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{token:data.token,payment_type:"token",success_url,failure_url,_authorize:!0}});ps&&ps.redirect_uri&&(window.location.href=ps.redirect_uri)}}catch(error){console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error==null?void 0:error.message}])}}return!1},lang=`${locale.toUpperCase()}-${locale.toUpperCase()}`,localization=systemLanguages.includes(lang)?lang:"EN-GB";return loaded&&show?_jsxs("form",Object.assign({ref},{children:[_jsx("div",Object.assign({className:containerClassName},divProps,{children:_jsxs(Frames,Object.assign({config:Object.assign({debug:!0,publicKey,localization},options),cardValidationChanged:e=>{e.isValid&&ref.current&&(ref.current.onsubmit=()=>handleSubmit(),setPaymentRef({ref}))},cardTokenized:data=>data},{children:[_jsx(CardNumber,{},void 0),_jsx(ExpiryDate,{},void 0),_jsx(Cvv,{},void 0)]}),void 0)}),void 0),templateCustomerSaveToWallet&&_jsx(Parent,Object.assign({},{name:"save_payment_source_to_customer_wallet"},{children:templateCustomerSaveToWallet}),void 0)]}),void 0):null};export default CheckoutComPayment;

package/lib/components/PaymentMethod.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment,useContext,useState,useEffect}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import PaymentMethodChildrenContext from"../context/PaymentMethodChildrenContext";import components from"../config/components";import getLoaderComponent from"../utils/getLoaderComponent";const propTypes=components.PaymentMethod.propTypes,displayName=components.PaymentMethod.displayName,PaymentMethod=_a=>{var{children,className,activeClass,loader="Loading...",clickableContainer,onClick}=_a,p=__rest(_a,["children","className","activeClass","loader","clickableContainer","onClick"]);const[loading,setLoading]=useState(!0),[paymentSelected,setPaymentSelected]=useState(""),{paymentMethods,currentPaymentMethodId,setPaymentMethod,setLoading:setLoadingPlaceOrder}=useContext(PaymentMethodContext);useEffect(()=>(paymentMethods&&setLoading(!1),currentPaymentMethodId&&setPaymentSelected(currentPaymentMethodId),()=>{setLoading(!0)}),[paymentMethods,currentPaymentMethodId]);const components2=paymentMethods&&paymentMethods.map((payment,k)=>{const isActive=currentPaymentMethodId===(payment==null?void 0:payment.id),paymentMethodProps={payment,clickableContainer,paymentSelected,setPaymentSelected},onClickable=clickableContainer?async e=>{e.stopPropagation(),setLoadingPlaceOrder({loading:!0}),setPaymentSelected(payment.id);const paymentResource=payment==null?void 0:payment.payment_source_type,paymentMethodId=payment==null?void 0:payment.id;await setPaymentMethod({paymentResource,paymentMethodId}),onClick&&onClick(payment),setLoadingPlaceOrder({loading:!1})}:void 0;return _jsx("div",Object.assign({className:`${className} ${isActive?activeClass:""}`,onClick:onClickable},p,{children:_jsx(PaymentMethodChildrenContext.Provider,Object.assign({value:paymentMethodProps},{children}),void 0)}),k)});return loading?getLoaderComponent(loader):_jsx(Fragment,{children:components2},void 0)};PaymentMethod.propTypes=propTypes,PaymentMethod.displayName=displayName;export default PaymentMethod;
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment,useContext,useState,useEffect}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import PaymentMethodChildrenContext from"../context/PaymentMethodChildrenContext";import components from"../config/components";import getLoaderComponent from"../utils/getLoaderComponent";const propTypes=components.PaymentMethod.propTypes,displayName=components.PaymentMethod.displayName,PaymentMethod=_a=>{var{children,className,activeClass,loader="Loading...",clickableContainer,onClick}=_a,p=__rest(_a,["children","className","activeClass","loader","clickableContainer","onClick"]);const[loading,setLoading]=useState(!0),[paymentSelected,setPaymentSelected]=useState(""),{paymentMethods,currentPaymentMethodId,setPaymentMethod,setLoading:setLoadingPlaceOrder}=useContext(PaymentMethodContext);useEffect(()=>(paymentMethods&&setLoading(!1),currentPaymentMethodId&&setPaymentSelected(currentPaymentMethodId),()=>{setLoading(!0)}),[paymentMethods,currentPaymentMethodId]);const components2=paymentMethods&&paymentMethods.map((payment,k)=>{const isActive=currentPaymentMethodId===(payment==null?void 0:payment.id),paymentMethodProps={payment,clickableContainer,paymentSelected,setPaymentSelected},paymentResource=payment==null?void 0:payment.payment_source_type,onClickable=clickableContainer?async e=>{e.stopPropagation(),setLoadingPlaceOrder({loading:!0}),setPaymentSelected(payment.id);const paymentMethodId=payment==null?void 0:payment.id;await setPaymentMethod({paymentResource,paymentMethodId}),onClick&&onClick(payment),setLoadingPlaceOrder({loading:!1})}:void 0;return _jsx("div",Object.assign({"data-test-id":paymentResource,className:`${className} ${isActive?activeClass:""}`,onClick:onClickable},p,{children:_jsx(PaymentMethodChildrenContext.Provider,Object.assign({value:paymentMethodProps},{children}),void 0)}),k)});return loading?getLoaderComponent(loader):_jsx(Fragment,{children:components2},void 0)};PaymentMethod.propTypes=propTypes,PaymentMethod.displayName=displayName;export default PaymentMethod;

package/lib/reducers/PaymentMethodReducer.d.ts

@@ -21,6 +21,9 @@ export declare type PaymentSourceObject = {
         payment_request_data?: {
             payment_method?: Card;
         };
+        payment_response?: {
+            resultCode?: 'Authorised';
+        };
     };
     braintree_payments: BraintreePayment & {
         options?: {

package/lib/utils/getCardDetails.js

@@ -1 +1 @@
-export default function getCardDetails({paymentType,customerPayment}){var _a,_b,_c,_d;switch(paymentType){case"checkout_com_payments":{const ps=customerPayment.payment_source,source=(_a=ps==null?void 0:ps.payment_response)===null||_a===void 0?void 0:_a.source;if(source)return{brand:source.scheme.toLowerCase(),exp_month:source.expiry_month,exp_year:source.expiry_year,last4:source.last4};break}case"stripe_payments":case"braintree_payments":{const ps=customerPayment.payment_source,source=(_b=ps==null?void 0:ps.options)===null||_b===void 0?void 0:_b.card;if(source)return Object.assign({},source);break}case"adyen_payments":{const ps=customerPayment.payment_source,source=(_c=ps==null?void 0:ps.payment_request_data)===null||_c===void 0?void 0:_c.payment_method;if(source)return Object.assign({},source);break}default:{const ps=customerPayment.payment_source,source=(_d=ps==null?void 0:ps.metadata)===null||_d===void 0?void 0:_d.card;if(source)return Object.assign({},source);break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****"}}
+export default function getCardDetails({paymentType,customerPayment}){var _a,_b,_c,_d,_e;switch(paymentType){case"checkout_com_payments":{const ps=customerPayment.payment_source,source=(_a=ps==null?void 0:ps.payment_response)===null||_a===void 0?void 0:_a.source;if(source)return{brand:source.scheme.toLowerCase(),exp_month:source.expiry_month,exp_year:source.expiry_year,last4:source.last4};break}case"stripe_payments":case"braintree_payments":{const ps=customerPayment.payment_source,source=(_b=ps==null?void 0:ps.options)===null||_b===void 0?void 0:_b.card;if(source)return Object.assign({},source);break}case"adyen_payments":{const ps=customerPayment.payment_source,source=(_c=ps==null?void 0:ps.payment_request_data)===null||_c===void 0?void 0:_c.payment_method,authorized=((_d=ps==null?void 0:ps.payment_response)===null||_d===void 0?void 0:_d.resultCode)==="Authorised";if(source&&authorized)return Object.assign(Object.assign({},source),{brand:(source==null?void 0:source.brand)?source.brand:"credit-card"});break}default:{const ps=customerPayment.payment_source,source=(_e=ps==null?void 0:ps.metadata)===null||_e===void 0?void 0:_e.card;if(source)return Object.assign({},source);break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****"}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "The Official Commerce Layer React Components",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",