Adds ANCV payment method component (#2293)

* starting ancv * adds onOrder * fixes missing scss in InputBase * adds validation and order * fix error messages * move ANCV input * fix spelling mistake * update error i18n * clean up await props * add ancv to tests * add changeset for ancv * translations for ancv * fix playwright test report --------- Co-authored-by: antoniof <>
2026-03-10 08:01:22 +00:00 · 2023-10-11 10:23:43 +02:00
parent 789b285b86
commit cb1564c96f
59 changed files with 981 additions and 160 deletions
--- a/.changeset/three-terms-mix.md
+++ b/.changeset/three-terms-mix.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+adds support for ANCV payment method
--- a/packages/e2e-playwright/.gitignore
+++ b/packages/e2e-playwright/.gitignore
@@ -1,5 +1,5 @@
 node_modules/
 /test-results/
-/playwright-report/
+playwright-report/
 /playwright/.cache/
 screenshot.png
--- a/packages/e2e-playwright/app/config/webpack.config.js
+++ b/packages/e2e-playwright/app/config/webpack.config.js
@@ -14,15 +14,20 @@ const htmlPages = fs.readdirSync(basePageDir).map(fileName => ({
    id: fileName
 }));

-const htmlPageGenerator = ({ id }, index) =>
-    new HTMLWebpackPlugin({
-        filename: `${index ? `${id.toLowerCase()}/` : ''}index.html`,
+//console.log('htmlPages', htmlPages);
+
+const htmlPageGenerator = ({ id }, index) => {
+    console.log('htmlPageGenerator', id, index);
+    return new HTMLWebpackPlugin({
+        // make card index.html the rest of the pages will have page <lower case ID>.html
+        filename: `${id !== 'Cards' ? `${id.toLowerCase()}/` : ''}index.html`,
        template: path.join(__dirname, `../src/pages/${id}/${id}.html`),
        templateParameters: () => ({ htmlWebpackPlugin: { htmlPages } }),
        inject: 'body',
        chunks: [`AdyenDemo${id}`],
        chunksSortMode: 'manual'
    });
+};

 const entriesReducer = (acc, { id }) => {
    acc[`AdyenDemo${id}`] = path.join(__dirname, `../src/pages/${id}/${id}.js`);
@@ -42,7 +47,8 @@ module.exports = {
        new webpack.DefinePlugin({
            'process.env': {
                __SF_ENV__: JSON.stringify(process.env.SF_ENV || 'build'),
-                __CLIENT_KEY__: JSON.stringify(process.env.CLIENT_KEY || null)
+                __CLIENT_KEY__: JSON.stringify(process.env.CLIENT_KEY || null),
+                __CLIENT_ENV__: JSON.stringify(process.env.CLIENT_ENV || 'test')
            }
        })
    ],
--- a/packages/e2e-playwright/app/src/handlers.js
+++ b/packages/e2e-playwright/app/src/handlers.js
@@ -1,10 +1,10 @@
-import { makePayment, makeDetailsCall } from './services';
+import { makePayment, makeDetailsCall, createOrder } from './services';

 function removeComponent(component) {
    component.remove();
 }

-function showAuthorised() {
+export function showAuthorised() {
    const resultElement = document.getElementById('result-message');
    resultElement.classList.remove('hide');
    resultElement.innerText = 'Authorised';
@@ -51,3 +51,13 @@ export function handleAdditionalDetails(details, component) {
            throw Error(error);
        });
 }
+
+export function handleOrderRequest(resolve, reject, data) {
+    return createOrder(data)
+        .then(response => {
+            resolve(response);
+        })
+        .catch(error => {
+            reject(error);
+        });
+}
--- a/packages/e2e-playwright/app/src/pages/ANCV/ANCV.html
+++ b/packages/e2e-playwright/app/src/pages/ANCV/ANCV.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="x-ua-compatible" content="ie=edge" />
+        <title>Adyen Web | ANCV</title>
+        <meta name="description" content="" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    </head>
+    <body>
+        <main>
+            <form class="merchant-checkout__form" method="post">
+                <div class="merchant-checkout__payment-method">
+                    <div class="merchant-checkout__payment-method__header">
+                        <h2>ANCV</h2>
+                    </div>
+                    <div class="merchant-checkout__payment-method__details">
+                        <div class="ancv-field"></div>
+                        <button id="ancv-pay-button" type="button">Pay</button>
+                    </div>
+                </div>
+            </form>
+            <div id='result-message' class="merchant-checkout__result hide"></div>
+        </main>
+
+        <script type="text/javascript">
+            window.htmlPages = <%= JSON.stringify(htmlWebpackPlugin.htmlPages) || '' %>;
+        </script>
+    </body>
+</html>
--- a/packages/e2e-playwright/app/src/pages/ANCV/ANCV.js
+++ b/packages/e2e-playwright/app/src/pages/ANCV/ANCV.js
@@ -0,0 +1,62 @@
+import AdyenCheckout from '@adyen/adyen-web';
+import '@adyen/adyen-web/dist/es/adyen.css';
+import { handleSubmit, handleAdditionalDetails, handleError, handleOrderRequest, showAuthorised } from '../../handlers';
+import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
+import '../../style.scss';
+import { createSession } from '../../services';
+
+const initCheckout = async () => {
+    const successTestAmount = { currency: 'EUR', value: 2000 };
+
+    const session = await createSession({
+        amount: successTestAmount,
+        shopperLocale,
+        countryCode,
+        reference: 'mock-playwright',
+        returnUrl: 'http://localhost:3024/'
+    });
+
+    // console.log('env env', process.env.__CLIENT_ENV__);
+    // console.log('env key', process.env.__CLIENT_KEY__);
+    const checkout = await AdyenCheckout({
+        environment: process.env.__CLIENT_ENV__,
+        // environmentUrls: {
+        //     api: process.env.__CLIENT_ENV__
+        // },
+        analytics: {
+            enabled: false
+        },
+        amount: successTestAmount,
+        session,
+        clientKey: process.env.__CLIENT_KEY__,
+        locale: shopperLocale,
+        countryCode,
+        showPayButton: false,
+        //onSubmit: handleSubmit,
+        //onOrderRequest: handleOrderRequest,
+        //onAdditionalDetails: handleAdditionalDetails,
+        onOrderCreated: data => {
+            console.log('=== onOrderCreated ===', data);
+
+            window.paymentMethod = checkout.create('card').mount('.ancv-field');
+        },
+        onPaymentCompleted: () => {
+            showAuthorised();
+        },
+        onError: handleError,
+        paymentMethodsConfiguration: {
+            ideal: {
+                highlightedIssuers: ['1121', '1154', '1153']
+            }
+        }
+        // ...window.mainConfiguration
+    });
+
+    window.paymentMethod = checkout.create('ancv').mount('.ancv-field');
+
+    document.querySelector('#ancv-pay-button').addEventListener('click', () => {
+        window.paymentMethod.submit();
+    });
+};
+
+initCheckout();
--- a/packages/e2e-playwright/mocks/createOrder/createOrder.data.ts
+++ b/packages/e2e-playwright/mocks/createOrder/createOrder.data.ts
@@ -0,0 +1,9 @@
+import { SESSION_DATA_MOCK, ORDER_DATA_MOCK } from '../../tests/utils/constants';
+
+const orderCreatedMockData = {
+    orderData: ORDER_DATA_MOCK,
+    pspReference: 'MHCDBZCH4NF96292',
+    sessionData: SESSION_DATA_MOCK
+};
+
+export { orderCreatedMockData };
--- a/packages/e2e-playwright/mocks/createOrder/createOrder.mock.ts
+++ b/packages/e2e-playwright/mocks/createOrder/createOrder.mock.ts
@@ -0,0 +1,22 @@
+import { Page } from '@playwright/test';
+
+const ORDERS_URL = 'https://checkoutshopper-*.adyen.com/checkoutshopper/v1/sessions/*/orders?*';
+const createOrderMock = async (page: Page, mockedResponse: any): Promise<void> => {
+    await page.route(ORDERS_URL, (route, request) => {
+        const requestData = JSON.parse(request.postData() || '');
+
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                ...mockedResponse,
+                requestId: requestData.requestId
+            }),
+            headers: {
+                'Access-Control-Allow-Origin': '*'
+            }
+        });
+    });
+};
+
+export { createOrderMock };
--- a/packages/e2e-playwright/mocks/paymentDetails/paymentDetails.data.ts
+++ b/packages/e2e-playwright/mocks/paymentDetails/paymentDetails.data.ts
@@ -0,0 +1,22 @@
+import { SESSION_DATA_MOCK, ORDER_DATA_MOCK } from '../../tests/utils/constants';
+
+const paymentDetailsPartiallyAuthorisedAncvMockData = {
+    order: {
+        amount: {
+            currency: 'EUR',
+            value: 2001
+        },
+        expiresAt: '2023-10-10T13:12:59.00Z',
+        orderData: ORDER_DATA_MOCK,
+        pspReference: 'MHCDBZCH4NF96292',
+        reference: 'ABC123',
+        remainingAmount: {
+            currency: 'EUR',
+            value: 100
+        }
+    },
+    resultCode: 'PartiallyAuthorised',
+    sessionData: SESSION_DATA_MOCK
+};
+
+export { paymentDetailsPartiallyAuthorisedAncvMockData };
--- a/packages/e2e-playwright/mocks/paymentDetails/paymentDetails.mock.ts
+++ b/packages/e2e-playwright/mocks/paymentDetails/paymentDetails.mock.ts
@@ -0,0 +1,22 @@
+import { Page } from '@playwright/test';
+
+const PAYMENTS_URL = 'https://checkoutshopper-*.adyen.com/checkoutshopper/v1/sessions/*/paymentDetails?*';
+const paymentDetailsMock = async (page: Page, mockedResponse: any): Promise<void> => {
+    await page.route(PAYMENTS_URL, (route, request) => {
+        const requestData = JSON.parse(request.postData() || '');
+
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                ...mockedResponse,
+                requestId: requestData.requestId
+            }),
+            headers: {
+                'Access-Control-Allow-Origin': '*'
+            }
+        });
+    });
+};
+
+export { paymentDetailsMock };
--- a/packages/e2e-playwright/mocks/payments/payments.data.ts
+++ b/packages/e2e-playwright/mocks/payments/payments.data.ts
@@ -0,0 +1,43 @@
+import { SESSION_DATA_MOCK, ORDER_DATA_MOCK, SESSION_RESULT_MOCK } from '../../tests/utils/constants';
+
+const paymentsActionAncvMockData = {
+    action: {
+        paymentData: SESSION_DATA_MOCK,
+        paymentMethodType: 'ancv',
+        type: 'await'
+    },
+    order: {
+        amount: {
+            currency: 'EUR',
+            value: 2001
+        },
+        expiresAt: '2023-10-10T13:12:59.00Z',
+        orderData: ORDER_DATA_MOCK,
+        pspReference: 'MHCDBZCH4NF96292',
+        reference: 'ABC123'
+    },
+    resultCode: 'Pending',
+    sessionData: SESSION_DATA_MOCK,
+    sessionResult: SESSION_RESULT_MOCK
+};
+
+const paymentsSuccessCardMockData = {
+    order: {
+        amount: {
+            currency: 'EUR',
+            value: 2001
+        },
+        expiresAt: '2023-10-10T13:12:59.00Z',
+        pspReference: 'MHCDBZCH4NF96292',
+        reference: 'ABC123',
+        remainingAmount: {
+            currency: 'EUR',
+            value: 0
+        }
+    },
+    resultCode: 'Authorised',
+    sessionData: SESSION_DATA_MOCK,
+    sessionResult: SESSION_RESULT_MOCK
+};
+
+export { paymentsActionAncvMockData, paymentsSuccessCardMockData };
--- a/packages/e2e-playwright/mocks/payments/payments.mock.ts
+++ b/packages/e2e-playwright/mocks/payments/payments.mock.ts
@@ -0,0 +1,22 @@
+import { Page } from '@playwright/test';
+
+const PAYMENTS_URL = 'https://checkoutshopper-*.adyen.com/checkoutshopper/v1/sessions/*/payments?*';
+const paymentsMock = async (page: Page, mockedResponse: any): Promise<void> => {
+    await page.route(PAYMENTS_URL, (route, request) => {
+        const requestData = JSON.parse(request.postData() || '');
+
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                ...mockedResponse,
+                requestId: requestData.requestId
+            }),
+            headers: {
+                'Access-Control-Allow-Origin': '*'
+            }
+        });
+    });
+};
+
+export { paymentsMock };
--- a/packages/e2e-playwright/mocks/sessions/sessions.data.ts
+++ b/packages/e2e-playwright/mocks/sessions/sessions.data.ts
@@ -0,0 +1,12 @@
+import { SESSION_DATA_MOCK } from '../../tests/utils/constants';
+
+const sessionsMockData = {
+    amount: { currency: 'EUR', value: 2000 },
+    expiresAt: '2023-10-10T11:48:26+02:00',
+    id: 'CSFF69355B6EAD2F68',
+    merchantAccount: 'TestMerchantCheckout',
+    returnUrl: 'http://localhost:3024/',
+    shopperLocale: 'en-US',
+    sessionData: SESSION_DATA_MOCK
+};
+export { sessionsMockData };
--- a/packages/e2e-playwright/mocks/sessions/sessions.mock.ts
+++ b/packages/e2e-playwright/mocks/sessions/sessions.mock.ts
@@ -0,0 +1,23 @@
+import { Page } from '@playwright/test';
+
+const SESSION_URL = 'http://localhost:3024/sessions';
+
+const sessionsMock = async (page: Page, mockedResponse: any): Promise<void> => {
+    await page.route(SESSION_URL, (route, request) => {
+        const requestData = JSON.parse(request.postData() || '');
+
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                ...mockedResponse,
+                requestId: requestData.requestId
+            }),
+            headers: {
+                'Access-Control-Allow-Origin': '*'
+            }
+        });
+    });
+};
+
+export { sessionsMock };
--- a/packages/e2e-playwright/mocks/setup/setup.data.ts
+++ b/packages/e2e-playwright/mocks/setup/setup.data.ts
@@ -0,0 +1,71 @@
+import { SESSION_DATA_MOCK } from '../../tests/utils/constants';
+
+const setupMockData = {
+    amount: { currency: 'EUR', value: 2000 },
+    countryCode: 'FR',
+    expiresAt: '2023-10-10T14:27:12+02:00',
+    id: 'CSC9B0D869C74EC53D',
+    returnUrl: 'http://localhost:3024/',
+    shopperLocale: 'en-US',
+    configuration: { enableStoreDetails: false },
+    paymentMethods: {
+        paymentMethods: [
+            {
+                brands: [
+                    'cartebancaire',
+                    'visa',
+                    'mc',
+                    'amex',
+                    'maestro',
+                    'accel',
+                    'bijcard',
+                    'cup',
+                    'diners',
+                    'discover',
+                    'jcb',
+                    'nyce',
+                    'pulse',
+                    'sodexo',
+                    'star',
+                    'vale_refeicao',
+                    'vale_refeicao_prepaid'
+                ],
+                name: 'Credit Card',
+                type: 'scheme'
+            },
+            { name: 'ANCV', type: 'ancv' }
+        ]
+    },
+    sessionData: SESSION_DATA_MOCK
+};
+
+const setupWithAncvOrderMockData = {
+    amount: {
+        currency: 'EUR',
+        value: 2001
+    },
+    countryCode: 'FR',
+    expiresAt: '2023-10-10T15:12:59+02:00',
+    id: 'CS9094FF58AB7D9B23',
+    returnUrl: 'http://localhost:3020/result',
+    shopperLocale: 'en-US',
+    configuration: {
+        enableStoreDetails: false
+    },
+    paymentMethods: {
+        paymentMethods: [
+            {
+                brands: ['visa', 'mc', 'amex', 'bijcard', 'cartebancaire', 'diners', 'discover', 'jcb', 'maestro', 'ticket', 'uatp'],
+                name: 'Credit Card',
+                type: 'scheme'
+            },
+            {
+                name: 'ANCV',
+                type: 'ancv'
+            }
+        ]
+    },
+    sessionData: SESSION_DATA_MOCK
+};
+
+export { setupMockData, setupWithAncvOrderMockData };
--- a/packages/e2e-playwright/mocks/setup/setup.mock.ts
+++ b/packages/e2e-playwright/mocks/setup/setup.mock.ts
@@ -0,0 +1,23 @@
+import { Page } from '@playwright/test';
+
+const SETUP_URL = 'https://checkoutshopper-*.adyen.com/checkoutshopper/v1/sessions/*/setup?*';
+
+const setupMock = async (page: Page, mockedResponse: any): Promise<void> => {
+    await page.route(SETUP_URL, (route, request) => {
+        const requestData = JSON.parse(request.postData() || '');
+
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                ...mockedResponse,
+                requestId: requestData.requestId
+            }),
+            headers: {
+                'Access-Control-Allow-Origin': '*'
+            }
+        });
+    });
+};
+
+export { setupMock };
--- a/packages/e2e-playwright/mocks/status/status.data.ts
+++ b/packages/e2e-playwright/mocks/status/status.data.ts
@@ -0,0 +1,9 @@
+import { SESSION_DATA_MOCK } from '../../tests/utils/constants';
+
+const statusMockData = {
+    payload: SESSION_DATA_MOCK,
+    resultCode: 'partiallyauthorised',
+    type: 'complete'
+};
+
+export { statusMockData };
--- a/packages/e2e-playwright/mocks/status/status.mock.ts
+++ b/packages/e2e-playwright/mocks/status/status.mock.ts
@@ -0,0 +1,22 @@
+import { Page } from '@playwright/test';
+
+const STATUS_URL = 'https://checkoutshopper-*.adyen.com/checkoutshopper/services/PaymentInitiation/v1/status?*';
+const statusMock = async (page: Page, mockedResponse: any): Promise<void> => {
+    await page.route(STATUS_URL, (route, request) => {
+        const requestData = JSON.parse(request.postData() || '');
+
+        route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+                ...mockedResponse,
+                requestId: requestData.requestId
+            }),
+            headers: {
+                'Access-Control-Allow-Origin': '*'
+            }
+        });
+    });
+};
+
+export { statusMock };
--- a/packages/e2e-playwright/models/ancv.ts
+++ b/packages/e2e-playwright/models/ancv.ts
@@ -0,0 +1,42 @@
+import { Locator, Page } from '@playwright/test';
+import { USER_TYPE_DELAY } from '../tests/utils/constants';
+
+const SELECTOR_DELAY = 300;
+
+class ANCV {
+    readonly rootElement: Locator;
+    readonly rootElementSelector: string;
+
+    readonly ancvInput: Locator;
+    readonly submitButton: Locator;
+
+    readonly awaitText: Locator;
+
+    readonly page: Page;
+
+    constructor(page: Page, rootElementSelector = '.ancv-field') {
+        this.page = page;
+        this.rootElement = page.locator(rootElementSelector);
+        this.rootElementSelector = rootElementSelector;
+
+        this.ancvInput = this.rootElement.getByRole('textbox');
+        this.submitButton = this.page.getByRole('button', { name: /Pay/i });
+
+        this.awaitText = this.rootElement.getByText('Use your ANCV application to confirm the payment.');
+    }
+
+    async clickOnInput() {
+        await this.ancvInput.click({ delay: SELECTOR_DELAY });
+    }
+
+    async fillInID(mockId: string) {
+        await this.clickOnInput();
+        await this.ancvInput.type(mockId, { delay: USER_TYPE_DELAY });
+    }
+
+    async clickOnSubmit() {
+        await this.submitButton.click({ delay: SELECTOR_DELAY });
+    }
+}
+
+export { ANCV };
--- a/packages/e2e-playwright/pages/ancv/ancv.fixture.ts
+++ b/packages/e2e-playwright/pages/ancv/ancv.fixture.ts
@@ -0,0 +1,24 @@
+import { test as base, expect } from '@playwright/test';
+import { AncvPage } from './ancv.page';
+import { sessionsMock } from '../../mocks/sessions/sessions.mock';
+import { sessionsMockData } from '../../mocks/sessions/sessions.data';
+import { setupMock } from '../../mocks/setup/setup.mock';
+import { setupMockData } from '../../mocks/setup/setup.data';
+import { Card } from '../../models/card';
+
+type Fixture = {
+    ancvPage: AncvPage;
+    card: Card;
+};
+
+const test = base.extend<Fixture>({
+    ancvPage: async ({ page }, use) => {
+        const ancvPage = new AncvPage(page);
+        await sessionsMock(page, sessionsMockData);
+        await setupMock(page, setupMockData);
+        await ancvPage.goto();
+        await use(ancvPage);
+    }
+});
+
+export { test, expect };
--- a/packages/e2e-playwright/pages/ancv/ancv.page.ts
+++ b/packages/e2e-playwright/pages/ancv/ancv.page.ts
@@ -0,0 +1,20 @@
+import { Page } from '@playwright/test';
+import { ANCV } from '../../models/ancv';
+
+class AncvPage {
+    private readonly page: Page;
+
+    public readonly ancv: ANCV;
+
+    constructor(page: Page) {
+        this.page = page;
+        this.ancv = new ANCV(page);
+    }
+
+    async goto(url?: string) {
+        const gotoUrl = url ? url : 'http://localhost:3024/ancv?countryCode=NL';
+        await this.page.goto(gotoUrl);
+    }
+}
+
+export { AncvPage };
--- a/packages/e2e-playwright/playwright-report/index.html
+++ b/packages/e2e-playwright/playwright-report/index.html
--- a/packages/e2e-playwright/tests/ancv/ancv.spec.ts
+++ b/packages/e2e-playwright/tests/ancv/ancv.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect } from '../../pages/ancv/ancv.fixture';
+import { createOrderMock } from '../../mocks/createOrder/createOrder.mock';
+import { orderCreatedMockData } from '../../mocks/createOrder/createOrder.data';
+import { paymentsMock } from '../../mocks/payments/payments.mock';
+import { paymentsActionAncvMockData, paymentsSuccessCardMockData } from '../../mocks/payments/payments.data';
+import { paymentDetailsMock } from '../../mocks/paymentDetails/paymentDetails.mock';
+import { paymentDetailsPartiallyAuthorisedAncvMockData } from '../../mocks/paymentDetails/paymentDetails.data';
+import { setupWithAncvOrderMockData } from '../../mocks/setup/setup.data';
+import { statusMockData } from '../../mocks/status/status.data';
+import { setupMock } from '../../mocks/setup/setup.mock';
+import { statusMock } from '../../mocks/status/status.mock';
+
+// test('should display the await component on successful payment', async ({ ancvPage }) => {
+//     const { ancv } = ancvPage;
+//
+//     await createOrderMock(ancv.page, orderCreatedMockData);
+//     await paymentsMock(ancv.page, paymentsActionAncvMockData);
+//
+//     await ancv.fillInID('ancv-id@example.com');
+//     await ancv.clickOnSubmit();
+//
+//     await expect(ancv.awaitText).toBeVisible();
+// });
+
+test('should display card component after handling onOrderCreated', async ({ ancvPage }) => {
+    const { ancv } = ancvPage;
+
+    await createOrderMock(ancv.page, orderCreatedMockData);
+    await paymentsMock(ancv.page, paymentsActionAncvMockData);
+
+    await ancv.fillInID('ancv-id@example.com');
+    await ancv.clickOnSubmit();
+
+    await paymentDetailsMock(ancv.page, paymentDetailsPartiallyAuthorisedAncvMockData);
+    await setupMock(ancv.page, setupWithAncvOrderMockData);
+
+    await statusMock(ancv.page, statusMockData);
+
+    await paymentsMock(ancv.page, paymentsSuccessCardMockData);
+
+    const cardDisclaimerText = ancv.page.getByText('All fields are required unless marked otherwise.');
+
+    await expect(cardDisclaimerText).toBeVisible();
+});
--- a/packages/e2e-playwright/tests/utils/constants.ts
+++ b/packages/e2e-playwright/tests/utils/constants.ts
@@ -8,3 +8,9 @@ export const TEST_CVC_VALUE = '737';
 export const BIN_LOOKUP_URL = `https://checkoutshopper-test.adyen.com/checkoutshopper/${BIN_LOOKUP_VERSION}/bin/binLookup?token=${process.env.CLIENT_KEY}`;

 export const USER_TYPE_DELAY = 150;
