Feat: PayMe wallet (#2476)

* refactor: scaffold the PayMe wallet * feat(payme): add the PayMe wallet * refactor(payme): add the logic for the countdownTime * refactor(payme): remove comments * refactor: add translations * test: add some tests * refactor: added tests * refactor: unit test * chore: add changeset
2026-03-10 08:01:22 +00:00 · 2024-01-09 11:09:27 +01:00
parent d358019078
commit 8ea9ded8ac
37 changed files with 323 additions and 61 deletions
--- a/.changeset/happy-crews-arrive.md
+++ b/.changeset/happy-crews-arrive.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Add support for the PayMe payment method.
--- a/packages/lib/src/components/PayMe/Instructions.scss
+++ b/packages/lib/src/components/PayMe/Instructions.scss
@@ -0,0 +1,15 @@
+@import '../../style/index';
+
+.adyen-checkout-payme-instructions {
+    font-size: $font-size-small;
+    text-align: center;
+    color: #5c687c;
+    line-height: 20px;
+
+    &__steps {
+        list-style-position: inside;
+        padding-inline-start: 0;
+        margin: 16px 0;
+        padding-bottom: 8px;
+    }
+}
--- a/packages/lib/src/components/PayMe/Instructions.test.tsx
+++ b/packages/lib/src/components/PayMe/Instructions.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/preact';
+import { h } from 'preact';
+import Language from '../../language';
+import { Resources } from '../../core/Context/Resources';
+import CoreProvider from '../../core/Context/CoreProvider';
+import Instructions from './Instructions';
+
+describe('Instructions', () => {
+    const customRender = (ui: h.JSX.Element) => {
+        return render(
+            // @ts-ignore ignore
+            <CoreProvider i18n={new Language()} loadingContext="test" resources={new Resources()}>
+                {ui}
+            </CoreProvider>
+        );
+    };
+
+    test('should see a list of instructions and footnote', async () => {
+        customRender(<Instructions />);
+        expect(await screen.findByText('Open the PayMe app', { exact: false })).toBeInTheDocument();
+        expect(await screen.findByText('Scan the QR code', { exact: false })).toBeInTheDocument();
+        expect(await screen.findByText('Complete the payment in the app', { exact: false })).toBeInTheDocument();
+        expect(await screen.findByText('Please do not close this page before the payment is completed', { exact: false })).toBeInTheDocument();
+    });
+});
--- a/packages/lib/src/components/PayMe/Instructions.tsx
+++ b/packages/lib/src/components/PayMe/Instructions.tsx
@@ -0,0 +1,20 @@
+import useCoreContext from '../../core/Context/useCoreContext';
+import { h } from 'preact';
+import './Instructions.scss';
+
+export default function Instructions() {
+    const { i18n } = useCoreContext();
+    const steps = i18n.get('payme.instructions.steps');
+    const footnote = i18n.get('payme.instructions.footnote');
+
+    return (
+        <div className="adyen-checkout-payme-instructions">
+            <ol className="adyen-checkout-payme-instructions__steps">
+                {steps.split('%@').map((step, index) => (
+                    <li key={`instruction-${index}`}>{step}</li>
+                ))}
+            </ol>
+            <span>{footnote}</span>
+        </div>
+    );
+}
--- a/packages/lib/src/components/PayMe/PayMe.ts
+++ b/packages/lib/src/components/PayMe/PayMe.ts
@@ -0,0 +1,23 @@
+import QRLoaderContainer from '../helpers/QRLoaderContainer';
+import Instructions from './Instructions';
+
+class PayMeElement extends QRLoaderContainer {
+    public static type = 'payme';
+    private static defaultCountdown = 10; // min
+    private static defaultDelay = 2000; // ms
+
+    formatProps(props) {
+        return {
+            delay: PayMeElement.defaultDelay,
+            countdownTime: PayMeElement.defaultCountdown,
+            redirectIntroduction: 'payme.openPayMeApp',
+            introduction: 'payme.scanQrCode',
+            timeToPay: 'payme.timeToPay',
+            buttonLabel: 'payme.redirectButtonLabel',
+            instructions: Instructions,
+            ...super.formatProps(props)
+        };
+    }
+}
+
+export default PayMeElement;
--- a/packages/lib/src/components/PayMe/index.ts
+++ b/packages/lib/src/components/PayMe/index.ts
@@ -0,0 +1 @@
+export { default } from './PayMe';
--- a/packages/lib/src/components/helpers/QRLoaderContainer.tsx
+++ b/packages/lib/src/components/helpers/QRLoaderContainer.tsx
@@ -23,7 +23,9 @@ export interface QRLoaderContainerProps extends UIElementProps {
    qrCodeImage?: string;
    paymentData?: string;
    introduction: string;
-    instructions?: string;
+    redirectIntroduction?: string;
+    timeToPay?: string;
+    instructions?: string | (() => h.JSX.Element);
    copyBtn?: boolean;
 }

--- a/packages/lib/src/components/index.ts
+++ b/packages/lib/src/components/index.ts
@@ -62,6 +62,7 @@ import PromptPay from './PromptPay';
 import Duitnow from './DuitNow';
 import ANCV from './ANCV';
 import Trustly from './Trustly';
+import PayMe from './PayMe';

 /**
 * Maps each component with a Component element.
@@ -210,6 +211,7 @@ const componentsMap = {
    promptpay: PromptPay,
    paynow: PayNow,
    duitnow: Duitnow,
+    payme: PayMe,
    /** QRLoader */

    /** Await */
--- a/packages/lib/src/components/internal/Countdown/CountdownA11yReporter.ts
+++ b/packages/lib/src/components/internal/Countdown/CountdownA11yReporter.ts
@@ -22,6 +22,7 @@ export class CountdownA11yReporter {

    constructor(props: ICountdownA11yService) {
        const { srPanel, i18n } = props;
+
        this.srPanel = srPanel;
        this.i18n = i18n;
        // Force the srPanel to update ariaRelevant
--- a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx
+++ b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx
@@ -43,7 +43,9 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
        throttleTime: 60000,
        classNameModifiers: [],
        throttledInterval: 10000,
-        introduction: 'wechatpay.scanqrcode'
+        introduction: 'wechatpay.scanqrcode',
+        timeToPay: 'wechatpay.timetopay',
+        buttonLabel: 'openApp'
    };

    componentDidMount() {
@@ -148,7 +150,6 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
        const { i18n, loadingContext } = useCoreContext();
        const getImage = useImage();
        const qrCodeImage = this.props.qrCodeData ? `${loadingContext}${QRCODE_URL}${this.props.qrCodeData}` : this.props.qrCodeImage;
-
        const finalState = (image, message) => {
            const status = i18n.get(message);
            useA11yReporter(status);
@@ -181,7 +182,7 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
            );
        }

-        const timeToPayString = i18n.get('wechatpay.timetopay').split('%@');
+        const timeToPayString = i18n.get(this.props.timeToPay).split('%@');

        const qrSubtitleRef = useAutoFocus();

@@ -201,7 +202,10 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {

                {url && (
                    <div className="adyen-checkout__qr-loader__app-link">
-                        <Button classNameModifiers={['qr-loader']} onClick={() => this.redirectToApp(url)} label={i18n.get('openApp')} />
+                        {this.props.redirectIntroduction && (
+                            <div className="adyen-checkout__qr-loader__subtitle">{i18n.get(this.props.redirectIntroduction)}</div>
+                        )}
+                        <Button classNameModifiers={['qr-loader']} onClick={() => this.redirectToApp(url)} label={i18n.get(this.props.buttonLabel)} />
                        <ContentSeparator />
                    </div>
                )}
@@ -229,7 +233,11 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
                    &nbsp;{timeToPayString[1]}
                </div>

-                {this.props.instructions && <div className="adyen-checkout__qr-loader__instructions">{i18n.get(this.props.instructions)}</div>}
+                {typeof this.props.instructions === 'string' ? (
+                    <div className="adyen-checkout__qr-loader__instructions">{i18n.get(this.props.instructions)}</div>
+                ) : (
+                    this.props.instructions?.()
+                )}

                {this.props.copyBtn && (
                    <div className="adyen-checkout__qr-loader__actions">
--- a/packages/lib/src/components/internal/QRLoader/types.ts
+++ b/packages/lib/src/components/internal/QRLoader/types.ts
@@ -1,6 +1,7 @@
 import { PaymentAmount } from '../../../types';
 import Language from '../../../language/Language';
 import { ActionHandledReturnObject } from '../../types';
+import { h } from 'preact';

 export interface QRLoaderProps {
    delay?: number;
@@ -21,8 +22,11 @@ export interface QRLoaderProps {
    classNameModifiers?: string[];
    brandLogo?: string;
    brandName?: string;
+    buttonLabel?: string;
    introduction?: string;
-    instructions?: string;
+    redirectIntroduction?: string;
+    timeToPay?: string;
+    instructions?: string | (() => h.JSX.Element);
    copyBtn?: boolean;
    onActionHandled?: (rtnObj: ActionHandledReturnObject) => void;
 }
--- a/packages/lib/src/language/locales/ar.json
+++ b/packages/lib/src/language/locales/ar.json
@@ -301,5 +301,11 @@
    "ancv.input.label": "تعريف ANCV الخاص بك",
    "ancv.confirmPayment": "استخدم تطبيق ANCV الخاص بك لتأكيد الدفع.",
    "ancv.form.instruction": "يعد تطبيق Cheque-Vacances ضروريًا للمصادقة على هذه المدفوعات.",
-    "ancv.beneficiaryId.invalid": "أدخل عنوان بريد إلكتروني صحيحًا أو معرف ANCV"
-}
+    "ancv.beneficiaryId.invalid": "أدخل عنوان بريد إلكتروني صحيحًا أو معرف ANCV",
+    "payme.openPayMeApp": "أكمل الدفع في تطبيق PayMe من خلال الإذن بالدفع في التطبيق وانتظر التأكيد.",
+    "payme.redirectButtonLabel": "افتح تطبيق PayMe",
+    "payme.scanQrCode": "أكمل الدفع باستخدام رمز الاستجابة السريعة",
+    "payme.timeToPay": "رمز الاستجابة السريعة هذا صالح لـ %@",
+    "payme.instructions.steps": "افتح تطبيق PayMe. %@امسح رمز الاستجابة السريعة ضوئيًا للإذن بالدفع. %@أكمل عملية الدفع في التطبيق وانتظر التأكيد.",
+    "payme.instructions.footnote": "يرجى عدم إغلاق هذه الصفحة قبل إتمام الدفع"
+}
--- a/packages/lib/src/language/locales/cs-CZ.json
+++ b/packages/lib/src/language/locales/cs-CZ.json
@@ -297,5 +297,11 @@
    "ancv.input.label": "Vaše identifikace ANCV",
    "ancv.confirmPayment": "Pro potvrzení platby použijte aplikaci ANCV.",
    "ancv.form.instruction": "K potvrzení této platby je nutná aplikace Cheque-Vacances.",
-    "ancv.beneficiaryId.invalid": "Zadejte platnou e-mailovou adresu nebo ID ANCV"
-}
+    "ancv.beneficiaryId.invalid": "Zadejte platnou e-mailovou adresu nebo ID ANCV",
+    "payme.openPayMeApp": "Dokončete platbu autorizací v aplikaci PayMe a počkejte na potvrzení.",
+    "payme.redirectButtonLabel": "Otevřete aplikaci PayMe",
+    "payme.scanQrCode": "Dokončete platbu pomocí QR kódu",
+    "payme.timeToPay": "Tento QR kód je platný pro %@",
+    "payme.instructions.steps": "Otevřete aplikaci PayMe.%@Autorizujte platbu naskenováním QR kódu.%@Dokončete platbu v aplikaci a počkejte na potvrzení.",
+    "payme.instructions.footnote": "Nezavírejte prosím tuto stránku před dokončením platby."
+}
--- a/packages/lib/src/language/locales/da-DK.json
+++ b/packages/lib/src/language/locales/da-DK.json
@@ -298,5 +298,11 @@
    "ancv.input.label": "Din ANCV-identifikation",
    "ancv.confirmPayment": "Brug din ANCV-applikation til at bekræfte betalingen.",
    "ancv.form.instruction": "Cheque-Vacances-applikationen er nødvendig for at validere denne betaling.",
-    "ancv.beneficiaryId.invalid": "Indtast en gyldig e-mailadresse eller ANCV-id"
-}
+    "ancv.beneficiaryId.invalid": "Indtast en gyldig e-mailadresse eller ANCV-id",
+    "payme.openPayMeApp": "Gennemfør betalingen i PayMe-appen ved at godkende betalingen i appen og afvente bekræftelsen.",
+    "payme.redirectButtonLabel": "Åbn PayMe-appen",
+    "payme.scanQrCode": "Gennemfør din betaling med QR-kode",
+    "payme.timeToPay": "Denne QR-kode er gyldig i %@",
+    "payme.instructions.steps": "Åbn PayMe-appen.%@Scan QR-koden for at godkende betalingen.%@Gennemfør betalingen i appen, og afvent bekræftelse.",
+    "payme.instructions.footnote": "Luk ikke denne side, før betalingen er gennemført"
+}
--- a/packages/lib/src/language/locales/de-DE.json
+++ b/packages/lib/src/language/locales/de-DE.json
@@ -297,5 +297,11 @@
    "ancv.input.label": "Ihre ANCV-Identifikation",
    "ancv.confirmPayment": "Bestätigen Sie die Zahlung mit Ihrem ANCV-Antrag.",
    "ancv.form.instruction": "Zur Validierung dieser Zahlung ist der Antrag „Cheque-Vacances“ erforderlich.",
