fix: always save the pm method for zero-auth payments

Adyen · Feb 22, 2024 · 7080768 · 7080768
1 parent e491b5a
commit 7080768
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/.changeset/curly-kangaroos-hide.md b/.changeset/curly-kangaroos-hide.md
@@ -0,0 +1,5 @@
+---
+"@adyen/adyen-web": patch
+---
+
+For zero auth payments, we always send the `storePaymentMethod` to save the payment details.
diff --git a/packages/lib/src/components/Card/Card.test.tsx b/packages/lib/src/components/Card/Card.test.tsx
@@ -76,6 +76,37 @@ describe('Card', () => {
             card.setState({ storePaymentMethod: true });
             expect(card.data.storePaymentMethod).not.toBeDefined();
         });
+
+        test('should always return storePaymentMethod for regular card, zero auth payments', () => {
+            expect(new CardElement({ amount: { value: 0 }, enableStoreDetails: true }).data.storePaymentMethod).toBe(true);
+            expect(new CardElement({ amount: { value: 0 }, enableStoreDetails: false }).data.storePaymentMethod).toBe(true);
+        });
+
+        test('should return storePaymentMethod based on the checkbox value, for regular card, non-zero auth payments', () => {
+            const card = new CardElement({ amount: { value: 10 }, enableStoreDetails: true });
+            card.setState({ storePaymentMethod: true });
+            expect(card.data.storePaymentMethod).toBe(true);
+            card.setState({ storePaymentMethod: false });
+            expect(card.data.storePaymentMethod).toBe(false);
+        });
+
+        test('should not return storePaymentMethod for stored card, non-zero auth payments', () => {
+            expect(
+                new CardElement({ amount: { value: 10 }, storedPaymentMethodId: 'xxx', enableStoreDetails: true }).data.storePaymentMethod
+            ).not.toBeDefined();
+            expect(
+                new CardElement({ amount: { value: 10 }, storedPaymentMethodId: 'xxx', enableStoreDetails: false }).data.storePaymentMethod
+            ).not.toBeDefined();
+        });
+
+        test('should not return storePaymentMethod for stored card, zero auth payments', () => {
+            expect(
+                new CardElement({ amount: { value: 0 }, storedPaymentMethodId: 'xxx', enableStoreDetails: true }).data.storePaymentMethod
+            ).not.toBeDefined();
+            expect(
+                new CardElement({ amount: { value: 0 }, storedPaymentMethodId: 'xxx', enableStoreDetails: false }).data.storePaymentMethod
+            ).not.toBeDefined();
+        });
     });
 
     describe('isValid', () => {

diff --git a/packages/lib/src/components/Card/Card.tsx b/packages/lib/src/components/Card/Card.tsx
@@ -105,7 +105,6 @@ export class CardElement extends UIElement<CardElementProps> {
          *  the shopper makes a brand selection
          */
         const cardBrand = this.state.selectedBrandValue || this.props.brand;
-        const includeStorePaymentMethod = this.props.enableStoreDetails && typeof this.state.storePaymentMethod !== 'undefined';
 
         return {
             paymentMethod: {
@@ -117,7 +116,7 @@ export class CardElement extends UIElement<CardElementProps> {
             },
             ...(this.state.billingAddress && { billingAddress: this.state.billingAddress }),
             ...(this.state.socialSecurityNumber && { socialSecurityNumber: this.state.socialSecurityNumber }),
-            ...(includeStorePaymentMethod && { storePaymentMethod: Boolean(this.state.storePaymentMethod) }),
+            ...this.storePaymentMethodPayload,
             ...(hasValidInstallmentsObject(this.state.installments) && { installments: this.state.installments }),
             browserInfo: this.browserInfo,
             origin: !!window && window.location.origin
@@ -164,6 +163,21 @@ export class CardElement extends UIElement<CardElementProps> {
 
     public onBinValue = triggerBinLookUp(this);
 
+    get storePaymentMethodPayload() {
+        const isStoredCard = this.props.storedPaymentMethodId?.length > 0;
+        if (isStoredCard) {
+            return {};
+        }
+        // For regular card, zero auth payments, we always store the payment method.
+        const isZeroAuth = this.props.amount?.value === 0;
+        if (isZeroAuth) {
+            return { storePaymentMethod: true };
+        }
+        // For regular card, non-zero auth payments, we store the payment method based on the checkbox value.
+        const includeStorePaymentMethod = this.props.enableStoreDetails && typeof this.state.storePaymentMethod !== 'undefined';
+        return includeStorePaymentMethod ? { storePaymentMethod: Boolean(this.state.storePaymentMethod) } : {};
+    }
+
     get isValid() {
         return !!this.state.isValid;
     }