+
+export const SESSION_DATA_MOCK = 'AAAADEMOSESSIONDATAAAA';
+
+export const ORDER_DATA_MOCK = 'BBBBORDERDATABBBB';
+
+export const SESSION_RESULT_MOCK = 'CCCCSESIONRESULTCCCC';
--- a/packages/lib/src/components/ANCV/ANCV.tsx
+++ b/packages/lib/src/components/ANCV/ANCV.tsx
@@ -0,0 +1,132 @@
+import { h } from 'preact';
+import UIElement from '../UIElement';
+import ANCVInput from './components/ANCVInput';
+import CoreProvider from '../../core/Context/CoreProvider';
+import config from './components/ANCVAwait/config';
+import Await from '../../components/internal/Await';
+import SRPanelProvider from '../../core/Errors/SRPanelProvider';
+import { PaymentResponse, UIElementProps } from '../types';
+import AdyenCheckoutError from '../../core/Errors/AdyenCheckoutError';
+import PayButton from '../internal/PayButton';
+
+export interface ANCVProps extends UIElementProps {
+    paymentData?: any;
+    data: ANCVDataState;
+    onOrderRequest?: any;
+    onOrderCreated?: any;
+}
+
+export interface ANCVDataState {
+    beneficiaryId: string;
+}
+
+export class ANCVElement extends UIElement<ANCVProps> {
+    private static type = 'ancv';
+
+    /**
+     * Formats the component data output
+     */
+    formatData() {
+        return {
+            paymentMethod: {
+                type: ANCVElement.type,
+                beneficiaryId: this.state.data?.beneficiaryId
+            }
+        };
+    }
+
+    private onOrderRequest = data => {
+        if (this.props.onOrderRequest)
+            return new Promise((resolve, reject) => {
+                this.props.onOrderRequest(resolve, reject, data);
+            });
+
+        if (this.props.session) {
+            return this.props.session.createOrder();
+        }
+    };
+
+    protected handleOrder = ({ order }: PaymentResponse) => {
+        this.updateParent({ order });
+        if (this.props.session && this.props.onOrderCreated) {
+            return this.props.onOrderCreated(order);
+        }
+    };
+
+    public createOrder = () => {
+        if (!this.isValid) {
+            this.showValidation();
+            return false;
+        }
+
+        this.setStatus('loading');
+
+        return this.onOrderRequest(this.data)
+            .then((order: { orderData: string; pspReference: string }) => {
+                this.setState({ order: { orderData: order.orderData, pspReference: order.pspReference } });
+                this.submit();
+            })
+            .catch(error => {
+                this.setStatus(error?.message || 'error');
+                if (this.props.onError) this.handleError(new AdyenCheckoutError('ERROR', error));
+            });
+    };
+
+    // Reimplement payButton similar to GiftCard to allow to set onClick
+    public payButton = props => {
+        return <PayButton {...props} />;
+    };
+
+    get isValid(): boolean {
+        return !!this.state.isValid;
+    }
+
+    get displayName(): string {
+        return this.props.name;
+    }
+
+    render() {
+        if (this.props.paymentData) {
+            return (
+                <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>
+                    <SRPanelProvider srPanel={this.props.modules.srPanel}>
+                        <Await
+                            ref={ref => {
+                                this.componentRef = ref;
+                            }}
+                            clientKey={this.props.clientKey}
+                            paymentData={this.props.paymentData}
+                            onError={this.props.onError}
+                            onComplete={this.onComplete}
+                            brandLogo={this.icon}
+                            type={this.constructor['type']}
+                            messageText={this.props.i18n.get('ancv.confirmPayment')}
+                            awaitText={this.props.i18n.get('await.waitForConfirmation')}
+                            showCountdownTimer={config.showCountdownTimer}
+                            throttleTime={config.THROTTLE_TIME}
+                            throttleInterval={config.THROTTLE_INTERVAL}
+                            onActionHandled={this.props.onActionHandled}
+                        />
+                    </SRPanelProvider>
+                </CoreProvider>
+            );
+        }
+
+        return (
+            <CoreProvider i18n={this.props.i18n} loadingContext={this.props.loadingContext} resources={this.resources}>
+                <ANCVInput
+                    ref={ref => {
+                        this.componentRef = ref;
+                    }}
+                    {...this.props}
+                    onSubmit={this.createOrder}
+                    onChange={this.setState}
+                    payButton={this.payButton}
+                    showPayButton={this.props.showPayButton}
+                />
+            </CoreProvider>
+        );
+    }
+}
+
+export default ANCVElement;
--- a/packages/lib/src/components/ANCV/components/ANCVAwait/config.ts
+++ b/packages/lib/src/components/ANCV/components/ANCVAwait/config.ts
@@ -0,0 +1,10 @@
+export const COUNTDOWN_MINUTES = 15; // min
+export const THROTTLE_TIME = 60000; // ms
+export const THROTTLE_INTERVAL = 10000; // ms
+
+export default {
+    COUNTDOWN_MINUTES,
+    THROTTLE_TIME,
+    THROTTLE_INTERVAL,
+    showCountdownTimer: false
+};
--- a/packages/lib/src/components/ANCV/components/ANCVInput.tsx
+++ b/packages/lib/src/components/ANCV/components/ANCVInput.tsx
@@ -0,0 +1,64 @@
+import { h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import useCoreContext from '../../../core/Context/useCoreContext';
+import LoadingWrapper from '../../internal/LoadingWrapper';
+import InputText from '../../internal/FormFields/InputText';
+import Field from '../../internal/FormFields/Field';
+import useForm from '../../../utils/useForm';
+import { UIElementProps } from '../../types';
+import { ancvValidationRules } from '../validate';
+import { ANCVDataState } from '../ANCV';
+
+export interface ANCVInputProps extends UIElementProps {
+    ref?: any;
+    showPayButton: boolean;
+    onSubmit: () => void;
+}
+
+type ANCVInputDataState = ANCVDataState;
+
+function ANCVInput({ showPayButton, payButton, onChange, onSubmit }: ANCVInputProps) {
+    const { i18n } = useCoreContext();
+
+    const { handleChangeFor, triggerValidation, data, valid, errors, isValid } = useForm<ANCVInputDataState>({
+        schema: ['beneficiaryId'],
+        rules: ancvValidationRules
+    });
+
+    useEffect(() => {
+        onChange({ data, errors, valid, isValid }, this);
+    }, [data, valid, errors, isValid]);
+
+    const [status, setStatus] = useState<string>('ready');
+
+    this.setStatus = setStatus;
+    this.showValidation = triggerValidation;
+
+    return (
+        <LoadingWrapper>
+            <div className="adyen-checkout__ancv">
+                <p className="adyen-checkout-form-instruction">{i18n.get('ancv.form.instruction')}</p>
+                <Field
+                    errorMessage={!!errors.beneficiaryId && i18n.get(errors.beneficiaryId.errorMessage)}
+                    label={i18n.get('ancv.input.label')}
+                    isValid={valid.beneficiaryId}
+                    name={'beneficiaryId'}
+                >
+                    <InputText
+                        value={data.beneficiaryId}
+                        name={'beneficiaryId'}
+                        spellcheck={true}
+                        required={true}
+                        onInput={handleChangeFor('beneficiaryId', 'input')}
+                        onBlur={handleChangeFor('beneficiaryId', 'blur')}
+                    />
+                </Field>
+                {showPayButton && payButton({ status, label: i18n.get('confirmPurchase'), onClick: onSubmit })}
+            </div>
+        </LoadingWrapper>
+    );
+}
+
+ANCVInput.defaultProps = {};
+
+export default ANCVInput;
--- a/packages/lib/src/components/ANCV/index.ts
+++ b/packages/lib/src/components/ANCV/index.ts
@@ -0,0 +1 @@
+export { default } from './ANCV';
--- a/packages/lib/src/components/ANCV/validate.ts
+++ b/packages/lib/src/components/ANCV/validate.ts
@@ -0,0 +1,12 @@
+import { ValidatorRules } from '../../utils/Validator/types';
+import { isEmailValid } from '../internal/PersonalDetails/validate';
+
+export const isANCVNumber = text => /^\d{11}$/.test(text);
+
+export const ancvValidationRules: ValidatorRules = {
+    beneficiaryId: {
+        validate: value => isEmailValid(value) || isANCVNumber(value),
+        errorMessage: 'ancv.beneficiaryId.invalid',
+        modes: ['blur']
+    }
+};
--- a/packages/lib/src/components/index.ts
+++ b/packages/lib/src/components/index.ts
@@ -60,6 +60,7 @@ import OnlineBankingSKElement from './OnlineBankingSK';
 import PayByBank from './PayByBank';
 import PromptPay from './PromptPay';
 import Duitnow from './DuitNow';
+import ANCV from './ANCV';
 import Trustly from './Trustly';

 /**
@@ -216,6 +217,7 @@ const componentsMap = {
    upi: UPI, // also QR
    upi_qr: UPI, // also QR
    upi_collect: UPI, // also QR
+    ancv: ANCV,
    /** Await */

    /** Giftcard */
--- a/packages/lib/src/components/internal/PersonalDetails/validate.ts
+++ b/packages/lib/src/components/internal/PersonalDetails/validate.ts
@@ -10,7 +10,7 @@ const isDateOfBirthValid = value => {
    const age = new Date(ageDiff).getFullYear() - 1970;
    return age >= 18;
 };
-const isEmailValid = value => {
+export const isEmailValid = value => {
    if (isEmpty(value)) return null;
    return value.length >= 6 && value.length <= 320 && email.test(value);
 };
--- a/packages/lib/src/language/locales/ar.json
+++ b/packages/lib/src/language/locales/ar.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "تاريخ الميلاد",
    "shopperEmail": "عنوان البريد الإلكتروني",
    "gender": "النوع",
-    "gender.notselected": "تحديد نوع",
+    "gender.notselected": "حدد نوعك",
    "male": "ذكر",
    "female": "أنثى",
    "billingAddress": "عنوان الفواتير",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "تأكيد الدفع على تطبيق MB WAY",
    "shopperEmail.invalid": "عنوان بريد إلكتروني غير صحيح",
    "dateOfBirth.format": "يوم/شهر/سنة",
-    "dateOfBirth.invalid": "يجب ألا يقل عمرك عن 18 عامًا",
+    "dateOfBirth.invalid": "أدخل تاريخ ميلاد صحيح يشير إلى أن عمرك لا يقل عن 18 عامًا",
    "blik.confirmPayment": "افتح تطبيقك البنكي لتأكيد الدفع.",
    "blik.invalid": "أدخل 6 أرقام",
    "blik.code": "رمز مكون من 6 أرقام",
@@ -293,5 +293,9 @@
    "form.instruction": "جميع الحقول مطلوبة ما لم يتم وضع علامة خلاف ذلك.",
    "trustly.descriptor": "الدفع المصرفي الفوري",
    "trustly.description1": "ادفع مباشرة من أي من حساباتك المصرفية، مدعومًا بأمان على مستوى البنك",
-    "trustly.description2": "لا توجد حاجة للبطاقات أو تحميل التطبيقات أو التسجيل"
+    "trustly.description2": "لا توجد حاجة للبطاقات أو تحميل التطبيقات أو التسجيل",
+    "ancv.input.label": "تعريف ANCV الخاص بك",
+    "ancv.confirmPayment": "استخدم تطبيق ANCV الخاص بك لتأكيد الدفع.",
+    "ancv.form.instruction": "يعد تطبيق Cheque-Vacances ضروريًا للمصادقة على هذه المدفوعات.",
+    "ancv.beneficiaryId.invalid": "أدخل عنوان بريد إلكتروني صحيحًا أو معرف ANCV"
 }
--- a/packages/lib/src/language/locales/cs-CZ.json
+++ b/packages/lib/src/language/locales/cs-CZ.json
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Potvrďte platbu v aplikaci MB WAY",
    "shopperEmail.invalid": "Neplatná e-mailová adresa",
    "dateOfBirth.format": "DD/MM/RRRR",
-    "dateOfBirth.invalid": "Musí vám být alespoň 18 let",
+    "dateOfBirth.invalid": "Zadejte platné datum narození, ze kterého vyplývá, že je vám alespoň 18 let",
    "blik.confirmPayment": "Spusťte bankovní aplikaci a potvrďte platbu.",
    "blik.invalid": "Zadejte 6 čísel",
    "blik.code": "Šestimístný kód",
@@ -290,7 +290,8 @@
    "companyDetails.registrationNumber.invalid": "Zadejte registrační číslo",
    "consent.checkbox.invalid": "Musíte souhlasit se smluvními podmínkami",
    "form.instruction": "Všechna pole jsou povinná, pokud není uvedeno jinak.",
-    "trustly.descriptor": "Online bankovní platba",
-    "trustly.description1": "Plaťte přímo ze svého online bankovního účtu se zabezpečením na bankovní úrovni",
-    "trustly.description2": "Bez karet, bez stahování aplikací, bez registrace"
+    "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"
 }