-    "ancv.beneficiaryId.invalid": "Geben Sie eine gültige E-Mail-Adresse oder ANCV-ID ein"
-}
+    "ancv.beneficiaryId.invalid": "Geben Sie eine gültige E-Mail-Adresse oder ANCV-ID ein",
+    "payme.openPayMeApp": "Schließen Sie Ihre Zahlung in der PayMe-App ab, indem Sie die Zahlung in der App autorisieren und auf die Bestätigung warten.",
+    "payme.redirectButtonLabel": "Öffnen Sie die PayMe-App",
+    "payme.scanQrCode": "Schließen Sie Ihre Zahlung per QR-Code ab",
+    "payme.timeToPay": "Dieser QR-Code gilt für %@",
+    "payme.instructions.steps": "Öffnen Sie die PayMe-App.%@Scannen Sie den QR-Code, um die Zahlung zu autorisieren.%@Schließen Sie die Zahlung in der App ab und warten Sie auf eine Bestätigung.",
+    "payme.instructions.footnote": "Bitte schließen Sie diese Seite nicht, bevor die Zahlung abgeschlossen ist"
+}
--- a/packages/lib/src/language/locales/el-GR.json
+++ b/packages/lib/src/language/locales/el-GR.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "Η ταυτότητά σας ANCV",
    "ancv.confirmPayment": "Χρησιμοποιήστε την εφαρμογή ANCV για επιβεβαίωση της πληρωμής.",
    "ancv.form.instruction": "Η εφαρμογή Cheque-Vacances είναι απαραίτητη για επικύρωση της πληρωμής αυτής.",
