Change the pay button and status text for zero auth transactions (#2514)

* feat(card&drop-in): change button and success state for zero-auth transactions * refactor: added translations for details saved result (applicable for zero auth, non stored card) * refactor: change result text for zero auth transactions * chore: add changeset * test: added tests
Adyen · Jan 15, 2024 · 0e254c3 · 0e254c3
1 parent 211c55f
commit 0e254c3
Show file tree

Hide file tree

Showing 30 changed files with 118 additions and 3 deletions.
diff --git a/.changeset/mean-sheep-matter.md b/.changeset/mean-sheep-matter.md
@@ -0,0 +1,6 @@
+---
+"@adyen/adyen-web": patch
+---
+
+For the regular card payment, in case of a zero-auth transaction, the pay button label is changed to `Save details`, and the `Save for my next payment` checkbox is removed.
+The drop-in component shows `Details saved` as the success message for such transaction.
diff --git a/...ages/lib/src/components/Card/Card.test.ts → ...ges/lib/src/components/Card/Card.test.tsx b/...ages/lib/src/components/Card/Card.test.ts → ...ges/lib/src/components/Card/Card.test.tsx
@@ -1,4 +1,9 @@
+import { h } from 'preact';
 import { CardElement } from './Card';
+import { render, screen } from '@testing-library/preact';
+import CoreProvider from '../../core/Context/CoreProvider';
+import Language from '../../language';
+import { Resources } from '../../core/Context/Resources';
 
 describe('Card', () => {
     describe('formatProps', function () {
@@ -11,6 +16,40 @@ describe('Card', () => {
             const card = new CardElement({ countryCode: 'KR' });
             expect(card.props.countryCode).toEqual('kr');
         });
+
+        test('should return false for enableStoreDetails in case of zero-auto transaction', () => {
+            const card = new CardElement({ amount: { value: 0 }, enableStoreDetails: true });
+            expect(card.props.enableStoreDetails).toEqual(false);
+        });
+    });
+
+    describe('payButton', () => {
+        describe('Zero auth transaction', () => {
+            const i18n = new Language();
+            const props = { amount: { value: 0 }, enableStoreDetails: true, i18n };
+            const customRender = (ui: h.JSX.Element) => {
+                return render(
+                    // @ts-ignore ignore
+                    <CoreProvider i18n={i18n} loadingContext="test" resources={new Resources()}>
+                        {ui}
+                    </CoreProvider>
+                );
+            };
+
+            test('should show the label "Save details" for the regular card', async () => {
+                const card = new CardElement(props);
+                // @ts-ignore ignore
+                customRender(card.payButton());
+                expect(await screen.findByRole('button', { name: 'Save details' })).toBeTruthy();
+            });
+
+            test('should show the label "Confirm preauthorization" for the stored card', async () => {
+                const card = new CardElement({ ...props, storedPaymentMethodId: 'test' });
+                // @ts-ignore ignore
+                customRender(card.payButton());
+                expect(await screen.findByRole('button', { name: 'Confirm preauthorization' })).toBeTruthy();
+            });
+        });
     });
 
     describe('get data', () => {

diff --git a/packages/lib/src/components/Card/Card.tsx b/packages/lib/src/components/Card/Card.tsx
@@ -11,8 +11,9 @@ import { hasValidInstallmentsObject } from './components/CardInput/utils';
 import createClickToPayService from '../internal/ClickToPay/services/create-clicktopay-service';
 import { ClickToPayCheckoutPayload, IClickToPayService } from '../internal/ClickToPay/services/types';
 import ClickToPayWrapper from './components/ClickToPayWrapper';
-import { UIElementStatus } from '../types';
+import { PayButtonFunctionProps, UIElementStatus } from '../types';
 import SRPanelProvider from '../../core/Errors/SRPanelProvider';
+import PayButton from '../internal/PayButton';
 
 export class CardElement extends UIElement<CardElementProps> {
     public static type = 'scheme';
@@ -55,6 +56,9 @@ export class CardElement extends UIElement<CardElementProps> {
     };
 
     formatProps(props: CardElementProps) {
+        const isZeroAuth = props.amount?.value === 0;
+        const enableStoreDetails = isZeroAuth ? false : props.session?.configuration?.enableStoreDetails || props.enableStoreDetails;
+
         return {
             ...props,
             // Mismatch between hasHolderName & holderNameRequired which can mean card can never be valid
@@ -76,7 +80,7 @@ export class CardElement extends UIElement<CardElementProps> {
             icon: props.icon || props.configuration?.icon,
             // installmentOptions of a session should be used before falling back to the merchant configuration
             installmentOptions: props.session?.configuration?.installmentOptions || props.installmentOptions,
-            enableStoreDetails: props.session?.configuration?.enableStoreDetails || props.enableStoreDetails,
+            enableStoreDetails,
             /**
              * Click to Pay configuration
              * - If email is set explicitly in the configuration, then it can override the one used in the session creation
@@ -205,6 +209,20 @@ export class CardElement extends UIElement<CardElementProps> {
     get browserInfo() {
         return collectBrowserInfo();
     }
+    // Override
+    protected payButton = (props: PayButtonFunctionProps) => {
+        const isZeroAuth = this.props.amount?.value === 0;
+        const isStoredCard = this.props.storedPaymentMethodId?.length > 0;
+        return (
+            <PayButton
+                {...props}
+                amount={this.props.amount}
+                secondaryAmount={this.props.secondaryAmount}
+                label={isZeroAuth && !isStoredCard ? this.props.i18n.get('payButton.saveDetails') : ''}
+                onClick={this.submit}
+            />
+        );
+    };
 
     private renderCardInput(isCardPrimaryInput = true): h.JSX.Element {
         return (

diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.tsx b/packages/lib/src/components/Dropin/components/DropinComponent.tsx
@@ -121,7 +121,7 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
 
         switch (status.type) {
             case 'success':
-                return <Status.Success message={status.props?.message} />;
+                return <Status.Success message={props?.amount?.value === 0 ? 'resultMessages.preauthorized' : status.props?.message} />;
 
             case 'error':
                 return <Status.Error message={status.props?.message} />;

diff --git a/packages/lib/src/language/locales/ar.json b/packages/lib/src/language/locales/ar.json
@@ -2,6 +2,7 @@
     "payButton": "دفع",
     "payButton.redirecting": "جارِ إعادة التوجيه...",
     "payButton.with": "ادفع %{value} باستخدام %{maskedData}",
+    "payButton.saveDetails": "حفظ التفاصيل",
     "close": "إغلاق",
     "storeDetails": "حفظ لمدفوعاتي القادمة",
     "readMore": "اقرأ المزيد",
@@ -119,6 +120,7 @@
     "donateButton": "التبرع",
     "notNowButton": "ليس الآن",
     "thanksForYourSupport": "شكرًا على دعمك!",
+    "resultMessages.preauthorized": "تم حفظ التفاصيل",
     "preauthorizeWith": "تفويض مسبق باستخدام",
     "confirmPreauthorization": "تأكيد التفويض المسبق",
     "confirmPurchase": "تأكيد الشراء",

diff --git a/packages/lib/src/language/locales/cs-CZ.json b/packages/lib/src/language/locales/cs-CZ.json
@@ -2,6 +2,7 @@
     "payButton": "Zaplatit",
     "payButton.redirecting": "Přesměrování...",
     "payButton.with": "Zaplatit %{value} pomocí %{maskedData}",
+    "payButton.saveDetails": "Uložit podrobnosti",
     "close": "Zavřít",
     "storeDetails": "Uložit pro příští platby",
     "readMore": "Přečtěte si více",
@@ -119,6 +120,7 @@
     "donateButton": "Přispět",
     "notNowButton": "Teď ne",
     "thanksForYourSupport": "Děkujeme vám za podporu!",
+    "resultMessages.preauthorized": "Uložené podrobnosti",
     "preauthorizeWith": "Předautorizovat pomocí",
     "confirmPreauthorization": "Potvrdit předautorizaci",
     "confirmPurchase": "Potvrdit nákup",

diff --git a/packages/lib/src/language/locales/da-DK.json b/packages/lib/src/language/locales/da-DK.json
@@ -2,6 +2,7 @@
     "payButton": "Betal",
     "payButton.redirecting": "Omdirigerer...",
     "payButton.with": "Betal %{value} med %{maskedData}",
+    "payButton.saveDetails": "Gem oplysninger",
     "close": "Luk",
     "storeDetails": "Gem til min næste betaling",
     "readMore": "Læs mere",
@@ -120,6 +121,7 @@
     "donateButton": "Giv et bidrag",
     "notNowButton": "Ikke nu",
     "thanksForYourSupport": "Tak for din støtte!",
+    "resultMessages.preauthorized": "Oplysningerne er gemt",
     "preauthorizeWith": "Forhåndsgodkend med",
     "confirmPreauthorization": "Bekræft forhåndsgodkendelse",
     "confirmPurchase": "Bekræft køb",

diff --git a/packages/lib/src/language/locales/de-DE.json b/packages/lib/src/language/locales/de-DE.json
@@ -2,6 +2,7 @@
     "payButton": "Zahle",
     "payButton.redirecting": "Umleiten…",
     "payButton.with": "%{value} mit %{maskedData} zahlen",
+    "payButton.saveDetails": "Angaben speichern",
     "close": "Schließen",
     "storeDetails": "Für zukünftige Zahlvorgänge speichern",
     "readMore": "Mehr lesen",
@@ -119,6 +120,7 @@
     "donateButton": "Spenden",
     "notNowButton": "Nicht jetzt",
     "thanksForYourSupport": "Danke für Ihre Unterstützung!",
+    "resultMessages.preauthorized": "Angaben gespeichert",
     "preauthorizeWith": "Vorautorisieren mit",
     "confirmPreauthorization": "Vorautorisierung bestätigen",
     "confirmPurchase": "Kauf bestätigen",

diff --git a/packages/lib/src/language/locales/el-GR.json b/packages/lib/src/language/locales/el-GR.json
@@ -2,6 +2,7 @@
     "payButton": "Πληρωμή",
     "payButton.redirecting": "Ανακατεύθυνση...",
     "payButton.with": "Πληρωμή %{value} με %{maskedData}",
+    "payButton.saveDetails": "Αποθήκευση στοιχείων",
     "close": "Κλείσιμο",
     "storeDetails": "Αποθήκευση για την επόμενη πληρωμή μου",
     "readMore": "Ανάγνωση περισσότερων",
@@ -119,6 +120,7 @@
     "donateButton": "Δωρεά",
     "notNowButton": "Όχι τώρα",
     "thanksForYourSupport": "Σας ευχαριστούμε για την υποστήριξη!",
+    "resultMessages.preauthorized": "Τα στοιχεία αποθηκεύτηκαν",
     "preauthorizeWith": "Προεξουσιοδότηση με",
     "confirmPreauthorization": "Επιβεβαίωση προεξουσιοδότησης",
     "confirmPurchase": "Επιβεβαίωση αγοράς",

diff --git a/packages/lib/src/language/locales/en-US.json b/packages/lib/src/language/locales/en-US.json
@@ -2,6 +2,7 @@
     "payButton": "Pay",
     "payButton.redirecting": "Redirecting...",
     "payButton.with": "Pay %{value} with %{maskedData}",
+    "payButton.saveDetails": "Save details",
     "close": "Close",
     "storeDetails": "Save for my next payment",
     "readMore": "Read more",
@@ -120,6 +121,7 @@
     "donateButton": "Donate",
     "notNowButton": "Not now",
     "thanksForYourSupport": "Thanks for your support!",
+    "resultMessages.preauthorized": "Details saved",
     "preauthorizeWith": "Preauthorize with",
     "confirmPreauthorization": "Confirm preauthorization",
     "confirmPurchase": "Confirm purchase",

diff --git a/packages/lib/src/language/locales/es-ES.json b/packages/lib/src/language/locales/es-ES.json
@@ -2,6 +2,7 @@
     "payButton": "Pagar",
     "payButton.redirecting": "Redirigiendo...",
     "payButton.with": "Pague %{value} con %{maskedData}",
+    "payButton.saveDetails": "Guardar los detalles",
     "close": "Cerrar",
     "storeDetails": "Recordar para mi próximo pago",
     "readMore": "Leer más",
@@ -117,6 +118,7 @@
     "donateButton": "Donar",
     "notNowButton": "Ahora no",
     "thanksForYourSupport": "¡Gracias por su contribución!",
+    "resultMessages.preauthorized": "Se han guardado los detalles",
     "preauthorizeWith": "Preautorizar con",
     "confirmPreauthorization": "Confirmar preautorización",
     "confirmPurchase": "Confirmar compra",

diff --git a/packages/lib/src/language/locales/fi-FI.json b/packages/lib/src/language/locales/fi-FI.json
@@ -2,6 +2,7 @@
     "payButton": "Maksa",
     "payButton.redirecting": "Uudelleenohjataan...",
     "payButton.with": "Maksa %{value} käyttäen maksutapaa %{maskedData}",
+    "payButton.saveDetails": "Tallenna tiedot",
     "close": "Sulje",
     "storeDetails": "Tallenna seuraavaa maksuani varten",
     "readMore": "Lue lisää",
@@ -119,6 +120,7 @@
     "donateButton": "Lahjoita",
     "notNowButton": "Ei nyt",
     "thanksForYourSupport": "Kiitos tuestasi!",
+    "resultMessages.preauthorized": "Tiedot tallennettu",
     "preauthorizeWith": "Ennkkolupa käyttäjän kanssa",
     "confirmPreauthorization": "Vahvista ennakkolupa",
     "confirmPurchase": "Vahvista hankinta",

diff --git a/packages/lib/src/language/locales/fr-FR.json b/packages/lib/src/language/locales/fr-FR.json
@@ -2,6 +2,7 @@
     "payButton": "Payer",
     "payButton.redirecting": "Redirection...",
     "payButton.with": "Payer %{value} avec %{maskedData}",
+    "payButton.saveDetails": "Enregistrer les détails",
     "close": "Fermer",
     "storeDetails": "Sauvegarder pour mon prochain paiement",
     "readMore": "Lire la suite",
@@ -119,6 +120,7 @@
     "donateButton": "Faire un don",
     "notNowButton": "Pas maintenant",
     "thanksForYourSupport": "Merci de votre soutien !",
+    "resultMessages.preauthorized": "Détails enregistrés",
     "preauthorizeWith": "Pré-autoriser avec",
     "confirmPreauthorization": "Confirmer la pré-autorisation",
     "confirmPurchase": "Confirmer l'achat",

diff --git a/packages/lib/src/language/locales/hr-HR.json b/packages/lib/src/language/locales/hr-HR.json
@@ -2,6 +2,7 @@
     "payButton": "Platiti",
     "payButton.redirecting": "Preusmjeravanje...",
     "payButton.with": "Platite iznos od %{value} uporabom stavke %{maskedData}",
+    "payButton.saveDetails": "Spremi pojedinosti",
     "close": "Zatvori",
     "storeDetails": "Pohrani za moje sljedeće plaćanje",
     "readMore": "Opširnije",
@@ -119,6 +120,7 @@
     "donateButton": "Doniraj",
     "notNowButton": "Ne sada",
     "thanksForYourSupport": "Hvala na podršci!",
+    "resultMessages.preauthorized": "Spremljeni podatci",
     "preauthorizeWith": "Prethodno odobri s",
     "confirmPreauthorization": "Potvrdite prethodno odobrenje",
     "confirmPurchase": "Potvrdite kupnju",

diff --git a/packages/lib/src/language/locales/hu-HU.json b/packages/lib/src/language/locales/hu-HU.json
@@ -2,6 +2,7 @@
     "payButton": "Fizetés",
     "payButton.redirecting": "Átirányítás...",
     "payButton.with": "%{value} fizetése a következővel: %{maskedData}",
+    "payButton.saveDetails": "Részletek mentése",
     "close": "Bezárás",
     "storeDetails": "Mentés a következő fizetéshez",
     "readMore": "Bővebben",
@@ -119,6 +120,7 @@
     "donateButton": "Adományozás",
     "notNowButton": "Most nem",
     "thanksForYourSupport": "Köszönjük a támogatását!",
+    "resultMessages.preauthorized": "Részletek mentve",
     "preauthorizeWith": "Előzetes meghatalmazás a következővel:",
     "confirmPreauthorization": "Előzetes meghatalmazás jóváhagyása",
     "confirmPurchase": "Fizetés jóváhagyása",

diff --git a/packages/lib/src/language/locales/it-IT.json b/packages/lib/src/language/locales/it-IT.json
@@ -2,6 +2,7 @@
     "payButton": "Paga",
     "payButton.redirecting": "Reindirizzamento...",
     "payButton.with": "Paga %{value} con %{maskedData}",
+    "payButton.saveDetails": "Salva dettagli",
     "close": "Chiudi",
     "storeDetails": "Salva per il prossimo pagamento",
     "readMore": "Leggi di più",
@@ -117,6 +118,7 @@
     "donateButton": "Dona",
     "notNowButton": "Non ora",
     "thanksForYourSupport": "Grazie per il tuo sostegno!",
+    "resultMessages.preauthorized": "Dettagli salvati",
     "preauthorizeWith": "Preautorizza con",
     "confirmPreauthorization": "Conferma preautorizzazione",
     "confirmPurchase": "Conferma acquisto",

diff --git a/packages/lib/src/language/locales/ja-JP.json b/packages/lib/src/language/locales/ja-JP.json
@@ -2,6 +2,7 @@
     "payButton": "支払う",
     "payButton.redirecting": "リダイレクトしています...",
     "payButton.with": "%{value}を%{maskedData}で支払う",
+    "payButton.saveDetails": "詳細を保存",
     "close": "終了",
     "storeDetails": "次回のお支払いのため詳細を保存",
     "readMore": "詳細を確認",
@@ -119,6 +120,7 @@
     "donateButton": "寄付する",
     "notNowButton": "今はしない",
     "thanksForYourSupport": "ご支援いただきありがとうございます。",
+    "resultMessages.preauthorized": "詳細が保存されました",
     "preauthorizeWith": "次で事前認証する：",
     "confirmPreauthorization": "事前承認を確認する",
     "confirmPurchase": "購入を確認する",

diff --git a/packages/lib/src/language/locales/ko-KR.json b/packages/lib/src/language/locales/ko-KR.json
@@ -2,6 +2,7 @@
     "payButton": "결제",
     "payButton.redirecting": "리디렉션 중...",
     "payButton.with": "%{maskedData}(으)로 %{value} 결제",
+    "payButton.saveDetails": "세부 정보 저장",
     "close": "닫기",
     "storeDetails": "다음 결제를 위해 이 수단 저장",
     "readMore": "자세히 보기",
@@ -119,6 +120,7 @@
     "donateButton": "기부하기",
     "notNowButton": "다음에 하기",
     "thanksForYourSupport": "도와주셔서 감사합니다!",
+    "resultMessages.preauthorized": "세부 정보 저장됨",
     "preauthorizeWith": "사전 승인 방법:",
     "confirmPreauthorization": "사전 승인 확인",
     "confirmPurchase": "구매 확인",

diff --git a/packages/lib/src/language/locales/nl-NL.json b/packages/lib/src/language/locales/nl-NL.json
@@ -2,6 +2,7 @@
     "payButton": "Betaal",
     "payButton.redirecting": "U wordt doorverwezen...",
     "payButton.with": "Betaal %{value} met %{maskedData}",
+    "payButton.saveDetails": "Gegevens opslaan",
     "close": "Sluiten",
     "storeDetails": "Bewaar voor mijn volgende betaling",
     "readMore": "Verder lezen",
@@ -119,6 +120,7 @@
     "donateButton": "Doneren",
     "notNowButton": "Niet nu",
     "thanksForYourSupport": "Bedankt voor uw donatie!",
+    "resultMessages.preauthorized": "Gegevens opgeslagen",
     "preauthorizeWith": "Preautorisatie uitvoeren met",
     "confirmPreauthorization": "Preautorisatie bevestigen",
     "confirmPurchase": "Aankoop bevestigen",

diff --git a/packages/lib/src/language/locales/no-NO.json b/packages/lib/src/language/locales/no-NO.json
@@ -2,6 +2,7 @@
     "payButton": "Betal",
     "payButton.redirecting": "Omdirigerer...",
     "payButton.with": "Betal %{value} med %{maskedData}",
+    "payButton.saveDetails": "Lagre detaljer",
     "close": "Lukk",
     "storeDetails": "Lagre til min neste betaling",
     "readMore": "Les mer",
@@ -119,6 +120,7 @@
     "donateButton": "Donér",
     "notNowButton": "Ikke nå",
     "thanksForYourSupport": "Takk for din støtte!",
+    "resultMessages.preauthorized": "Detaljer lagret",
     "preauthorizeWith": "Forhåndsgodkjenn med",
     "confirmPreauthorization": "Bekreft forhåndsgodkjenning",
     "confirmPurchase": "Bekreft kjøp",

diff --git a/packages/lib/src/language/locales/pl-PL.json b/packages/lib/src/language/locales/pl-PL.json
@@ -2,6 +2,7 @@
     "payButton": "Zapłać",
     "payButton.redirecting": "Przekierowywanie...",
     "payButton.with": "Zapłać %{value} za pomocą %{maskedData}",
+    "payButton.saveDetails": "Zapisz dane",
     "close": "Zamknij",
     "storeDetails": "Zapisz na potrzeby następnej płatności",
     "readMore": "Czytaj więcej",
@@ -119,6 +120,7 @@
     "donateButton": "Przekaż darowiznę",
     "notNowButton": "Nie teraz",
     "thanksForYourSupport": "Dziękujemy za wsparcie!",
+    "resultMessages.preauthorized": "Zapisano dane",
     "preauthorizeWith": "Autoryzuj wstępnie za pomocą:",
     "confirmPreauthorization": "Potwierdź autoryzację wstępną",
     "confirmPurchase": "Potwierdź zakup",