--- a/packages/lib/src/language/locales/da-DK.json
+++ b/packages/lib/src/language/locales/da-DK.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Fødselsdato",
    "shopperEmail": "E-mailadresse",
    "gender": "Køn",
-    "gender.notselected": "Vælg et køn",
+    "gender.notselected": "Vælg dit køn",
    "male": "Mand",
    "female": "Kvinde",
    "billingAddress": "Faktureringsadresse",
@@ -160,7 +160,7 @@
    "mbway.confirmPayment": "Bekræft din betaling på appen MB WAY",
    "shopperEmail.invalid": "Ugyldig e-mailadresse",
    "dateOfBirth.format": "DD/MM/ÅÅÅÅ",
-    "dateOfBirth.invalid": "Du skal være mindst 18 år",
+    "dateOfBirth.invalid": "Indtast en gyldig fødselsdato, der viser, at du er mindst 18 år gammel",
    "blik.confirmPayment": "Åbn din bankapp for at bekræfte betalingen.",
    "blik.invalid": "Indtast 6 tal",
    "blik.code": "6-cifret kode",
@@ -291,7 +291,8 @@
    "companyDetails.registrationNumber.invalid": "Indtast registreringsnummeret",
    "consent.checkbox.invalid": "Du skal acceptere vilkår og betingelser",
    "form.instruction": "Alle felter er obligatoriske, medmindre andet er markeret.",