-    "ancv.beneficiaryId.invalid": "Εισαγάγετε έγκυρη διεύθυνση email ή αναγνωριστικό ANCV"
-}
+    "ancv.beneficiaryId.invalid": "Εισαγάγετε έγκυρη διεύθυνση email ή αναγνωριστικό ANCV",
+    "payme.openPayMeApp": "Ολοκληρώστε την πληρωμή σας στην εφαρμογή PayMe εξουσιοδοτώντας την πληρωμή στην εφαρμογή και περιμένετε την επιβεβαίωση.",
+    "payme.redirectButtonLabel": "Ανοίξτε την εφαρμογή PayMe",
+    "payme.scanQrCode": "Ολοκληρώστε την πληρωμή σας με κωδικό QR",
+    "payme.timeToPay": "Αυτός ο κωδικός QR ισχύει για %@",
+    "payme.instructions.steps": "Ανοίξτε την εφαρμογή PayMe.%@Σκανάρετε τον κωδικό QR για να εξουσιοδοτήσετε την πληρωμή.%@Ολοκληρώστε την πληρωμή στην εφαρμογή και περιμένετε την επιβεβαίωση.",
+    "payme.instructions.footnote": "Μην κλείσετε αυτήν τη σελίδα προτού ολοκληρωθεί η πληρωμή."
+}
--- a/packages/lib/src/language/locales/en-US.json
+++ b/packages/lib/src/language/locales/en-US.json
@@ -302,5 +302,11 @@
    "ancv.input.label": "Your ANCV identification",
    "ancv.confirmPayment": "Use your ANCV application to confirm the payment.",
    "ancv.form.instruction": "The Cheque-Vacances application is necessary to validate this payment.",
