Merge pull request #464 from commercelayer/fix/payment-flow

fix: Adyen payments input flow.
commercelayer · Jan 4, 2024 · 53430b9 · 53430b9
2 parents e584dba + bd7d9a3
commit 53430b9
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 156 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "npmClient": "pnpm",
-  "version": "4.8.4",
+  "version": "4.8.5-beta.0",
   "command": {
     "version": {
       "preid": "beta"

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.8.4",
+  "version": "4.8.5-beta.0",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -178,7 +178,7 @@
   },
   "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme",
   "dependencies": {
-    "@adyen/adyen-web": "^5.51.0",
+    "@adyen/adyen-web": "^5.55.1",
     "@commercelayer/sdk": "^5.14.0",
     "@stripe/react-stripe-js": "^2.3.0",
     "@stripe/stripe-js": "^2.1.6",

diff --git a/packages/react-components/src/components/orders/PlaceOrderButton.tsx b/packages/react-components/src/components/orders/PlaceOrderButton.tsx
@@ -221,7 +221,6 @@ export function PlaceOrderButton(props: Props): JSX.Element {
       setButtonRef(ref)
     }
   }, [ref])
-
   const handleClick = async (
     e?: MouseEvent<HTMLButtonElement>
   ): Promise<void> => {

diff --git a/packages/react-components/src/components/orders/PlaceOrderContainer.tsx b/packages/react-components/src/components/orders/PlaceOrderContainer.tsx
@@ -96,9 +96,13 @@ export function PlaceOrderContainer(props: Props): JSX.Element {
   const contextValue = {
     ...state,
     setPlaceOrder: async ({
-      paymentSource
+      paymentSource,
+      currentCustomerPaymentSourceId
     }: {
       paymentSource?: Parameters<typeof setPlaceOrder>['0']['paymentSource']
+      currentCustomerPaymentSourceId?: Parameters<
+        typeof setPlaceOrder
+      >['0']['currentCustomerPaymentSourceId']
     }) =>
       await setPlaceOrder({
         config,
@@ -107,7 +111,8 @@ export function PlaceOrderContainer(props: Props): JSX.Element {
         setOrderErrors,
         paymentSource,
         include,
-        setOrder
+        setOrder,
+        currentCustomerPaymentSourceId
       }),
     placeOrderPermitted: () => {
       placeOrderPermitted({

diff --git a/packages/react-components/src/components/payment_source/AdyenPayment.tsx b/packages/react-components/src/components/payment_source/AdyenPayment.tsx
@@ -16,16 +16,6 @@ import OrderContext from '#context/OrderContext'
 import omit from '#utils/omit'
 import type UIElement from '@adyen/adyen-web/dist/types/components/UIElement'
 
-const threeDSConfiguration = {
-  challengeWindowSize: '05'
-  // Set to any of the following:
-  // '02': ['390px', '400px'] -  The default window size
-  // '01': ['250px', '400px']
-  // '03': ['500px', '600px']
-  // '04': ['600px', '400px']
-  // '05': ['100%', '100%']
-}
-
 type Styles = Partial<{
   base: CSSProperties
   error: CSSProperties
@@ -303,7 +293,7 @@ export function AdyenPayment({
         }
         return true
       }
-      if (['Cancelled'].includes(resultCode)) {
+      if (['Cancelled', 'Refused'].includes(resultCode)) {
         // @ts-expect-error no type
         const message = res?.payment_response?.refusalReason
         setPaymentMethodErrors([
@@ -314,6 +304,9 @@ export function AdyenPayment({
             message
           }
         ])
+        if (component) {
+          component.mount('#adyen-dropin')
+        }
       }
       // @ts-expect-error no type
       const errorType = res?.payment_response?.errorType
@@ -348,6 +341,7 @@ export function AdyenPayment({
       return false
     }
   }
+
   useEffect(() => {
     // @ts-expect-error no type
     const paymentMethodsResponse = paymentSource?.payment_methods
@@ -378,7 +372,6 @@ export function AdyenPayment({
       },
       showPayButton: false,
       paymentMethodsConfiguration: {
-        threeDS2: threeDSConfiguration,
         paypal: {
           showPayButton: true,
           style: styles?.paypal
@@ -433,7 +426,7 @@ export function AdyenPayment({
       setPaymentRef({ ref: { current: null } })
       setLoadAdyen(false)
     }
-  }, [clientKey, ref])
+  }, [clientKey, ref != null])
   return !clientKey && !loadAdyen && !checkout ? null : (
     <form
       ref={ref}

diff --git a/packages/react-components/src/reducers/PlaceOrderReducer.ts b/packages/react-components/src/reducers/PlaceOrderReducer.ts
@@ -245,7 +245,6 @@ export async function setPlaceOrder({
         }) ||
         order?.subscription_created_at != null ||
         false
-
       if (
         hasSubscriptions &&
         config?.accessToken != null &&
-Original file line number
+Diff line change
@@ Expand Up / @@ -245,7 +245,6 @@ export async function setPlaceOrder({ @@
             }) ||
             order?.subscription_created_at != null ||
             false
           if (
             hasSubscriptions &&
             config?.accessToken != null &&
@@ Expand Down @@