-    "trustly.descriptor": "Direkte netbanksbetalinger",
-    "trustly.description1": "Betal nemt fra din ønskede bankkonto, med sikker verifikation via dit NemID eller biometrics",
-    "trustly.description2": "Ingen kort, ingen download af apps, og ingen registrering"
+    "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"
 }
--- a/packages/lib/src/language/locales/de-DE.json
+++ b/packages/lib/src/language/locales/de-DE.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Geburtsdatum",
    "shopperEmail": "E-Mail-Adresse",
    "gender": "Geschlecht",
-    "gender.notselected": "Wählen Sie ein Geschlecht aus",
+    "gender.notselected": "Wählen Sie Ihr Geschlecht",
    "male": "Männlich",
    "female": "Weiblich",
    "billingAddress": "Rechnungsadresse",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Bestätigen Sie Ihre Zahlung in der MB WAY-App",
    "shopperEmail.invalid": "Ungültige E-Mail-Adresse",
    "dateOfBirth.format": "TT.MM.JJJJ",
-    "dateOfBirth.invalid": "Sie müssen mindestens 18 Jahre alt sein",
+    "dateOfBirth.invalid": "Geben Sie ein gültiges Geburtsdatum ein, das angibt, dass Sie mindestens 18 Jahre alt sind.",
    "blik.confirmPayment": "Öffnen Sie Ihre Banking-App, um die Zahlung zu bestätigen.",
    "blik.invalid": "6 Zahlen eingeben",
    "blik.code": "6-stelliger Code",