-    "ancv.beneficiaryId.invalid": "Enter a valid email address or ANCV ID"
-}
+    "ancv.beneficiaryId.invalid": "Enter a valid email address or ANCV ID",
+    "payme.openPayMeApp": "Complete your payment in the PayMe app by authorizing the payment in the app and wait for the confirmation.",
+    "payme.redirectButtonLabel": "Open PayMe app",
+    "payme.scanQrCode": "Complete your payment by QR code",
+    "payme.timeToPay": "This QR code is valid for %@",
+    "payme.instructions.steps": "Open the PayMe app.%@Scan the QR code to authorize the payment.%@Complete the payment in the app and wait for confirmation.",
+    "payme.instructions.footnote": "Please do not close this page before the payment is completed"
+}
--- a/packages/lib/src/language/locales/es-ES.json
+++ b/packages/lib/src/language/locales/es-ES.json
@@ -292,5 +292,11 @@
    "ancv.input.label": "Su identificación de la ANCV",
    "ancv.confirmPayment": "Utilice su solicitud de la ANCV para confirmar el pago.",
    "ancv.form.instruction": "La aplicación de Cheque-Vacances es necesaria para validar este pago.",
-    "ancv.beneficiaryId.invalid": "Introduzca una dirección de correo electrónico válida o un documento de identidad de la ANCV"
-}
+    "ancv.beneficiaryId.invalid": "Introduzca una dirección de correo electrónico válida o un documento de identidad de la ANCV",
+    "payme.openPayMeApp": "Completa tu pago en la aplicación PayMe autorizando el pago en la aplicación y espera por la confirmación.",
+    "payme.redirectButtonLabel": "Abrir aplicación PayMe",
+    "payme.scanQrCode": "Completa tu pago con código QR",
+    "payme.timeToPay": "Este código QR es válido para %@",
+    "payme.instructions.steps": "Abre la aplicación PayMe.%@Escanea el código QR para autorizar el pago.%@Completa el pago en la aplicación y espera por la confirmación.",
+    "payme.instructions.footnote": "No cierres esta página antes de que se complete el pago"
+}
--- a/packages/lib/src/language/locales/fi-FI.json
+++ b/packages/lib/src/language/locales/fi-FI.json
@@ -297,5 +297,11 @@
    "ancv.input.label": "ANCV-tunnuksesi",
    "ancv.confirmPayment": "Vahvista maksusi ANCV-sovelluksella.",
    "ancv.form.instruction": "Tämän maksun vahvistaminen edellyttää Cheque-Vacances -sovelluksen.",
-    "ancv.beneficiaryId.invalid": "Anna kelvollinen sähköpostiosoite tai ANCV-tunnus"
-}
+    "ancv.beneficiaryId.invalid": "Anna kelvollinen sähköpostiosoite tai ANCV-tunnus",
+    "payme.openPayMeApp": "Viimeistele maksu PayMe-sovelluksessa hyväksymällä maksu sovelluksessa, ja odota vahvistusta.",
+    "payme.redirectButtonLabel": "Avaa PayMe-sovellus",
+    "payme.scanQrCode": "Viimeistele maksusi QR-koodilla",
+    "payme.timeToPay": "Tämä QR-koodi on voimassa %@",
+    "payme.instructions.steps": "Avaa PayMe-sovellus.%@Hyväksy maksu skannaamalla QR-koodi.%@Viimeistele maksu sovelluksessa, ja odota vahvistusta.",
+    "payme.instructions.footnote": "Älä sulje tätä sivua ennen kuin maksu on suoritettu"
+}
--- a/packages/lib/src/language/locales/fr-FR.json
+++ b/packages/lib/src/language/locales/fr-FR.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "Votre identification ANCV",
    "ancv.confirmPayment": "Utilisez votre application ANCV pour confirmer le paiement.",
    "ancv.form.instruction": "L'application Chèque-Vacances est nécessaire pour valider ce paiement.",
-    "ancv.beneficiaryId.invalid": "Saisissez une adresse e-mail ou un identifiant ANCV valide"
-}
+    "ancv.beneficiaryId.invalid": "Saisissez une adresse e-mail ou un identifiant ANCV valide",
+    "payme.openPayMeApp": "Finalisez votre paiement dans l'application PayMe en autorisant le paiement dans l'application, puis attendez la confirmation.",
+    "payme.redirectButtonLabel": "Ouvrir l'application PayMe",
+    "payme.scanQrCode": "Effectuez votre paiement avec un code QR",
+    "payme.timeToPay": "Ce code QR est valide pendant %@",
+    "payme.instructions.steps": "Ouvrez l'application PayMe.%@Scannez le code QR pour autoriser le paiement.%@Effectuez le paiement dans l'application et attendez la confirmation.",
+    "payme.instructions.footnote": "Veuillez ne pas fermer cette page avant que le paiement ne soit terminé."
+}
--- a/packages/lib/src/language/locales/hr-HR.json
+++ b/packages/lib/src/language/locales/hr-HR.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "Vaša ANCV identifikacija",
    "ancv.confirmPayment": "Koristite svoju ANCV aplikaciju za potvrdu plaćanja.",
    "ancv.form.instruction": "Za potvrdu ove uplate neophodna je aplikacija Cheque-Vacances.",
