@commercelayer/react-components 2.51.1 → 2.51.2
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
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=(0,tslib_1.__importDefault)(require("../context/PaymentMethodContext")),isEmpty_1=(0,tslib_1.__importDefault)(require("lodash/isEmpty")),OrderContext_1=(0,tslib_1.__importDefault)(require("../context/OrderContext")),Parent_1=(0,tslib_1.__importDefault)(require("./utils/Parent")),localStorage_1=require("../utils/localStorage"),promisify_1=(0,tslib_1.__importDefault)(require("../utils/promisify")),defaultConfig={styles:{input:{"font-size":"16px",color:"#3A3A3A"},".number":{"font-family":"monospace"},":focus":{color:"blue"},".valid":{color:"green"},".invalid":{color:"red"},"@media screen and (max-width: 700px)":{input:{"font-size":"14px"}}},fields:{number:{label:"Card Number",selector:"#card-number",placeholder:"4111 1111 1111 1111"},cvv:{label:"CVV",selector:"#cvv",placeholder:"123"},expirationDate:{label:"Expiration Date",selector:"#expiration-date",placeholder:"10/2022"}},submitLabel:"Set payment method"},BraintreePayment=({authorization,config,templateCustomerSaveToWallet})=>{var _a,_b,_c;const{fields,styles,containerClassName,cardContainerClassName,fieldsContainerClassName,expDateContainerClassName,fieldLabelClassName,cvvContainerClassName,inputWrapperClassName,cardDetailsContainerClassName}=Object.assign(Object.assign({},defaultConfig),config),[loadBraintree,setLoadBraintree]=(0,react_1.useState)(!1),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null),handleSubmitForm=async(event,hostedFieldsInstance,threeDSInstance)=>{var _a2,_b2;const savePaymentSourceToCustomerWallet=(_b2=(_a2=event==null?void 0:event.elements)===null||_a2===void 0?void 0:_a2.save_payment_source_to_customer_wallet)===null||_b2===void 0?void 0:_b2.checked;if(savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),hostedFieldsInstance)try{const payload=await(0,promisify_1.default)(hostedFieldsInstance).then(payload2=>payload2),billingAddress=order==null?void 0:order.billing_address,verifyCardOptions={nonce:payload.nonce,bin:payload.details.bin,amount:order==null?void 0:order.total_amount_with_taxes_float,email:order==null?void 0:order.customer_email,billingAddress:{givenName:billingAddress==null?void 0:billingAddress.first_name,surname:billingAddress==null?void 0:billingAddress.last_name,phoneNumber:billingAddress==null?void 0:billingAddress.phone,streetAddress:billingAddress==null?void 0:billingAddress.line_1,countryCodeAlpha2:billingAddress==null?void 0:billingAddress.country_code,postalCode:billingAddress==null?void 0:billingAddress.zip_code,region:billingAddress==null?void 0:billingAddress.state_code,locality:billingAddress==null?void 0:billingAddress.city},onLookupComplete:(_data,next)=>{next()}},response=await threeDSInstance.verifyCard(verifyCardOptions);return response.rawCardinalSDKVerificationData.Validated&&paymentSource?(paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"braintree_payments",attributes:{
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=(0,tslib_1.__importDefault)(require("../context/PaymentMethodContext")),isEmpty_1=(0,tslib_1.__importDefault)(require("lodash/isEmpty")),OrderContext_1=(0,tslib_1.__importDefault)(require("../context/OrderContext")),Parent_1=(0,tslib_1.__importDefault)(require("./utils/Parent")),localStorage_1=require("../utils/localStorage"),promisify_1=(0,tslib_1.__importDefault)(require("../utils/promisify")),defaultConfig={styles:{input:{"font-size":"16px",color:"#3A3A3A"},".number":{"font-family":"monospace"},":focus":{color:"blue"},".valid":{color:"green"},".invalid":{color:"red"},"@media screen and (max-width: 700px)":{input:{"font-size":"14px"}}},fields:{number:{label:"Card Number",selector:"#card-number",placeholder:"4111 1111 1111 1111"},cvv:{label:"CVV",selector:"#cvv",placeholder:"123"},expirationDate:{label:"Expiration Date",selector:"#expiration-date",placeholder:"10/2022"}},submitLabel:"Set payment method"},BraintreePayment=({authorization,config,templateCustomerSaveToWallet})=>{var _a,_b,_c;const{fields,styles,containerClassName,cardContainerClassName,fieldsContainerClassName,expDateContainerClassName,fieldLabelClassName,cvvContainerClassName,inputWrapperClassName,cardDetailsContainerClassName}=Object.assign(Object.assign({},defaultConfig),config),[loadBraintree,setLoadBraintree]=(0,react_1.useState)(!1),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null),handleSubmitForm=async(event,hostedFieldsInstance,threeDSInstance)=>{var _a2,_b2;const savePaymentSourceToCustomerWallet=(_b2=(_a2=event==null?void 0:event.elements)===null||_a2===void 0?void 0:_a2.save_payment_source_to_customer_wallet)===null||_b2===void 0?void 0:_b2.checked;if(savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),hostedFieldsInstance)try{const payload=await(0,promisify_1.default)(hostedFieldsInstance).then(payload2=>payload2),billingAddress=order==null?void 0:order.billing_address,verifyCardOptions={nonce:payload.nonce,bin:payload.details.bin,amount:order==null?void 0:order.total_amount_with_taxes_float,email:order==null?void 0:order.customer_email,billingAddress:{givenName:billingAddress==null?void 0:billingAddress.first_name,surname:billingAddress==null?void 0:billingAddress.last_name,phoneNumber:billingAddress==null?void 0:billingAddress.phone,streetAddress:billingAddress==null?void 0:billingAddress.line_1,countryCodeAlpha2:billingAddress==null?void 0:billingAddress.country_code,postalCode:billingAddress==null?void 0:billingAddress.zip_code,region:billingAddress==null?void 0:billingAddress.state_code,locality:billingAddress==null?void 0:billingAddress.city},onLookupComplete:(_data,next)=>{next()}},response=await threeDSInstance.verifyCard(verifyCardOptions);return response.rawCardinalSDKVerificationData.Validated&&paymentSource?(paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"braintree_payments",attributes:{payment_method_nonce:response.nonce,options:{id:response.nonce,card:{last4:response.details.lastFour,exp_year:response.details.expirationYear,exp_month:response.details.expirationMonth,brand:response.details.cardType.toLowerCase()}}}}),!0):!1}catch(error){return console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}return!1};return(0,react_1.useEffect)(()=>{if(!ref&&authorization&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet","false"),authorization&&!loadBraintree&&!(0,isEmpty_1.default)(window)){const braintreeClient=require("braintree-web/client"),hostedFields=require("braintree-web/hosted-fields"),threeDSecure=require("braintree-web/three-d-secure");braintreeClient.create({authorization},(clientErr,clientInstance)=>{if(clientErr){console.error(clientErr);return}hostedFields.create({client:clientInstance,fields,styles},(hostedFieldsErr,hostedFieldsInstance)=>{if(hostedFieldsErr){console.error(hostedFieldsErr);return}setLoadBraintree(!0),threeDSecure.create({authorization,version:2},(threeDSecureErr,threeDSecureInstance)=>{threeDSecureErr&&(console.error("3DSecure error",threeDSecureErr),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:threeDSecureErr.message}])),ref.current&&(ref.current.onsubmit=()=>handleSubmitForm(ref.current,hostedFieldsInstance,threeDSecureInstance),setPaymentRef({ref}))})})})}return()=>{setPaymentRef({ref:{current:null}}),setLoadBraintree(!1)}},[authorization,ref]),!authorization&&!loadBraintree?null:(0,jsx_runtime_1.jsx)("div",Object.assign({className:containerClassName},{children:(0,jsx_runtime_1.jsxs)("form",Object.assign({ref,id:"braintree-form",onSubmit:handleSubmitForm,className:containerClassName},{children:[(0,jsx_runtime_1.jsxs)("div",Object.assign({className:fieldsContainerClassName},{children:[(0,jsx_runtime_1.jsxs)("div",Object.assign({className:cardContainerClassName},{children:[(0,jsx_runtime_1.jsx)("label",Object.assign({className:fieldLabelClassName,htmlFor:"card-number"},{children:(_a=fields==null?void 0:fields.number)===null||_a===void 0?void 0:_a.label}),void 0),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"card-number"},void 0)]}),void 0),(0,jsx_runtime_1.jsxs)("div",Object.assign({className:cardDetailsContainerClassName},{children:[(0,jsx_runtime_1.jsxs)("div",Object.assign({className:expDateContainerClassName},{children:[(0,jsx_runtime_1.jsx)("label",Object.assign({className:fieldLabelClassName,htmlFor:"expiration-date"},{children:(_b=fields==null?void 0:fields.expirationDate)===null||_b===void 0?void 0:_b.label}),void 0),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"expiration-date"},void 0)]}),void 0),(0,jsx_runtime_1.jsxs)("div",Object.assign({className:cvvContainerClassName},{children:[(0,jsx_runtime_1.jsx)("label",Object.assign({className:fieldLabelClassName,htmlFor:"cvv"},{children:(_c=fields==null?void 0:fields.cvv)===null||_c===void 0?void 0:_c.label}),void 0),(0,jsx_runtime_1.jsx)("div",{className:inputWrapperClassName,id:"cvv"},void 0)]}),void 0)]}),void 0)]}),void 0),(0,jsx_runtime_1.jsx)("div",Object.assign({className:fieldsContainerClassName},{children:templateCustomerSaveToWallet&&(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},{name:"save_payment_source_to_customer_wallet"},{children:templateCustomerSaveToWallet}),void 0)}),void 0)]}),void 0)}),void 0)};exports.default=BraintreePayment;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import isEmpty from"lodash/isEmpty";import OrderContext from"../context/OrderContext";import Parent from"./utils/Parent";import{setCustomerOrderParam}from"../utils/localStorage";import promisify from"../utils/promisify";const defaultConfig={styles:{input:{"font-size":"16px",color:"#3A3A3A"},".number":{"font-family":"monospace"},":focus":{color:"blue"},".valid":{color:"green"},".invalid":{color:"red"},"@media screen and (max-width: 700px)":{input:{"font-size":"14px"}}},fields:{number:{label:"Card Number",selector:"#card-number",placeholder:"4111 1111 1111 1111"},cvv:{label:"CVV",selector:"#cvv",placeholder:"123"},expirationDate:{label:"Expiration Date",selector:"#expiration-date",placeholder:"10/2022"}},submitLabel:"Set payment method"},BraintreePayment=({authorization,config,templateCustomerSaveToWallet})=>{var _a,_b,_c;const{fields,styles,containerClassName,cardContainerClassName,fieldsContainerClassName,expDateContainerClassName,fieldLabelClassName,cvvContainerClassName,inputWrapperClassName,cardDetailsContainerClassName}=Object.assign(Object.assign({},defaultConfig),config),[loadBraintree,setLoadBraintree]=useState(!1),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),ref=useRef(null),handleSubmitForm=async(event,hostedFieldsInstance,threeDSInstance)=>{var _a2,_b2;const savePaymentSourceToCustomerWallet=(_b2=(_a2=event==null?void 0:event.elements)===null||_a2===void 0?void 0:_a2.save_payment_source_to_customer_wallet)===null||_b2===void 0?void 0:_b2.checked;if(savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),hostedFieldsInstance)try{const payload=await promisify(hostedFieldsInstance).then(payload2=>payload2),billingAddress=order==null?void 0:order.billing_address,verifyCardOptions={nonce:payload.nonce,bin:payload.details.bin,amount:order==null?void 0:order.total_amount_with_taxes_float,email:order==null?void 0:order.customer_email,billingAddress:{givenName:billingAddress==null?void 0:billingAddress.first_name,surname:billingAddress==null?void 0:billingAddress.last_name,phoneNumber:billingAddress==null?void 0:billingAddress.phone,streetAddress:billingAddress==null?void 0:billingAddress.line_1,countryCodeAlpha2:billingAddress==null?void 0:billingAddress.country_code,postalCode:billingAddress==null?void 0:billingAddress.zip_code,region:billingAddress==null?void 0:billingAddress.state_code,locality:billingAddress==null?void 0:billingAddress.city},onLookupComplete:(_data,next)=>{next()}},response=await threeDSInstance.verifyCard(verifyCardOptions);return response.rawCardinalSDKVerificationData.Validated&&paymentSource?(paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"braintree_payments",attributes:{
|
|
1
|
+
import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import isEmpty from"lodash/isEmpty";import OrderContext from"../context/OrderContext";import Parent from"./utils/Parent";import{setCustomerOrderParam}from"../utils/localStorage";import promisify from"../utils/promisify";const defaultConfig={styles:{input:{"font-size":"16px",color:"#3A3A3A"},".number":{"font-family":"monospace"},":focus":{color:"blue"},".valid":{color:"green"},".invalid":{color:"red"},"@media screen and (max-width: 700px)":{input:{"font-size":"14px"}}},fields:{number:{label:"Card Number",selector:"#card-number",placeholder:"4111 1111 1111 1111"},cvv:{label:"CVV",selector:"#cvv",placeholder:"123"},expirationDate:{label:"Expiration Date",selector:"#expiration-date",placeholder:"10/2022"}},submitLabel:"Set payment method"},BraintreePayment=({authorization,config,templateCustomerSaveToWallet})=>{var _a,_b,_c;const{fields,styles,containerClassName,cardContainerClassName,fieldsContainerClassName,expDateContainerClassName,fieldLabelClassName,cvvContainerClassName,inputWrapperClassName,cardDetailsContainerClassName}=Object.assign(Object.assign({},defaultConfig),config),[loadBraintree,setLoadBraintree]=useState(!1),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),ref=useRef(null),handleSubmitForm=async(event,hostedFieldsInstance,threeDSInstance)=>{var _a2,_b2;const savePaymentSourceToCustomerWallet=(_b2=(_a2=event==null?void 0:event.elements)===null||_a2===void 0?void 0:_a2.save_payment_source_to_customer_wallet)===null||_b2===void 0?void 0:_b2.checked;if(savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),hostedFieldsInstance)try{const payload=await promisify(hostedFieldsInstance).then(payload2=>payload2),billingAddress=order==null?void 0:order.billing_address,verifyCardOptions={nonce:payload.nonce,bin:payload.details.bin,amount:order==null?void 0:order.total_amount_with_taxes_float,email:order==null?void 0:order.customer_email,billingAddress:{givenName:billingAddress==null?void 0:billingAddress.first_name,surname:billingAddress==null?void 0:billingAddress.last_name,phoneNumber:billingAddress==null?void 0:billingAddress.phone,streetAddress:billingAddress==null?void 0:billingAddress.line_1,countryCodeAlpha2:billingAddress==null?void 0:billingAddress.country_code,postalCode:billingAddress==null?void 0:billingAddress.zip_code,region:billingAddress==null?void 0:billingAddress.state_code,locality:billingAddress==null?void 0:billingAddress.city},onLookupComplete:(_data,next)=>{next()}},response=await threeDSInstance.verifyCard(verifyCardOptions);return response.rawCardinalSDKVerificationData.Validated&&paymentSource?(paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"braintree_payments",attributes:{payment_method_nonce:response.nonce,options:{id:response.nonce,card:{last4:response.details.lastFour,exp_year:response.details.expirationYear,exp_month:response.details.expirationMonth,brand:response.details.cardType.toLowerCase()}}}}),!0):!1}catch(error){return console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}return!1};return useEffect(()=>{if(!ref&&authorization&&setCustomerOrderParam("_save_payment_source_to_customer_wallet","false"),authorization&&!loadBraintree&&!isEmpty(window)){const braintreeClient=require("braintree-web/client"),hostedFields=require("braintree-web/hosted-fields"),threeDSecure=require("braintree-web/three-d-secure");braintreeClient.create({authorization},(clientErr,clientInstance)=>{if(clientErr){console.error(clientErr);return}hostedFields.create({client:clientInstance,fields,styles},(hostedFieldsErr,hostedFieldsInstance)=>{if(hostedFieldsErr){console.error(hostedFieldsErr);return}setLoadBraintree(!0),threeDSecure.create({authorization,version:2},(threeDSecureErr,threeDSecureInstance)=>{threeDSecureErr&&(console.error("3DSecure error",threeDSecureErr),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:threeDSecureErr.message}])),ref.current&&(ref.current.onsubmit=()=>handleSubmitForm(ref.current,hostedFieldsInstance,threeDSecureInstance),setPaymentRef({ref}))})})})}return()=>{setPaymentRef({ref:{current:null}}),setLoadBraintree(!1)}},[authorization,ref]),!authorization&&!loadBraintree?null:_jsx("div",Object.assign({className:containerClassName},{children:_jsxs("form",Object.assign({ref,id:"braintree-form",onSubmit:handleSubmitForm,className:containerClassName},{children:[_jsxs("div",Object.assign({className:fieldsContainerClassName},{children:[_jsxs("div",Object.assign({className:cardContainerClassName},{children:[_jsx("label",Object.assign({className:fieldLabelClassName,htmlFor:"card-number"},{children:(_a=fields==null?void 0:fields.number)===null||_a===void 0?void 0:_a.label}),void 0),_jsx("div",{className:inputWrapperClassName,id:"card-number"},void 0)]}),void 0),_jsxs("div",Object.assign({className:cardDetailsContainerClassName},{children:[_jsxs("div",Object.assign({className:expDateContainerClassName},{children:[_jsx("label",Object.assign({className:fieldLabelClassName,htmlFor:"expiration-date"},{children:(_b=fields==null?void 0:fields.expirationDate)===null||_b===void 0?void 0:_b.label}),void 0),_jsx("div",{className:inputWrapperClassName,id:"expiration-date"},void 0)]}),void 0),_jsxs("div",Object.assign({className:cvvContainerClassName},{children:[_jsx("label",Object.assign({className:fieldLabelClassName,htmlFor:"cvv"},{children:(_c=fields==null?void 0:fields.cvv)===null||_c===void 0?void 0:_c.label}),void 0),_jsx("div",{className:inputWrapperClassName,id:"cvv"},void 0)]}),void 0)]}),void 0)]}),void 0),_jsx("div",Object.assign({className:fieldsContainerClassName},{children:templateCustomerSaveToWallet&&_jsx(Parent,Object.assign({},{name:"save_payment_source_to_customer_wallet"},{children:templateCustomerSaveToWallet}),void 0)}),void 0)]}),void 0)}),void 0)};export default BraintreePayment;
|