@@ -290,7 +290,8 @@
    "companyDetails.registrationNumber.invalid": "Geben Sie die Registrierungsnummer ein",
    "consent.checkbox.invalid": "Sie müssen den Geschäftsbedingungen zustimmen",
    "form.instruction": "Alle Felder sind Pflichtfelder, sofern nicht anders gekennzeichnet.",
-    "trustly.descriptor": "Online Direktüberweisung",
-    "trustly.description1": "Sichere Bezahlmethode via Online Banking oder auch Mobile Banking",
-    "trustly.description2": "Ohne Karten, App-Download oder Registrierung"
+    "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"
 }
--- a/packages/lib/src/language/locales/el-GR.json
+++ b/packages/lib/src/language/locales/el-GR.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Ημερομηνία γέννησης",
    "shopperEmail": "Διεύθυνση email",
    "gender": "Φύλο",
-    "gender.notselected": "Επιλέξτε φύλο",
+    "gender.notselected": "Επιλέξτε το φύλο σας",
    "male": "Άντρας",
    "female": "Γυναίκα",
    "billingAddress": "Διεύθυνση τιμολόγησης",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Επιβεβαιώστε την πληρωμή στην εφαρμογή MB WAY",
    "shopperEmail.invalid": "Μη έγκυρη διεύθυνση email",
    "dateOfBirth.format": "ΗΗ/ΜΜ/ΕΕΕΕ",
-    "dateOfBirth.invalid": "Πρέπει να είστε τουλάχιστον 18 ετών",
+    "dateOfBirth.invalid": "Πληκτρολογήστε έγκυρη ημερομηνία γέννησης που υποδηλώνει ότι είστε ηλικίας τουλάχιστον 18 ετών",
    "blik.confirmPayment": "Ανοίξτε την εφαρμογή τραπεζικής σας για να επιβεβαιώσετε την πληρωμή.",
    "blik.invalid": "Εισαγάγετε 6 ψηφία",
    "blik.code": "6ψήφιος κωδικός",
@@ -292,5 +292,9 @@
    "form.instruction": "Όλα τα πεδία είναι υποχρεωτικά, εκτός εάν επισημαίνεται διαφορετικά.",
    "trustly.descriptor": "Άμεση τραπεζική πληρωμή",
    "trustly.description1": "Πληρώστε απευθείας από οποιονδήποτε τραπεζικό λογαριασμό σας, με ασφάλεια τραπεζικού επιπέδου",
-    "trustly.description2": "Χωρίς κάρτες, χωρίς λήψη εφαρμογής, χωρίς εγγραφή"
+    "trustly.description2": "Χωρίς κάρτες, χωρίς λήψη εφαρμογής, χωρίς εγγραφή",
+    "ancv.input.label": "Η ταυτότητά σας ANCV",
+    "ancv.confirmPayment": "Χρησιμοποιήστε την εφαρμογή ANCV για επιβεβαίωση της πληρωμής.",
+    "ancv.form.instruction": "Η εφαρμογή Cheque-Vacances είναι απαραίτητη για επικύρωση της πληρωμής αυτής.",
+    "ancv.beneficiaryId.invalid": "Εισαγάγετε έγκυρη διεύθυνση email ή αναγνωριστικό ANCV"
 }
--- a/packages/lib/src/language/locales/en-US.json
+++ b/packages/lib/src/language/locales/en-US.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Date of birth",
    "shopperEmail": "Email address",
    "gender": "Gender",
-    "gender.notselected": "Select a gender",
+    "gender.notselected": "Select your gender",
    "male": "Male",
    "female": "Female",
    "billingAddress": "Billing address",
@@ -160,7 +160,7 @@
    "mbway.confirmPayment": "Confirm your payment on the MB WAY app",
    "shopperEmail.invalid": "Invalid email address",
    "dateOfBirth.format": "DD/MM/YYYY",
-    "dateOfBirth.invalid": "You must be at least 18 years old",
+    "dateOfBirth.invalid": "Enter a valid date of birth that indicates you are at least 18 years old",
    "blik.confirmPayment": "Open your banking app to confirm the payment.",
    "blik.invalid": "Enter 6 numbers",
    "blik.code": "6-digit code",
@@ -294,5 +294,9 @@
    "form.instruction": "All fields are required unless marked otherwise.",
    "trustly.descriptor": "Instant Bank Payment",
    "trustly.description1": "Pay directly from any of your bank accounts, backed by bank-level security",
-    "trustly.description2": "No cards, no app download, no registration"
+    "trustly.description2": "No cards, no app download, no registration",
+    "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"
 }
--- a/packages/lib/src/language/locales/es-ES.json
+++ b/packages/lib/src/language/locales/es-ES.json
@@ -64,7 +64,7 @@
    "dateOfBirth": "Fecha de nacimiento",
    "shopperEmail": "Dirección de correo electrónico",
    "gender": "Género",
-    "gender.notselected": "Seleccione un género",
+    "gender.notselected": "Seleccione su género",
    "male": "Masculino",
    "female": "Femenino",
    "billingAddress": "Dirección de facturación",
@@ -156,7 +156,7 @@
    "mbway.confirmPayment": "Confirme su pago en la aplicación MB WAY",
    "shopperEmail.invalid": "La dirección de correo electrónico no es válida",
    "dateOfBirth.format": "DD/MM/AAAA",
-    "dateOfBirth.invalid": "Debe ser mayor de 18 años",
+    "dateOfBirth.invalid": "Introduzca una fecha de nacimiento válida que indique que tiene al menos 18 años",
    "blik.confirmPayment": "Abra la aplicación de su banco para confirmar el pago.",
    "blik.invalid": "Introduzca 6 dígitos",
    "blik.code": "Código de 6 dígitos",
@@ -285,7 +285,8 @@
    "companyDetails.registrationNumber.invalid": "Introduzca el número de registro",
    "consent.checkbox.invalid": "Debe aceptar los términos y condiciones",
    "form.instruction": "Todos los campos son obligatorios a menos que se indique lo contrario.",
-    "trustly.descriptor": "Pago bancario instantáneo",
-    "trustly.description1": "Pague directamente desde su cuenta bancaria preferida, respaldado por seguridad a nivel bancario",
-    "trustly.description2": "Sin tarjetas, sin descarga de aplicaciones, sin registro"
+    "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"
 }
--- a/packages/lib/src/language/locales/fi-FI.json
+++ b/packages/lib/src/language/locales/fi-FI.json
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Vahvista maksusi MB WAY -sovelluksella",
    "shopperEmail.invalid": "Ei-kelvollinen sähköpostiosoite",
    "dateOfBirth.format": "PP/KK/VVVV",
-    "dateOfBirth.invalid": "Sinun on oltava vähintään 18-vuotias",
+    "dateOfBirth.invalid": "Anna kelvollinen syntymäaika, joka osoittaa, että olet vähintään 18-vuotias",
    "blik.confirmPayment": "Avaa pankkisovelluksesi vahvistaaksesi maksun.",
    "blik.invalid": "Syötä 6 lukua",
    "blik.code": "6-numeroinen koodi",
@@ -290,7 +290,8 @@
    "companyDetails.registrationNumber.invalid": "Syötä rekisterinumero",
    "consent.checkbox.invalid": "Sinun on hyväksyttävä käyttöehdot",
    "form.instruction": "Kaikki kentät ovat pakollisia, ellei toisin ole merkitty.",
-    "trustly.descriptor": "Verkkopankki",
-    "trustly.description1": "Maksat haluamaltasi tililtä turvallisest",
-    "trustly.description2": "Ei kortteja, ei sovelluksia, ei rekisteröitymistä"
+    "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"
 }
--- a/packages/lib/src/language/locales/fr-FR.json
+++ b/packages/lib/src/language/locales/fr-FR.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Date de naissance",
    "shopperEmail": "Adresse e-mail",
    "gender": "Sexe",
-    "gender.notselected": "Sélectionnez un sexe",
+    "gender.notselected": "Sélectionnez votre sexe",
    "male": "Homme",
    "female": "Femme",
    "billingAddress": "Adresse de facturation",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Confirmez votre paiement sur l'application MB WAY",
    "shopperEmail.invalid": "Adresse e-mail incorrecte",
    "dateOfBirth.format": "JJ/MM/AAAA",
-    "dateOfBirth.invalid": "Vous devez être âgé(e) d'au moins 18 ans",
+    "dateOfBirth.invalid": "Saisissez une date de naissance valide indiquant que vous avez au moins 18 ans",
    "blik.confirmPayment": "Ouvrez votre application bancaire pour confirmer le paiement.",
    "blik.invalid": "Saisissez les 6 chiffres",
    "blik.code": "Code à 6 chiffres",
@@ -292,5 +292,9 @@
    "form.instruction": "Tous les champs sont obligatoires, sauf indication contraire.",
    "trustly.descriptor": "Paiement bancaire instantané",
    "trustly.description1": "Payez directement à partir de n'importe lequel de vos comptes bancaires, avec une sécurité de niveau bancaire",
-    "trustly.description2": "Aucune carte, aucun téléchargement d'application, aucune inscription"
+    "trustly.description2": "Aucune carte, aucun téléchargement d'application, aucune inscription",
+    "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"
 }
--- a/packages/lib/src/language/locales/hr-HR.json
+++ b/packages/lib/src/language/locales/hr-HR.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Datum rođenja",
    "shopperEmail": "Adresa e-pošte",
    "gender": "Spol",