-    "ancv.beneficiaryId.invalid": "Unesite valjanu adresu e-pošte ili ANCV ID"
-}
+    "ancv.beneficiaryId.invalid": "Unesite valjanu adresu e-pošte ili ANCV ID",
+    "payme.openPayMeApp": "Dovršite plaćanje u aplikaciji PayMe: autorizirajte plaćanje u aplikaciji i pričekajte potvrdu.",
+    "payme.redirectButtonLabel": "Otvaranje aplikacije PayMe",
+    "payme.scanQrCode": "Dovršite svoje plaćanja QR kodom",
+    "payme.timeToPay": "Ovaj QR kôd vrijedi za %@",
+    "payme.instructions.steps": "Otvorite aplikaciju PayMe.%@Skenirajte QR kod za autorizaciju plaćanja.%@Dovršite plaćanje u aplikaciji i pričekajte potvrdu.",
+    "payme.instructions.footnote": "Ne zatvarajte ovu stranicu prije nego što se plaćanje završi"
+}
--- a/packages/lib/src/language/locales/hu-HU.json
+++ b/packages/lib/src/language/locales/hu-HU.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "Az Ön ANCV-azonosítója",
    "ancv.confirmPayment": "A fizetés megerősítéséhez használja az ANCV alkalmazást.",
    "ancv.form.instruction": "A fizetés érvényesítéséhez a Cheque-Vacances alkalmazás szükséges.",
-    "ancv.beneficiaryId.invalid": "Adjon meg egy érvényes e-mail-címet vagy ANCV-azonosítót"
-}
+    "ancv.beneficiaryId.invalid": "Adjon meg egy érvényes e-mail-címet vagy ANCV-azonosítót",
+    "payme.openPayMeApp": "A fizetésnek a PayMe alkalmazásban való engedélyezésével hajtsa végre a fizetést, és várja meg a visszaigazolást.",
+    "payme.redirectButtonLabel": "PayMe alkalmazás megnyitása",
+    "payme.scanQrCode": "Fizetés végrehajtása QR-kóddal",
+    "payme.timeToPay": "A QR-kód ennyi ideig érvényes: %@",
+    "payme.instructions.steps": "Nyissa meg a PayMe alkalmazást.%@A fizetés engedélyezéséhez olvassa be a QR-kódot.%@Hajtsa végre a fizetést az alkalmazásban, és várja meg a visszaigazolást.",
+    "payme.instructions.footnote": "A fizetés befejezése előtt ne zárja be ezt az oldalt"
+}
--- a/packages/lib/src/language/locales/it-IT.json
+++ b/packages/lib/src/language/locales/it-IT.json
@@ -298,5 +298,11 @@
    "ancv.input.label": "Il tuo identificativo ANCV",
    "ancv.confirmPayment": "Utilizza la tua richiesta ANCV per confermare il pagamento.",
    "ancv.form.instruction": "Per confermare il pagamento è necessario utilizzare la richiesta Cheque-Vacances.",
-    "ancv.beneficiaryId.invalid": "Inserisci un indirizzo e-mail o un identificativo ANCV valido"
-}
+    "ancv.beneficiaryId.invalid": "Inserisci un indirizzo e-mail o un identificativo ANCV valido",
+    "payme.openPayMeApp": "Completa il pagamento nell'app PayMe concedendo l'autorizzazione e attendendo il messaggio di conferma.",
+    "payme.redirectButtonLabel": "Apri l'app PayMe",
+    "payme.scanQrCode": "Completa il pagamento con il codice QR",
+    "payme.timeToPay": "Questo codice QR è valido per %@",
+    "payme.instructions.steps": "Apri l'app PayMe.%@Scansiona il codice QR per autorizzare il pagamento.%@Completa il pagamento nell'app e attendi la conferma.",
+    "payme.instructions.footnote": "Rimani su questa pagina fino a quando il pagamento sarà completato"
+}
--- a/packages/lib/src/language/locales/ja-JP.json
+++ b/packages/lib/src/language/locales/ja-JP.json
@@ -99,13 +99,13 @@
    "voucher.alternativeReference": "別の参照",
    "dragonpay.voucher.non.bank.selectField.placeholder": "プロバイダーを選択してください",
    "dragonpay.voucher.bank.selectField.placeholder": "銀行を選択してください",
-    "voucher.paymentReferenceLabel": "支払いの参照",
+    "voucher.paymentReferenceLabel": "確認番号",
    "voucher.surcharge": "%@ の追加料金を含む",
    "voucher.introduction.doku": "お買い上げありがとうございます。以下の情報を使用して、お支払いを完了してください。",
    "voucher.shopperName": "購入者氏名",
    "voucher.merchantName": "業者",
    "voucher.introduction.econtext": "お買い上げありがとうございます。以下の情報を使用して、お支払いを完了してください。",
-    "voucher.telephoneNumber": "電話番号",
+    "voucher.telephoneNumber": "電話番号（お客様番号）",
    "voucher.shopperReference": "購入者向け参考情報",
    "voucher.collectionInstitutionNumber": "収納機関番号",
    "voucher.econtext.telephoneNumber.invalid": "電話番号は10桁または11桁にしてください",
@@ -300,5 +300,11 @@
    "ancv.input.label": "ANCV ID",
    "ancv.confirmPayment": "ANCVアプリケーションを使用して、支払を確認してください。",
    "ancv.form.instruction": "この支払を検証するには、Cheque-Vacancesアプリケーションが必要です。",
-    "ancv.beneficiaryId.invalid": "有効なメールアドレスまたはANCV IDを入力してください"
-}
+    "ancv.beneficiaryId.invalid": "有効なメールアドレスまたはANCV IDを入力してください",
+    "payme.openPayMeApp": "PayMeアプリで承認して支払いを完了し、確認を待ちます。",
+    "payme.redirectButtonLabel": "PayMeアプリを開く",
+    "payme.scanQrCode": "QRコードで支払いを完了する",
+    "payme.timeToPay": "このQRコードは%@有効です",
+    "payme.instructions.steps": "PayMeアプリを開きます。%@QRコードをスキャンして支払いを承認します。%@アプリで支払いを完了し、確認を待ちます。",
+    "payme.instructions.footnote": "支払いが完了するまでこのページを閉じないでください。"
+}
--- a/packages/lib/src/language/locales/ko-KR.json
+++ b/packages/lib/src/language/locales/ko-KR.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "나의 ANCV ID",
    "ancv.confirmPayment": "ANCV 애플리케이션을 사용해 결제를 확인하세요.",
    "ancv.form.instruction": "이 결제를 인증하려면 Cheque-Vacances 애플리케이션이 필요합니다.",
