Adyen · m1aw · Oct 11, 2023 · Aug 1, 2023 · Aug 7, 2023 · Aug 10, 2023
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+adds support for ANCV payment method
@@ -1,5 +1,5 @@
 node_modules/
 /test-results/
-/playwright-report/
+playwright-report/
 /playwright/.cache/
 screenshot.png
@@ -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')
             }
         })
     ],

@@ -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);
+        });
+}
@@ -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>
@@ -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();
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };
@@ -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 };