-    "gender.notselected": "Odaberite spol",
+    "gender.notselected": "Odaberite svoj spol",
    "male": "Muškarac",
    "female": "Žena",
    "billingAddress": "Adresa za račun",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Potvrdite uplatu u aplikaciji MB WAY",
    "shopperEmail.invalid": "Nevažeća adresa e-pošte",
    "dateOfBirth.format": "DD/MM/GGGG",
-    "dateOfBirth.invalid": "Morate imati najmanje 18 godina",
+    "dateOfBirth.invalid": "Unesite važeći datum rođenja koji pokazuje da imate najmanje 18 godina",
    "blik.confirmPayment": "Otvorite svoju bankovnu aplikaciju kako biste potvrdili plaćanje.",
    "blik.invalid": "Unesite 6 znamenki",
    "blik.code": "6-znamenkasti kôd",
@@ -292,5 +292,9 @@
    "form.instruction": "Sva su polja obavezna, osim ako nije drugačije označeno.",
    "trustly.descriptor": "Trenutačno bankovno plaćanje",
    "trustly.description1": "Plaćajte izravno s bilo kojeg od svojih bankovnih računa, uz sigurnost na razini banke",
-    "trustly.description2": "Bez kartica, bez preuzimanja aplikacija, bez registracije"
+    "trustly.description2": "Bez kartica, bez preuzimanja aplikacija, bez registracije",
+    "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"
 }
--- a/packages/lib/src/language/locales/hu-HU.json
+++ b/packages/lib/src/language/locales/hu-HU.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Születési dátum",
    "shopperEmail": "E-mail-cím",
    "gender": "Nem",
-    "gender.notselected": "Válasszon nemet",
+    "gender.notselected": "Válassza ki a nemét",
    "male": "Férfi",
    "female": "Nő",
    "billingAddress": "Számlázási cím",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Fizetés jóváhagyása az MB WAY alkalmazásban",
    "shopperEmail.invalid": "Érvénytelen e-mail-cím",
    "dateOfBirth.format": "NN/HH/ÉÉÉÉ",
-    "dateOfBirth.invalid": "Legalább 18 évesnek kell lennie",
+    "dateOfBirth.invalid": "Adjon meg egy érvényes születési dátumot, amelyből kiderül, hogy elmúlt 18 éves",
    "blik.confirmPayment": "A fizetés jóváhagyásához nyissa meg a banki alkalmazást.",
    "blik.invalid": "Adjon meg 6 számjegyet",
    "blik.code": "6 számjegyű kód",
@@ -292,5 +292,9 @@
    "form.instruction": "Minden mező kitöltése kötelező, hacsak nincs másképp jelölve.",
    "trustly.descriptor": "Azonnali banki fizetés",
    "trustly.description1": "Fizessen közvetlenül bármelyik bankszámlájáról, banki szintű biztonság mellett",
-    "trustly.description2": "Nincs szükség kártyára, alkalmazás letöltésére és regisztrációra"
+    "trustly.description2": "Nincs szükség kártyára, alkalmazás letöltésére és regisztrációra",
+    "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"
 }
--- a/packages/lib/src/language/locales/it-IT.json
+++ b/packages/lib/src/language/locales/it-IT.json
@@ -64,7 +64,7 @@
    "dateOfBirth": "Data di nascita",
    "shopperEmail": "Indirizzo e-mail",
    "gender": "Sesso",
-    "gender.notselected": "Seleziona un genere",
+    "gender.notselected": "Seleziona il tuo sesso",
    "male": "Uomo",
    "female": "Donna",
    "billingAddress": "Indirizzo di fatturazione",
@@ -157,7 +157,7 @@
    "mbway.confirmPayment": "Conferma il pagamento con l'app MB WAY",
    "shopperEmail.invalid": "Indirizzo e-mail non valido",
    "dateOfBirth.format": "GG/MM/AAAA",
-    "dateOfBirth.invalid": "Devi avere almeno 18 anni",
+    "dateOfBirth.invalid": "Inserisci una data di nascita valida in cui risulti che hai almeno 18 anni.",
    "blik.confirmPayment": "Apri l'app della tua banca per confermare il pagamento.",
    "blik.invalid": "Inserisci 6 numeri",
    "blik.code": "Codice a 6 cifre",
@@ -290,5 +290,9 @@
    "form.instruction": "Se non diversamente indicato, tutti i campi sono obbligatori.",
    "trustly.descriptor": "Pagamento bancario istantaneo",
    "trustly.description1": "Paga direttamente da uno qualsiasi dei tuoi conti bancari, garantito da una sicurezza di livello bancario",
-    "trustly.description2": "Nessuna carta, nessun download di app, nessuna registrazione"
+    "trustly.description2": "Nessuna carta, nessun download di app, nessuna registrazione",
+    "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"
 }
--- a/packages/lib/src/language/locales/ja-JP.json
+++ b/packages/lib/src/language/locales/ja-JP.json
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "MB WAYアプリで支払を確認する",
    "shopperEmail.invalid": "Eメールアドレスが無効です",
    "dateOfBirth.format": "DD/MM/YYYY",
-    "dateOfBirth.invalid": "18歳以上の方のみご利用いただけます",
+    "dateOfBirth.invalid": "18歳以上であることを示す有効な生年月日を入力してください",
    "blik.confirmPayment": "バンキングアプリを開いて、支払を確認してください。",
    "blik.invalid": "6つの数字を入力してください",
    "blik.code": "6桁のコード",
@@ -292,5 +292,9 @@
    "form.instruction": "特に明記されていない限り、すべてのフィールドは必須です。",
    "trustly.descriptor": "即時銀行支払",
    "trustly.description1": "ご利用の銀行口座から直接お支払い可能（銀行レベルのセキュリティで保護されています）",
-    "trustly.description2": "カードなし、アプリのダウンロードなし、登録なし"
+    "trustly.description2": "カードなし、アプリのダウンロードなし、登録なし",
+    "ancv.input.label": "ANCV ID",
+    "ancv.confirmPayment": "ANCVアプリケーションを使用して、支払を確認してください。",
+    "ancv.form.instruction": "この支払を検証するには、Cheque-Vacancesアプリケーションが必要です。",
+    "ancv.beneficiaryId.invalid": "有効なメールアドレスまたはANCV IDを入力してください"
 }
--- a/packages/lib/src/language/locales/ko-KR.json
+++ b/packages/lib/src/language/locales/ko-KR.json
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "MB WAY 앱에서 결제를 확인하십시오",
    "shopperEmail.invalid": "유효하지 않은 이메일 주소",
    "dateOfBirth.format": "DD(일)/MM(월)/YYYY(연도)",
-    "dateOfBirth.invalid": "최소 18세 이상이어야 합니다",
+    "dateOfBirth.invalid": "만 18세 이상임을 나타내는 유효한 생년월일을 입력합니다.",
    "blik.confirmPayment": "뱅킹 앱을 열어서 결제를 확인하세요.",
    "blik.invalid": "6자리 숫자 입력",
    "blik.code": "6자리 코드",
@@ -292,5 +292,9 @@
    "form.instruction": "별도로 표시되어 있지 않는 한 모든 필드는 필수입니다.",
    "trustly.descriptor": "즉시 은행 결제",
    "trustly.description1": "은행 수준의 보안이 지원되는 은행 계좌에서 직접 결제하세요.",
-    "trustly.description2": "카드, 앱 다운로드, 등록 필요 없음"
+    "trustly.description2": "카드, 앱 다운로드, 등록 필요 없음",
+    "ancv.input.label": "나의 ANCV ID",
+    "ancv.confirmPayment": "ANCV 애플리케이션을 사용해 결제를 확인하세요.",
+    "ancv.form.instruction": "이 결제를 인증하려면 Cheque-Vacances 애플리케이션이 필요합니다.",
+    "ancv.beneficiaryId.invalid": "유효한 이메일 주소나 ANCV ID를 입력하세요."
 }
--- a/packages/lib/src/language/locales/nl-NL.json
+++ b/packages/lib/src/language/locales/nl-NL.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Geboortedatum",
    "shopperEmail": "E-mailadres",
    "gender": "Geslacht",
-    "gender.notselected": "Selecteer een gender",
+    "gender.notselected": "Selecteer uw geslacht",
    "male": "Man",
    "female": "Vrouw",
    "billingAddress": "Factuuradres",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Bevestig uw betaling via de MB WAY-app",
    "shopperEmail.invalid": "Ongeldig e-mailadres",
    "dateOfBirth.format": "DD/MM/JJJJ",
-    "dateOfBirth.invalid": "U moet minimaal 18 jaar oud zijn",
+    "dateOfBirth.invalid": "Voer een geldige geboortedatum in die aangeeft dat u ten minste 18 jaar oud bent",
    "blik.confirmPayment": "Open uw bankapp om de betaling te bevestigen.",
    "blik.invalid": "Voer 6 cijfers in",
    "blik.code": "6-cijferige code",
@@ -290,7 +290,8 @@
    "companyDetails.registrationNumber.invalid": "Voer het registratienummer in",
    "consent.checkbox.invalid": "Je moet akkoord gaan met de algemene voorwaarden",
    "form.instruction": "Alle velden zijn verplicht, tenzij anders aangegeven.",
-    "trustly.descriptor": "Directe bankbetaling",
-    "trustly.description1": "Betaal direct vanaf uw voorkeursbankrekening, ondersteund door beveiliging op het niveau van de bank ",
-    "trustly.description2": "Geen kaarten, geen app-download, geen registratie"
+    "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"
 }
--- a/packages/lib/src/language/locales/no-NO.json
+++ b/packages/lib/src/language/locales/no-NO.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Fødselsdato",
    "shopperEmail": "E-postadresse",
    "gender": "Kjønn",
-    "gender.notselected": "Velg et kjønn",
+    "gender.notselected": "Velg kjønn",
    "male": "Mann",
    "female": "Kvinne",
    "billingAddress": "Faktureringsadresse",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Bekreft betalingen din i MB WAY-appen",
    "shopperEmail.invalid": "Ugyldig e-postadresse",
    "dateOfBirth.format": "DD/MM/ÅÅÅÅ",