-    "ancv.beneficiaryId.invalid": "유효한 이메일 주소나 ANCV ID를 입력하세요."
-}
+    "ancv.beneficiaryId.invalid": "유효한 이메일 주소나 ANCV ID를 입력하세요.",
+    "payme.openPayMeApp": "PayMe 앱에서 결제를 승인하여 결제를 완료하고 확인을 기다립니다.",
+    "payme.redirectButtonLabel": "PayMe 앱 열기",
+    "payme.scanQrCode": "QR 코드로 결제 완료",
+    "payme.timeToPay": "이 QR 코드는 %@ 동안 유효합니다",
+    "payme.instructions.steps": "PayMe 앱을 엽니다.%@QR 코드를 스캔하여 결제를 승인합니다.%@앱에서 결제를 완료하고 확인을 기다립니다.",
+    "payme.instructions.footnote": "결제가 완료되기 전에 이 페이지를 닫지 마세요."
+}
--- a/packages/lib/src/language/locales/nl-NL.json
+++ b/packages/lib/src/language/locales/nl-NL.json
@@ -297,5 +297,11 @@
    "ancv.input.label": "Uw ANCV-identificatie",
    "ancv.confirmPayment": "Gebruik uw ANCV-toepassing om de betaling te bevestigen.",
    "ancv.form.instruction": "De Cheque-Vacances applicatie is nodig om deze betaling te valideren.",
-    "ancv.beneficiaryId.invalid": "Voer een geldig e-mailadres of ANCV-id in"
-}
+    "ancv.beneficiaryId.invalid": "Voer een geldig e-mailadres of ANCV-id in",
+    "payme.openPayMeApp": "Voltooi uw betaling door deze te autoriseren in de PayMe-app en de bevestiging af te wachten.",
+    "payme.redirectButtonLabel": "Open de PayMe-app",
+    "payme.scanQrCode": "Voltooi uw betaling met een QR-code",
+    "payme.timeToPay": "Deze QR-code is %@ geldig",
+    "payme.instructions.steps": "Open de PayMe-app.%@Scan de QR-code om de betaling te autoriseren.%@Voltooi de betaling in de app en wacht de bevestiging af.",
+    "payme.instructions.footnote": "Sluit deze pagina niet voordat de betaling is voltooid"
+}
--- a/packages/lib/src/language/locales/no-NO.json
+++ b/packages/lib/src/language/locales/no-NO.json
@@ -297,5 +297,11 @@
    "ancv.input.label": "ANCV-identifikasjonen din",
    "ancv.confirmPayment": "Bruk ANCV-appen for å bekrefte betalingen.",
    "ancv.form.instruction": "Cheque-Vacances-appen er nødvendig for å validere denne betalingen.",
-    "ancv.beneficiaryId.invalid": "Oppgi en gyldig e-postadresse eller ANCV-ID"
-}
+    "ancv.beneficiaryId.invalid": "Oppgi en gyldig e-postadresse eller ANCV-ID",
+    "payme.openPayMeApp": "Fullfør betalingen i PayMe-appen ved å godkjenne betalingen i appen og vente på bekreftelse.",
+    "payme.redirectButtonLabel": "Åpne PayMe-appen",
+    "payme.scanQrCode": "Fullfør betalingen via QR-kode",
+    "payme.timeToPay": "Denne QR-koden er gyldig i %@",
+    "payme.instructions.steps": "Åpne PayMe-appen.%@Skann QR-koden for å autorisere betalingen.%@Fullfør betalingen i appen, og vent på bekreftelsen.",
+    "payme.instructions.footnote": "Ikke lukk denne siden før betalingen er fullført"
+}
--- a/packages/lib/src/language/locales/pl-PL.json
+++ b/packages/lib/src/language/locales/pl-PL.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "Twój identyfikator ANCV",
    "ancv.confirmPayment": "Użyj aplikacji ANCV, aby potwierdzić płatność.",
    "ancv.form.instruction": "Do zatwierdzenia tej płatności konieczna jest aplikacja Cheque-Vacances.",
-    "ancv.beneficiaryId.invalid": "Wprowadź poprawny adres e-mail lub identyfikator ANCV"
-}
+    "ancv.beneficiaryId.invalid": "Wprowadź poprawny adres e-mail lub identyfikator ANCV",
+    "payme.openPayMeApp": "Dokończ płatność w aplikacji PayMe, autoryzując płatność w aplikacji, i poczekaj na potwierdzenie.",
+    "payme.redirectButtonLabel": "Otwórz aplikację PayMe",
+    "payme.scanQrCode": "Dokończ płatność za pomocą kodu QR",
+    "payme.timeToPay": "Okres ważności kodu QR: %@",
+    "payme.instructions.steps": "Otwórz aplikację PayMe.%@Zeskanuj kod QR, aby autoryzować płatność.%@Dokończ płatność w aplikacji i poczekaj na potwierdzenie.",
+    "payme.instructions.footnote": "Nie zamykaj tej strony, dopóki płatność nie zostanie zakończona"
+}
--- a/packages/lib/src/language/locales/pt-BR.json
+++ b/packages/lib/src/language/locales/pt-BR.json
@@ -298,5 +298,11 @@
    "ancv.input.label": "Sua identificação da ANCV",
    "ancv.confirmPayment": "Use o aplicativo da ANCV para confirmar o pagamento.",
    "ancv.form.instruction": "É necessário ter o aplicativo da Cheque-Vacances para validar este pagamento.",
