Show braintree 3ds error messages. Resolve #573.

commercelayer · Aug 23, 2024 · d2218c8 · d2218c8
1 parent d16a9a4
commit d2218c8
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 100 deletions.
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -180,13 +180,13 @@
   "dependencies": {
     "@adyen/adyen-web": "^5.66.1",
     "@commercelayer/organization-config": "^1.4.8",
-    "@commercelayer/sdk": "6.11.0",
-    "@stripe/react-stripe-js": "^2.7.3",
-    "@stripe/stripe-js": "^4.2.0",
+    "@commercelayer/sdk": "6.13.0",
+    "@stripe/react-stripe-js": "^2.8.0",
+    "@stripe/stripe-js": "^4.3.0",
     "@tanstack/react-table": "^8.17.3",
     "@types/iframe-resizer": "^3.5.13",
     "axios": "^1.7.3",
-    "braintree-web": "^3.105.0",
+    "braintree-web": "^3.106.0",
     "frames-react": "^1.1.2",
     "iframe-resizer": "^4.4.5",
     "jwt-decode": "^4.0.0",
@@ -196,19 +196,19 @@
   "devDependencies": {
     "@commercelayer/js-auth": "^6.3.1",
     "@faker-js/faker": "^8.4.0",
-    "@playwright/test": "^1.45.3",
+    "@playwright/test": "^1.46.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
     "@types/braintree-web": "^3.96.12",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^22.1.0",
+    "@types/node": "^22.5.0",
     "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.4",
     "@types/react-test-renderer": "^18.0.7",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.0.5",
-    "eslint": "~9.8.0",
+    "eslint": "~8.57.0",
     "jsdom": "^24.1.1",
     "minimize-js": "^1.4.0",
     "msw": "^2.3.5",
@@ -218,11 +218,11 @@
     "tsc-alias": "^1.8.8",
     "tslib": "^2.6.3",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite": "^5.4.2",
+    "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.0.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0"
   }
-}
+}
diff --git a/packages/react-components/src/components/payment_source/BraintreePayment.tsx b/packages/react-components/src/components/payment_source/BraintreePayment.tsx
@@ -168,30 +168,33 @@ export function BraintreePayment({
         const response = (await threeDSInstance.verifyCard(
           verifyCardOptions
         )) as any
-        if (
-          response.threeDSecureInfo.status === 'authenticate_successful' &&
-          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()
-                  }
+        const validStatus =
+          response?.liabilityShiftPossible === true &&
+          response?.liabilityShifted === true
+        console.log('validStatus', validStatus)
+        if (validStatus && paymentSource != null) {
+          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()
                 }
               }
-            }))
+            }
+          })
           return true
+        } else {
+          throw new Error(
+            `3D Secure authentication failed - ${response?.threeDSecureInfo?.status}`
+          )
         }
-        return false
       } catch (error: any) {
         console.error(error)
         setPaymentMethodErrors([