-    "dateOfBirth.invalid": "Du må være minst 18 år gammel",
+    "dateOfBirth.invalid": "Skriv inn en gyldig fødselsdato som viser at du er minst 18 år gammel",
    "blik.confirmPayment": "Åpne bank-appen din for å bekrefte betalingen.",
    "blik.invalid": "Tast inn 6 tall",
    "blik.code": "6-sifret kode",
@@ -290,7 +290,8 @@
    "companyDetails.registrationNumber.invalid": "Angi registreringsnummeret",
    "consent.checkbox.invalid": "Du må godta vilkårene",
    "form.instruction": "Alle felt er obligatoriske med mindre annet er angitt.",
-    "trustly.descriptor": "Direkte bankbetaling",
-    "trustly.description1": "Betal enkelt fra ønsket bankkonto, støttet av sikkerhet på banknivå",
-    "trustly.description2": "Ingen kort, ingen appnedlasting, ingen registrering"
+    "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"
 }
--- a/packages/lib/src/language/locales/pl-PL.json
+++ b/packages/lib/src/language/locales/pl-PL.json
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Potwierdź płatność w aplikacji MB WAY",
    "shopperEmail.invalid": "Niepoprawny adres email",
    "dateOfBirth.format": "DD/MM/RRRR",
-    "dateOfBirth.invalid": "Musisz mieć co najmniej 18 lat",
+    "dateOfBirth.invalid": "Podaj prawidłową datę urodzenia, świadczącą o przekroczeniu 18 roku życia.",
    "blik.confirmPayment": "Otwórz aplikację bankową, aby potwierdzić płatność.",
    "blik.invalid": "Wpisz 6 cyfr",
    "blik.code": "6-cyfrowy kod",
@@ -242,7 +242,7 @@
    "upi.vpaWaitingMessage": "Otwórz aplikację UPI, aby potwierdzić płatność",
    "upi.modeSelection": "Dokonaj wyboru sposobu korzystania z UPI.",
    "onlineBanking.termsAndConditions": "Kontynuując, zgadzasz się z %#Warunkami świadczenia usług%#.",
-    "onlineBankingPL.termsAndConditions": "Kontynuując, akceptujesz %#regulations%# oraz %#information obligation%# firmy Przelewy24",
+    "onlineBankingPL.termsAndConditions": "Kontynuując, akceptujesz %#przepisy%# oraz %#obowiązek informacyjny%# firmy Przelewy24",
    "ctp.loading.poweredByCtp": "Działa w oparciu o usługę Click to Pay",
    "ctp.loading.intro": "Sprawdzamy, czy masz zapisane karty Click to Pay...",
    "ctp.login.title": "Przejdź do Click to Pay",
@@ -292,5 +292,9 @@
    "form.instruction": "Wszystkie pola są wymagane, chyba że zaznaczono inaczej.",
    "trustly.descriptor": "Błyskawiczna płatność bankowa",
    "trustly.description1": "Płać bezpośrednio z dowolnego rachunku bankowego, korzystając z zabezpieczeń na poziomie bankowym",
-    "trustly.description2": "Bez kart, bez pobierania aplikacji, bez rejestracji"
+    "trustly.description2": "Bez kart, bez pobierania aplikacji, bez rejestracji",
+    "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"
 }
--- a/packages/lib/src/language/locales/pt-BR.json
+++ b/packages/lib/src/language/locales/pt-BR.json
@@ -64,7 +64,7 @@
    "dateOfBirth": "Data de nascimento",
    "shopperEmail": "Endereço de e-mail",
    "gender": "Gênero",
-    "gender.notselected": "Selecione um gênero",
+    "gender.notselected": "Selecione seu gênero",
    "male": "Masculino",
    "female": "Feminino",
    "billingAddress": "Endereço de cobrança",
@@ -156,7 +156,7 @@
    "mbway.confirmPayment": "Confirme seu pagamento no aplicativo MB WAY",
    "shopperEmail.invalid": "Endereço de e-mail inválido",
    "dateOfBirth.format": "DD/MM/AAAA",
-    "dateOfBirth.invalid": "Você deve ter pelo menos 18 anos",
+    "dateOfBirth.invalid": "Insira uma data de nascimento válida que indique que você tem pelo menos 18 anos",
    "blik.confirmPayment": "Abra o aplicativo do seu banco para confirmar o pagamento.",
    "blik.invalid": "Digite 6 números",
    "blik.code": "Código de 6 dígitos",
@@ -290,5 +290,9 @@
    "form.instruction": "Todos os campos são obrigatórios, a menos que marcados em contrário.",
    "trustly.descriptor": "Pagamento instantâneo",
    "trustly.description1": "Pague diretamente de qualquer conta, com a segurança do seu banco",
-    "trustly.description2": "Sem cartão, sem download de aplicativo, sem cadastro"
+    "trustly.description2": "Sem cartão, sem download de aplicativo, sem cadastro",
+    "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"
 }
--- a/packages/lib/src/language/locales/pt-PT.json
+++ b/packages/lib/src/language/locales/pt-PT.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Data de nascimento",
    "shopperEmail": "Endereço de correio eletrónico",
    "gender": "Género",
-    "gender.notselected": "Selecione um género",
+    "gender.notselected": "Selecione o seu género",
    "male": "Homem",
    "female": "Feminino",
    "billingAddress": "Morada de cobrança",
@@ -160,7 +160,7 @@
    "mbway.confirmPayment": "Confirme o seu pagamento na aplicação MB WAY",
    "shopperEmail.invalid": "Endereço de e-mail inválido",
    "dateOfBirth.format": "DD/MM/AAAA",
-    "dateOfBirth.invalid": "Deve ter pelo menos 18 anos",
+    "dateOfBirth.invalid": "Insira uma data de nascimento válida que indique que tem pelo menos 18 anos",
    "blik.confirmPayment": "Abra a sua aplicação bancária para confirmar o pagamento.",
    "blik.invalid": "Digite 6 números",
    "blik.code": "Código de 6 dígitos",
@@ -294,5 +294,9 @@
    "form.instruction": "Todos os campos são obrigatórios, a menos que assinalados em contrário.",
    "trustly.descriptor": "Pagamento bancário instantâneo",
    "trustly.description1": "Pague diretamente a partir de qualquer uma das suas contas bancárias, com a segurança de um banco",
-    "trustly.description2": "Sem cartões, sem transferir aplicações, sem registo"
+    "trustly.description2": "Sem cartões, sem transferir aplicações, sem registo",
+    "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"
 }
--- a/packages/lib/src/language/locales/ro-RO.json
+++ b/packages/lib/src/language/locales/ro-RO.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Data nașterii",
    "shopperEmail": "Adresă de e-mail",
    "gender": "Gen",
-    "gender.notselected": "Selectați un gen",
+    "gender.notselected": "Selectați sexul dvs.",
    "male": "Bărbat",
    "female": "Femeie",
    "billingAddress": "Adresa de facturare",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Confirmați plata în aplicația MB WAY",
    "shopperEmail.invalid": "Adresă de e-mail incorectă",
    "dateOfBirth.format": "ZZ/LL/AAAA",
-    "dateOfBirth.invalid": "Trebuie să aveți minimum 18 ani",
+    "dateOfBirth.invalid": "Completați o dată de naștere valabilă care să indice că aveți cel puțin 18 ani.",
    "blik.confirmPayment": "Deschideți aplicația dvs. de banking pentru a confirma plata.",
    "blik.invalid": "Introduceți 6 cifre",
    "blik.code": "Cod din 6 cifre",
@@ -292,5 +292,9 @@
    "form.instruction": "Toate câmpurile sunt obligatorii, numai dacă nu este marcat altfel.",
    "trustly.descriptor": "Plată bancară instantanee",
    "trustly.description1": "Plătiți direct din oricare dintre conturile dvs. bancare, cu sprijinul unei securități de nivel bancar",
-    "trustly.description2": "Fără carduri, fără descărcări de aplicații, fără înregistrare"
+    "trustly.description2": "Fără carduri, fără descărcări de aplicații, fără înregistrare",
+    "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"
 }
--- a/packages/lib/src/language/locales/ru-RU.json
+++ b/packages/lib/src/language/locales/ru-RU.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Дата рождения",
    "shopperEmail": "Адрес эл. почты",
    "gender": "Пол",
-    "gender.notselected": "Выберите пол",
+    "gender.notselected": "Укажите свой пол",
    "male": "Мужчина",
    "female": "Женщина",
    "billingAddress": "Платежный адрес",
@@ -158,7 +158,7 @@
    "mbway.confirmPayment": "Подтвердите оплату в приложении MB WAY",
    "shopperEmail.invalid": "Недействительный адрес эл. почты",
    "dateOfBirth.format": "ДД/ММ/ГГГГ",
-    "dateOfBirth.invalid": "Вам должно быть 18 лет или больше",
+    "dateOfBirth.invalid": "Введите правильную дату рождения. Вам должно быть не менее 18 лет.",
    "blik.confirmPayment": "Для подтверждения оплаты откройте приложение банка.",
    "blik.invalid": "Введите 6 цифр",
    "blik.code": "6-значный код",
@@ -289,5 +289,9 @@
    "form.instruction": "Все поля обязательны для заполнения, если не указано иное.",
    "trustly.descriptor": "Мгновенный банковский платеж",
    "trustly.description1": "Платите непосредственно со своего банковского счета под такой же надежной защитой, как в банках",
-    "trustly.description2": "Без карт, загрузки приложений и регистрации"
+    "trustly.description2": "Без карт, загрузки приложений и регистрации",
+    "ancv.input.label": "Ваш идентификатор ANCV",
+    "ancv.confirmPayment": "Используйте приложение ANCV для подтверждения платежа.",
+    "ancv.form.instruction": "Для подтверждения этого платежа необходимо приложение Cheque-Vacances.",
+    "ancv.beneficiaryId.invalid": "Введите действительный адрес электронной почты или идентификатор ANCV"
 }