-    "ancv.beneficiaryId.invalid": "Insira um endereço de e-mail válido ou uma ID da ANCV"
-}
+    "ancv.beneficiaryId.invalid": "Insira um endereço de e-mail válido ou uma ID da ANCV",
+    "payme.openPayMeApp": "Para concluir o pagamento no PayMe, autorize-o no aplicativo e aguarde a confirmação.",
+    "payme.redirectButtonLabel": "Abrir o aplicativo PayMe",
+    "payme.scanQrCode": "Concluir o pagamento com um código QR",
+    "payme.timeToPay": "Este QR code é válido para %@",
+    "payme.instructions.steps": "Abra o aplicativo PayMe.%@Escaneie o QR code para autorizar o pagamento.%@Conclua o pagamento no aplicativo e aguarde a confirmação.",
+    "payme.instructions.footnote": "Não feche esta página antes de concluir o pagamento"
+}
--- a/packages/lib/src/language/locales/pt-PT.json
+++ b/packages/lib/src/language/locales/pt-PT.json
@@ -302,5 +302,11 @@
    "ancv.input.label": "A sua identificação de ANCV",
    "ancv.confirmPayment": "Use a sua aplicação ANCV para confirmar o pagamento.",
    "ancv.form.instruction": "A app Cheque-Vacances é necessária para validar este pagamento.",
-    "ancv.beneficiaryId.invalid": "Insira um endereço de e-mail ou ID válido de ANCV"
-}
+    "ancv.beneficiaryId.invalid": "Insira um endereço de e-mail ou ID válido de ANCV",
+    "payme.openPayMeApp": "Conclua o seu pagamento na app PayMe autorizando o pagamento na app e aguardando a confirmação.",
+    "payme.redirectButtonLabel": "Abrir a app PayMe",
+    "payme.scanQrCode": "Conclua o seu pagamento por código QR",
+    "payme.timeToPay": "Este código QR é válido para %@",
+    "payme.instructions.steps": "Abra a app PayMe.%@Leia o código QR para autorizar o pagamento.%@Conclua o pagamento na app e aguarde a confirmação.",
+    "payme.instructions.footnote": "Não feche esta página antes de concluir o pagamento"
+}
--- a/packages/lib/src/language/locales/ro-RO.json
+++ b/packages/lib/src/language/locales/ro-RO.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "Identificarea dvs. ANCV",
    "ancv.confirmPayment": "Utilizați aplicația ANCV pentru a confirma plata.",
    "ancv.form.instruction": "Aplicația Cheque-Vacances este necesară pentru a valida această plată.",
-    "ancv.beneficiaryId.invalid": "Completați o adresă de e-mail sau un ID ANCV valabil"
-}
+    "ancv.beneficiaryId.invalid": "Completați o adresă de e-mail sau un ID ANCV valabil",
+    "payme.openPayMeApp": "Finalizați plata în aplicația PayMe, autorizând plata în aplicație, și așteptați confirmarea.",
+    "payme.redirectButtonLabel": "Deschideți aplicația PayMe",
+    "payme.scanQrCode": "Finalizați plata folosind codul QR",
+    "payme.timeToPay": "Acest cod QR este valabil pentru %@",
+    "payme.instructions.steps": "Deschideți aplicația PayMe.%@Scanați codul QR pentru a autoriza plata.%@Finalizați plata în aplicație și așteptați confirmarea.",
+    "payme.instructions.footnote": "Nu închideți această pagină înainte de finalizarea plății."
+}
--- a/packages/lib/src/language/locales/ru-RU.json
+++ b/packages/lib/src/language/locales/ru-RU.json
@@ -297,5 +297,11 @@
    "ancv.input.label": "Ваш идентификатор ANCV",
    "ancv.confirmPayment": "Используйте приложение ANCV для подтверждения платежа.",
    "ancv.form.instruction": "Для подтверждения этого платежа необходимо приложение Cheque-Vacances.",
-    "ancv.beneficiaryId.invalid": "Введите действительный адрес электронной почты или идентификатор ANCV"
-}
+    "ancv.beneficiaryId.invalid": "Введите действительный адрес электронной почты или идентификатор ANCV",
+    "payme.openPayMeApp": "Для завершения оплаты разрешите ее в приложении PayMe и дождитесь подтверждения.",
+    "payme.redirectButtonLabel": "Открыть приложение PayMe",
+    "payme.scanQrCode": "Завершить платеж с помощью QR-кода",
+    "payme.timeToPay": "Данный QR-код действителен в течение %@",
+    "payme.instructions.steps": "Откройте приложение PayMe.%@Отсканируйте QR-код, чтобы разрешить платеж.%@Завершите платеж в приложении и дождитесь подтверждения.",
+    "payme.instructions.footnote": "Не закрывайте эту страницу до завершения платежа"
+}
--- a/packages/lib/src/language/locales/sk-SK.json
+++ b/packages/lib/src/language/locales/sk-SK.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "Vaša identifikácia ANCV",
    "ancv.confirmPayment": "Na potvrdenie platby použite svoju aplikáciu ANCV.",
    "ancv.form.instruction": "Na potvrdenie tejto platby je potrebná aplikácia Cheque-Vacances.",
