@commercelayer/react-components 3.15.0-beta.3 → 3.15.0-beta.6
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{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import{setCustomerOrderParam}from"../utils/localStorage";import Parent from"./utils/Parent";import getBrowserInfo from"../utils/browserInfo";import PlaceOrderContext from"../context/PlaceOrderContext";import OrderContext from"../context/OrderContext";const threeDSConfiguration={challengeWindowSize:"05"},defaultConfig={};export function AdyenPayment({clientKey,config,templateCustomerSaveToWallet,environment="test",locale="en_US"}){const{cardContainerClassName,threeDSecureContainerClassName,
|
|
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{setCustomerOrderParam}from"../utils/localStorage";import Parent from"./utils/Parent";import getBrowserInfo from"../utils/browserInfo";import PlaceOrderContext from"../context/PlaceOrderContext";import OrderContext from"../context/OrderContext";const threeDSConfiguration={challengeWindowSize:"05"},defaultConfig={};export function AdyenPayment({clientKey,config,templateCustomerSaveToWallet,environment="test",locale="en_US"}){const{cardContainerClassName,threeDSecureContainerClassName,styles}={...defaultConfig,...config},[loadAdyen,setLoadAdyen]=useState(!1),[checkout,setCheckout]=useState(null),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),{placeOrderButtonRef}=useContext(PlaceOrderContext),ref=useRef(null),handleSubmit=async(e,component)=>{const savePaymentSourceToCustomerWallet=e?.elements?.save_payment_source_to_customer_wallet?.checked;return savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),component&&component.submit&&component.submit(),!1},handleChange=async(state,checkout2)=>{if(state.isValid){ref.current&&(ref.current.onsubmit=()=>handleSubmit(ref.current,checkout2),setPaymentRef({ref}));const browserInfo=getBrowserInfo(),attributes={payment_request_data:{payment_method:state.data.paymentMethod,shopperInteraction:"Ecommerce",recurringProcessingModel:"CardOnFile",origin:window.location.origin,return_url:window.location.href,redirect_from_issuer_method:"GET",browser_info:{acceptHeader:"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",...browserInfo}}};paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes})}},handleOnAdditionalDetails=async(state,component)=>{const attributes={payment_request_details:state.data,_details:1};try{const pSource=paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes}),adyenAction=pSource?.payment_response?.action,resultCode=pSource?.payment_response?.resultCode;if(adyenAction&&component)return component.handleAction(adyenAction),!1;if(["Authorised","Pending","Received"].includes(resultCode))return placeOrderButtonRef!==null&&placeOrderButtonRef?.current!=null&&(placeOrderButtonRef.current.disabled===!0&&(placeOrderButtonRef.current.disabled=!1),placeOrderButtonRef.current?.click()),!0;if(["Cancelled"].includes(resultCode)){const message=pSource?.payment_response?.refusalReason;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}])}return!1}catch(error){return console.error("Adyen additional details error:",error),!1}},onSubmit=async(state,component)=>{const attributes={payment_request_data:{...state.data,payment_method:state.data.paymentMethod,return_url:window.location.href},_authorize:1};delete attributes.payment_request_data.paymentMethod;try{const res=await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes}),action=res?.payment_response?.action;if(component&&action)return component.handleAction(action),!1;const resultCode=res?.payment_response?.resultCode;if(["Authorised","Pending","Received"].includes(resultCode))return placeOrderButtonRef!==null&&placeOrderButtonRef?.current!=null&&(placeOrderButtonRef.current.disabled===!0&&(placeOrderButtonRef.current.disabled=!1),placeOrderButtonRef.current?.click()),!0;if(["Cancelled"].includes(resultCode)){const message=res?.payment_response?.refusalReason;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}])}if(res?.payment_response?.errorType)if(res?.payment_response?.errorCode==="14_006")onSubmit(state,component);else{const message=res?.payment_response?.message;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}])}return!1}catch(error){return setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}};return useEffect(()=>{const paymentMethodsResponse=paymentSource?.payment_methods?.paymentMethods?paymentSource?.payment_methods.paymentMethods:[],[firstPaymentMethod]=paymentMethodsResponse,isOnlyCard=paymentMethodsResponse?.length===1&&firstPaymentMethod.type==="scheme";paymentMethodsResponse.length===0&&console.error("Payment methods are not available. Please, check your Adyen configuration.");const options={locale,environment,clientKey,amount:{currency:order?.currency_code||"",value:order?.total_amount_with_taxes_cents||0},countryCode:order?.country_code||"",paymentMethodsResponse:{paymentMethods:paymentMethodsResponse},showPayButton:!1,paymentMethodsConfiguration:{threeDS2:threeDSConfiguration,paypal:{showPayButton:!0},card:{holderNameRequired:!1}},onAdditionalDetails:handleOnAdditionalDetails,onChange:handleChange,onSubmit};return!ref&&clientKey&&setCustomerOrderParam("_save_payment_source_to_customer_wallet","false"),clientKey&&!loadAdyen&&window&&!checkout&&import("@adyen/adyen-web").then(({default:AdyenCheckout})=>{const type=isOnlyCard?"card":"dropin";AdyenCheckout(options).then(adyenCheckout=>{const component=adyenCheckout.create(type,{styles,onSelect:component2=>{const id=component2._id;id.search("scheme")===-1&&ref.current&&(id.search("paypal")===-1?ref.current.onsubmit=()=>handleSubmit(ref.current,component2):ref.current.onsubmit=null,setPaymentRef({ref}))}}).mount("#adyen-dropin");component&&(setCheckout(component),setLoadAdyen(!0))})}),()=>{setPaymentRef({ref:{current:null}}),setLoadAdyen(!1)}},[clientKey,ref]),!clientKey&&!loadAdyen&&!checkout?null:_jsxs("form",{ref,onSubmit:e=>handleSubmit(e,checkout),children:[_jsx("div",{className:cardContainerClassName,id:"adyen-dropin"}),templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet}),_jsx("div",{className:threeDSecureContainerClassName,id:"adyen-action"})]})}export default AdyenPayment;
|
|
@@ -11,6 +11,7 @@ import { Dispatch, MutableRefObject } from 'react';
|
|
|
11
11
|
import { CheckoutComConfig } from '../components/CheckoutComPayment';
|
|
12
12
|
export declare type PaymentSourceType = AdyenPayment | BraintreePayment | CheckoutComPayment | ExternalPayment | PaypalPayment | StripePayment | WireTransfer;
|
|
13
13
|
declare type Card = {
|
|
14
|
+
type: string;
|
|
14
15
|
brand: string;
|
|
15
16
|
last4: string;
|
|
16
17
|
exp_year: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function getCardDetails({paymentType,customerPayment}){switch(paymentType){case"checkout_com_payments":{const source=customerPayment.payment_source?.payment_response?.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 source=customerPayment.payment_source?.options?.card;if(source)return{...source};break}case"adyen_payments":{const ps=customerPayment.payment_source,source=ps?.payment_request_data?.payment_method
|
|
1
|
+
export default function getCardDetails({paymentType,customerPayment}){switch(paymentType){case"checkout_com_payments":{const source=customerPayment.payment_source?.payment_response?.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 source=customerPayment.payment_source?.options?.card;if(source)return{...source};break}case"adyen_payments":{const ps=customerPayment.payment_source,source=ps?.payment_request_data?.payment_method,authorized=ps?.payment_response?.resultCode==="Authorised";if(source&&authorized){const brand=source.type==="scheme"?source.brand:source.type.replace("_account","");return{...source,brand}}break}default:{const source=customerPayment.payment_source?.metadata?.card;if(source)return{...source};break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****"}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercelayer/react-components",
|
|
3
|
-
"version": "3.15.0-beta.
|
|
3
|
+
"version": "3.15.0-beta.6",
|
|
4
4
|
"description": "The Official Commerce Layer React Components",
|
|
5
5
|
"module": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -49,28 +49,28 @@
|
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@ac-dev/countries-service": "^1.2.0",
|
|
51
51
|
"@ac-dev/states-service": "^1.1.0",
|
|
52
|
-
"@adyen/adyen-web": "^5.
|
|
52
|
+
"@adyen/adyen-web": "^5.21.0",
|
|
53
53
|
"@commercelayer/sdk": "^4.15.1",
|
|
54
|
-
"@stripe/react-stripe-js": "^1.
|
|
55
|
-
"@stripe/stripe-js": "^1.
|
|
54
|
+
"@stripe/react-stripe-js": "^1.10.0",
|
|
55
|
+
"@stripe/stripe-js": "^1.35.0",
|
|
56
56
|
"axios": "^0.27.2",
|
|
57
57
|
"braintree-web": "^3.85.5",
|
|
58
|
-
"frames-react": "^1.0.
|
|
58
|
+
"frames-react": "^1.0.12",
|
|
59
59
|
"jwt-decode": "^3.1.2",
|
|
60
60
|
"lodash": "^4.17.21",
|
|
61
61
|
"lodash-es": "^4.17.21",
|
|
62
62
|
"rapid-form": "^2.1.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@babel/core": "^7.18.
|
|
65
|
+
"@babel/core": "^7.18.10",
|
|
66
66
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
|
67
67
|
"@babel/plugin-syntax-flow": "^7.18.6",
|
|
68
|
-
"@babel/plugin-transform-react-jsx": "^7.18.
|
|
69
|
-
"@babel/preset-env": "^7.18.
|
|
68
|
+
"@babel/plugin-transform-react-jsx": "^7.18.10",
|
|
69
|
+
"@babel/preset-env": "^7.18.10",
|
|
70
70
|
"@babel/preset-react": "^7.18.6",
|
|
71
71
|
"@babel/preset-typescript": "^7.18.6",
|
|
72
72
|
"@commercelayer/js-auth": "^2.3.0",
|
|
73
|
-
"@playwright/test": "^1.24.
|
|
73
|
+
"@playwright/test": "^1.24.2",
|
|
74
74
|
"@semantic-release/changelog": "^6.0.1",
|
|
75
75
|
"@semantic-release/commit-analyzer": "^9.0.2",
|
|
76
76
|
"@semantic-release/git": "^10.0.1",
|
|
@@ -84,29 +84,29 @@
|
|
|
84
84
|
"@types/braintree-web": "^3.75.20",
|
|
85
85
|
"@types/jest": "^28.1.6",
|
|
86
86
|
"@types/lodash": "^4.14.182",
|
|
87
|
-
"@types/node": "^18.6.
|
|
87
|
+
"@types/node": "^18.6.5",
|
|
88
88
|
"@types/prop-types": "^15.7.5",
|
|
89
89
|
"@types/react": "^17.0.45",
|
|
90
90
|
"@types/react-test-renderer": "^17.0.2",
|
|
91
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
92
|
-
"@typescript-eslint/parser": "^5.
|
|
91
|
+
"@typescript-eslint/eslint-plugin": "^5.33.0",
|
|
92
|
+
"@typescript-eslint/parser": "^5.33.0",
|
|
93
93
|
"@zerollup/ts-transform-paths": "^1.7.18",
|
|
94
|
-
"autoprefixer": "^10.4.
|
|
94
|
+
"autoprefixer": "^10.4.8",
|
|
95
95
|
"babel-jest": "^28.1.3",
|
|
96
96
|
"babel-loader": "^8.2.5",
|
|
97
97
|
"babel-plugin-istanbul": "^6.1.1",
|
|
98
98
|
"dotenv": "^16.0.1",
|
|
99
|
-
"eslint": "^8.
|
|
99
|
+
"eslint": "^8.21.0",
|
|
100
100
|
"eslint-config-prettier": "^8.5.0",
|
|
101
101
|
"eslint-config-react-app": "^7.0.1",
|
|
102
102
|
"eslint-plugin-react": "^7.30.1",
|
|
103
103
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
104
104
|
"jest": "^28.1.3",
|
|
105
105
|
"minimize-js": "^1.3.0",
|
|
106
|
-
"next": "^12.2.
|
|
106
|
+
"next": "^12.2.4",
|
|
107
107
|
"nyc": "^15.1.0",
|
|
108
|
-
"playwright": "^1.24.
|
|
109
|
-
"postcss": "^8.4.
|
|
108
|
+
"playwright": "^1.24.2",
|
|
109
|
+
"postcss": "^8.4.16",
|
|
110
110
|
"postcss-loader": "^7.0.1",
|
|
111
111
|
"prettier": "^2.7.1",
|
|
112
112
|
"prop-types": "^15.8.1",
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
"react-dom": "^17.0.2",
|
|
115
115
|
"react-test-renderer": "^17.0.2",
|
|
116
116
|
"semantic-release": "^19.0.3",
|
|
117
|
-
"tailwindcss": "^3.1.
|
|
117
|
+
"tailwindcss": "^3.1.8",
|
|
118
118
|
"ts-jest": "^28.0.7",
|
|
119
119
|
"ts-loader": "^9.3.1",
|
|
120
120
|
"tsc-alias": "^1.7.0",
|