--- a/packages/lib/src/language/locales/sk-SK.json
+++ b/packages/lib/src/language/locales/sk-SK.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Dátum narodenia",
    "shopperEmail": "E-mailová adresa",
    "gender": "Pohlavie",
-    "gender.notselected": "Vyberte pohlavie",
+    "gender.notselected": "Vyberte rod, s ktorým sa stotožňujete",
    "male": "Muž",
    "female": "Žena",
    "billingAddress": "Fakturačná adresa",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Potvrďte svoju platbu v aplikácii MB WAY",
    "shopperEmail.invalid": "Neplatná emailová adresa",
    "dateOfBirth.format": "DD/MM/RRRR",
-    "dateOfBirth.invalid": "Musíte mať aspoň 18 rokov",
+    "dateOfBirth.invalid": "Zadajte platný dátum narodenia, ktorý uvádza, že máte aspoň 18 rokov",
    "blik.confirmPayment": "Otvorte svoju bankovú aplikáciu a potvrďte platbu.",
    "blik.invalid": "Zadajte 6 číslic",
    "blik.code": "6-ciferný kód",
@@ -292,5 +292,9 @@
    "form.instruction": "Všetky polia sú povinné, ak nie je označené inak.",
    "trustly.descriptor": "Okamžitá banková platba",
    "trustly.description1": "Platba priamo z ktoréhokoľvek bankového účtu so zabezpečením na úrovni banky",
-    "trustly.description2": "Žiadne karty, žiadne sťahovanie aplikácií, žiadna registrácia"
+    "trustly.description2": "Žiadne karty, žiadne sťahovanie aplikácií, žiadna registrácia",
+    "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"
 }
--- a/packages/lib/src/language/locales/sl-SI.json
+++ b/packages/lib/src/language/locales/sl-SI.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Datum rojstva",
    "shopperEmail": "Elektronski naslov",
    "gender": "Spol",
-    "gender.notselected": "Izberite spol",
+    "gender.notselected": "Izberite svoj spol",
    "male": "Moški",
    "female": "Ženski",
    "billingAddress": "Naslov za račun",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Potrdite svoje plačilo v aplikaciji MB WAY",
    "shopperEmail.invalid": "Neveljaven elektronski naslov",
    "dateOfBirth.format": "DD/MM/LLLL",
-    "dateOfBirth.invalid": "Imeti morate najmanj 18 let",
+    "dateOfBirth.invalid": "Vnesite veljaven datum rojstva, ki kaže, da ste stari vsaj 18 let.",
    "blik.confirmPayment": "Za potrditev plačila odprite svojo bančno aplikacijo.",
    "blik.invalid": "Vnesite 6 številk",
    "blik.code": "6-mestna koda",
@@ -292,5 +292,9 @@
    "form.instruction": "Vsa polja so obvezna, razen če ni označeno drugače.",
    "trustly.descriptor": "Takojšnje bančno nakazilo",
    "trustly.description1": "Plačajte neposredno s svojega poljubnega bančnega računa, pri čemer je varnost zagotovljena na ravni banke.",
-    "trustly.description2": "Brez kartic, brez prenosa aplikacije, brez registracije"
+    "trustly.description2": "Brez kartic, brez prenosa aplikacije, brez registracije",
+    "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"
 }
--- a/packages/lib/src/language/locales/sv-SE.json
+++ b/packages/lib/src/language/locales/sv-SE.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "Födelsedatum",
    "shopperEmail": "E-postadress",
    "gender": "Kön",
-    "gender.notselected": "Välj ett kön",
+    "gender.notselected": "Välj kön",
    "male": "Man",
    "female": "Kvinna",
    "billingAddress": "Faktureringsadress",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "Bekräfta din betalning i appen MB WAY",
    "shopperEmail.invalid": "Ogiltig e-postadress",
    "dateOfBirth.format": "DD/MM/ÅÅÅÅ",
-    "dateOfBirth.invalid": "Du måste vara minst 18 år",
+    "dateOfBirth.invalid": "Ange ett giltigt födelsedatum som visar att du är minst 18 år gammal",
    "blik.confirmPayment": "Öppna din bankapp för att bekräfta betalningen.",
    "blik.invalid": "Ange 6 siffror",
    "blik.code": "Sexsiffrig kod",
@@ -290,7 +290,8 @@
    "companyDetails.registrationNumber.invalid": "Ange registreringsnumret",
    "consent.checkbox.invalid": "Du måste godkänna villkoren",
    "form.instruction": "Alla fält är obligatoriska om inte något annat anges.",
-    "trustly.descriptor": "Direkt bankbetalning",
-    "trustly.description1": "Betala enkelt från ditt önskade bankkonto, med säker verifiering via ditt BankID",
-    "trustly.description2": "Inget kort, ingen appnedladdning, ingen registrering"
+    "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"
 }
--- a/packages/lib/src/language/locales/zh-CN.json
+++ b/packages/lib/src/language/locales/zh-CN.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "出生日期",
    "shopperEmail": "电子邮件地址",
    "gender": "性别",
-    "gender.notselected": "选择性别",
+    "gender.notselected": "选择您的性别",
    "male": "男",
    "female": "女",
    "billingAddress": "账单地址",
@@ -158,7 +158,7 @@
    "mbway.confirmPayment": "在 MB WAY 应用上确认您的付款",
    "shopperEmail.invalid": "无效的邮件地址",
    "dateOfBirth.format": "DD/MM/YYYY",
-    "dateOfBirth.invalid": "您必须年满 18 周岁",
+    "dateOfBirth.invalid": "请输入有效出生日期，表明您已年满 18 岁",
    "blik.confirmPayment": "打开您的银行应用以确认支付。",
    "blik.invalid": "输入 6 位数",
    "blik.code": "6 位数代码",
@@ -291,5 +291,9 @@
    "form.instruction": "除非另有标记，否则所有字段均为必填项。",
    "trustly.descriptor": "即时银行付款",
    "trustly.description1": "直接从您的任何银行账户付款，并配备银行级安全保障",
-    "trustly.description2": "无需卡片，无需下载应用，无需注册"
+    "trustly.description2": "无需卡片，无需下载应用，无需注册",
+    "ancv.input.label": "您的 ANCV 身份证明",
+    "ancv.confirmPayment": "使用您的 ANCV 应用以确认付款。",
+    "ancv.form.instruction": "要验证这笔付款，必须使用 Checke-Vacances 应用。",
+    "ancv.beneficiaryId.invalid": "输入有效的电子邮件地址或 ANCV ID"
 }
--- a/packages/lib/src/language/locales/zh-TW.json
+++ b/packages/lib/src/language/locales/zh-TW.json
@@ -66,7 +66,7 @@
    "dateOfBirth": "出生日期",
    "shopperEmail": "電子郵件地址",
    "gender": "性別",
-    "gender.notselected": "選取性別",
+    "gender.notselected": "選擇您的性別",
    "male": "男",
    "female": "女",
    "billingAddress": "帳單地址",
@@ -159,7 +159,7 @@
    "mbway.confirmPayment": "在 MB WAY 應用程式上確認您的付款",
    "shopperEmail.invalid": "電子郵件地址無效",
    "dateOfBirth.format": "日／月／年",
-    "dateOfBirth.invalid": "您必須年滿 18 歲",
+    "dateOfBirth.invalid": "輸入表明您至少年滿 18 歲的有效出生日期",
    "blik.confirmPayment": "開啟您的銀行應用程式以確認付款。",
    "blik.invalid": "輸入 6 個數字",
    "blik.code": "6 位數代碼",
@@ -292,5 +292,9 @@
    "form.instruction": "除非另有標示，否則必須填寫所有欄位。",
    "trustly.descriptor": "即時銀行付款",
    "trustly.description1": "直接從任何銀行帳戶付款，並獲得銀行級別安全保障",
-    "trustly.description2": "無需卡，無需下載應用程式，無需註冊"
+    "trustly.description2": "無需卡，無需下載應用程式，無需註冊",
+    "ancv.input.label": "您的 ANCV 身分識別",
+    "ancv.confirmPayment": "使用您的 ANCV 應用程式確認付款。",
+    "ancv.form.instruction": "必須申請 Cheque-Vacances 才能驗證此付款。",
+    "ancv.beneficiaryId.invalid": "輸入有效的電子郵件地址或 ANCV ID"
 }
--- a/packages/lib/storybook/stories/components/ANCV.stories.tsx
+++ b/packages/lib/storybook/stories/components/ANCV.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/preact';
+import { PaymentMethodStoryProps } from '../types';
+import { getStoryContextCheckout } from '../../utils/get-story-context-checkout';
+import { Container } from '../Container';
+import { ANCVProps } from '../../../src/components/ANCV/ANCV';
+
+type ANCVStory = StoryObj<PaymentMethodStoryProps<ANCVProps>>;
+
+const meta: Meta<PaymentMethodStoryProps<ANCVProps>> = {
+    title: 'Components/ANCV'
+};
+
+export const ANCV: ANCVStory = {
+    render: (args, context) => {
+        const checkout = getStoryContextCheckout(context);
+        return <Container type={'ancv'} componentConfiguration={args.componentConfiguration} checkout={checkout} />;
+    },
+    args: {
+        countryCode: 'NL',
+        amount: 2000,
+        useSessions: false
+    }
+};
+export default meta;
--- a/packages/playground/src/pages/Dropin/manual.js
+++ b/packages/playground/src/pages/Dropin/manual.js
@@ -47,6 +47,15 @@ export async function initManual() {

            if (result.action) {
                component.handleAction(result.action);
+            } else if (result.order && result.order?.remainingAmount?.value > 0) {
+                // handle orders
+                const order = {
+                    orderData: result.order.orderData,
+                    pspReference: result.order.pspReference
+                };
+
+                const orderPaymentMethods = await getPaymentMethods({ order, amount, shopperLocale });
+                checkout.update({ paymentMethodsResponse: orderPaymentMethods, order, amount: result.order.remainingAmount });
            } else {
                handleFinalState(result.resultCode, component);
            }