-    "ancv.beneficiaryId.invalid": "Zadajte platnú e-mailovú adresu alebo ANCV ID"
-}
+    "ancv.beneficiaryId.invalid": "Zadajte platnú e-mailovú adresu alebo ANCV ID",
+    "payme.openPayMeApp": "Dokončite platbu v aplikácii PayMe tak, že v aplikácii autorizujete platbu a počkáte na potvrdenie.",
+    "payme.redirectButtonLabel": "Otvoriť aplikáciu PayMe",
+    "payme.scanQrCode": "Dokončite platbu pomocou kódu QR",
+    "payme.timeToPay": "Tento kód QR platí %@",
+    "payme.instructions.steps": "Otvorte aplikáciu PayMe.%@Autorizujte platbu naskenovaním QR kódu.%@Dokončite platbu v aplikácii a počkajte na potvrdenie.",
+    "payme.instructions.footnote": "Nezatvárajte túto stránku pred dokončením platby"
+}
--- a/packages/lib/src/language/locales/sl-SI.json
+++ b/packages/lib/src/language/locales/sl-SI.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "Vaša identifikacija ANCV",
    "ancv.confirmPayment": "Za potrditev plačila uporabite aplikacijo ANCV.",
    "ancv.form.instruction": "Za potrditev tega plačila je potrebna aplikacija Cheque-Vacances.",
-    "ancv.beneficiaryId.invalid": "Vnesite veljaven e-poštni naslov ali ANCV ID"
-}
+    "ancv.beneficiaryId.invalid": "Vnesite veljaven e-poštni naslov ali ANCV ID",
+    "payme.openPayMeApp": "Plačilo dokončajte v aplikaciji PayMe tako, da ga odobrite v aplikaciji in počakate na potrditev.",
+    "payme.redirectButtonLabel": "Odprite aplikacijo PayMe",
+    "payme.scanQrCode": "Izvedite plačilo s kodo QR",
+    "payme.timeToPay": "Ta koda QR velja za %@",
+    "payme.instructions.steps": "Odprite aplikacijo PayMe.%@Skenirajte kodo QR, da odobrite plačilo.%@Zaključite plačilo v aplikaciji in počakajte na potrditev.",
+    "payme.instructions.footnote": "Ne zapirajte te strani, preden je plačilo zaključeno."
+}
--- a/packages/lib/src/language/locales/sv-SE.json
+++ b/packages/lib/src/language/locales/sv-SE.json
@@ -298,5 +298,11 @@
    "ancv.input.label": "Din ANCV-identifiering",
    "ancv.confirmPayment": "Bekräfta betalningen i din ANCV-app.",
    "ancv.form.instruction": "Appen Cheque-Vacances krävs för att validera denna betalning.",
-    "ancv.beneficiaryId.invalid": "Ange en giltig e-postadress eller ANCV-ID"
-}
+    "ancv.beneficiaryId.invalid": "Ange en giltig e-postadress eller ANCV-ID",
+    "payme.openPayMeApp": "Slutför din betalning i PayMe-appen genom att godkänna betalningen i appen och vänta på bekräftelse.",
+    "payme.redirectButtonLabel": "Öppna PayMe-appen",
+    "payme.scanQrCode": "Slutför din betalning med QR-kod",
+    "payme.timeToPay": "Denna QR-kod är giltig i %@",
+    "payme.instructions.steps": "Öppna PayMe-appen.%@Skanna QR-koden för att godkänna betalningen.%@Slutför betalningen i appen och vänta på bekräftelse.",
+    "payme.instructions.footnote": "Stäng inte denna sida innan betalningen är slutförd"
+}
--- a/packages/lib/src/language/locales/zh-CN.json
+++ b/packages/lib/src/language/locales/zh-CN.json
@@ -299,5 +299,11 @@
    "ancv.input.label": "您的 ANCV 身份证明",
    "ancv.confirmPayment": "使用您的 ANCV 应用以确认付款。",
    "ancv.form.instruction": "要验证这笔付款，必须使用 Checke-Vacances 应用。",
-    "ancv.beneficiaryId.invalid": "输入有效的电子邮件地址或 ANCV ID"
-}
+    "ancv.beneficiaryId.invalid": "输入有效的电子邮件地址或 ANCV ID",
+    "payme.openPayMeApp": "在 PayMe 应用中授权付款并等待确认，即可完成您在该应用中的付款。",
+    "payme.redirectButtonLabel": "打开 PayMe 应用",
+    "payme.scanQrCode": "通过二维码完成付款",
+    "payme.timeToPay": "此二维码有效期为 %@",
+    "payme.instructions.steps": "打开 PayMe 应用。%@扫描二维码即可授权付款。%@在应用中完成支付并等待确认。",
+    "payme.instructions.footnote": "付款完成前，请勿关闭此页面"
+}
--- a/packages/lib/src/language/locales/zh-TW.json
+++ b/packages/lib/src/language/locales/zh-TW.json
@@ -300,5 +300,11 @@
    "ancv.input.label": "您的 ANCV 身分識別",
    "ancv.confirmPayment": "使用您的 ANCV 應用程式確認付款。",
    "ancv.form.instruction": "必須申請 Cheque-Vacances 才能驗證此付款。",
-    "ancv.beneficiaryId.invalid": "輸入有效的電子郵件地址或 ANCV ID"
-}
+    "ancv.beneficiaryId.invalid": "輸入有效的電子郵件地址或 ANCV ID",
+    "payme.openPayMeApp": "在 PayMe 應用程式中授權付款，完成付款並等待確認。",
+    "payme.redirectButtonLabel": "開啟 PayMe 應用程式",
+    "payme.scanQrCode": "使用 QR 代碼完成付款",
+    "payme.timeToPay": "此 QR 代碼對 %@ 有效",
+    "payme.instructions.steps": "開啟 PayMe 應用程式。%@掃描 QR 代碼授權付款。%@在應用程式中完成付款並等待確認。",
+    "payme.instructions.footnote": "完成付款前，請勿關閉此頁面"
+}