v6 - Synchronous submit with order tracking

packages/e2e-playwright/app/src/handlers.js

@@ -1,24 +1,11 @@
 import { makePayment, makeDetailsCall, createOrder } from './services';
 
-function removeComponent(component) {
-    component.remove();
-}
-
 export function showAuthorised(message = 'Authorised') {
     const resultElement = document.getElementById('result-message');
     resultElement.classList.remove('hide');
     resultElement.innerText = message;
 }
 
-export function handleResponse(response, component) {
-    if (response.action) {
-        component.handleAction(response.action, window.actionConfigObject || {});
-    } else if (response.resultCode) {
-        component.remove();
-        showAuthorised();
-    }
-}
-
 export function handleError(obj) {
     // SecuredField related errors should not go straight to console.error
     if (obj.type === 'card') {
@@ -28,28 +15,45 @@ export function handleError(obj) {
     }
 }
 
-export function handleSubmit(state, component) {
-    component.setStatus('loading');
+export async function handleSubmit(state, component, actions) {
+    try {
+        const { action, order, resultCode, donationToken } = await makePayment(state.data);
 
-    return makePayment(state.data)
-        .then(response => {
-            component.setStatus('ready');
-            handleResponse(response, component);
-        })
-        .catch(error => {
-            throw Error(error);
+        if (!resultCode) actions.reject();
+
+        actions.resolve({
+            resultCode,
+            action,
+            order,
+            donationToken
         });
+    } catch (error) {
+        console.error('## onSubmit - critical error', error);
+        actions.reject();
+    }
 }
 
-export function handleAdditionalDetails(details, component) {
-    return makeDetailsCall(details.data)
-        .then(response => {
-            component.setStatus('ready');
-            handleResponse(response, component);
-        })
-        .catch(error => {
-            throw Error(error);
+export async function handleAdditionalDetails(state, component, actions) {
+    try {
+        const { resultCode, action, order, donationToken } = await makeDetailsCall(state.data);
+
+        if (!resultCode) actions.reject();
+
+        actions.resolve({
+            resultCode,
+            action,
+            order,
+            donationToken
         });
+    } catch (error) {
+        console.error('## onAdditionalDetails - critical error', error);
+        actions.reject();
+    }
+}
+
+export function handlePaymentCompleted(data, component) {
+    component.remove();
+    showAuthorised();
 }
 
 export function handleOrderRequest(resolve, reject, data) {

packages/e2e-playwright/app/src/pages/ANCV/ANCV.js

@@ -1,6 +1,6 @@
 import { AdyenCheckout, ANCV } from '@adyen/adyen-web';
 import '@adyen/adyen-web/styles/adyen.css';
-import { handleError, showAuthorised } from '../../handlers';
+import { handleError, handlePaymentCompleted, showAuthorised } from '../../handlers';
 import { shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
 import { createSession } from '../../services';
@@ -27,7 +27,8 @@ const initCheckout = async () => {
         locale: shopperLocale,
         countryCode,
         showPayButton: true,
-        onOrderCreated: data => {
+        onPaymentCompleted: handlePaymentCompleted,
+        onOrderUpdated: data => {
             showAuthorised('Partially Authorised');
         },
         onError: handleError

packages/e2e-playwright/app/src/pages/Cards/Cards.js

@@ -1,6 +1,6 @@
 import { AdyenCheckout, Card } from '@adyen/adyen-web';
 import '@adyen/adyen-web/styles/adyen.css';
-import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
+import { handleSubmit, handleAdditionalDetails, handleError, handlePaymentCompleted } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
 
@@ -15,6 +15,7 @@ const initCheckout = async () => {
         showPayButton: true,
         onSubmit: handleSubmit,
         onAdditionalDetails: handleAdditionalDetails,
+        onPaymentCompleted: handlePaymentCompleted,
         onError: handleError,
         ...window.mainConfiguration
     });

packages/e2e-playwright/app/src/pages/CustomCards/CustomCards.js

@@ -1,10 +1,11 @@
 import { AdyenCheckout, CustomCard } from '@adyen/adyen-web';
 import '@adyen/adyen-web/styles/adyen.css';
-import { handleSubmit, handleAdditionalDetails } from '../../handlers';
+import { handleSubmit, handleAdditionalDetails, handlePaymentCompleted, showAuthorised } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
 import './customcards.style.scss';
 import { setFocus, onBrand, onConfigSuccess, onBinLookup, onChange } from './customCards.config';
+import { makePayment } from '../../services';
 
 const initCheckout = async () => {
     // window.TextEncoder = null; // Comment in to force use of "compat" version
@@ -15,8 +16,7 @@ const initCheckout = async () => {
         countryCode,
         environment: 'test',
         showPayButton: true,
-        onSubmit: handleSubmit,
-        onAdditionalDetails: handleAdditionalDetails,
+        onPaymentCompleted: handlePaymentCompleted,
         ...window.mainConfiguration
     });
 
@@ -56,7 +56,7 @@ const initCheckout = async () => {
         payBtn.setAttribute('data-testid', `pay-${attribute}`);
         payBtn.classList.add('adyen-checkout__button', 'js-components-button--one-click', `js-pay-${attribute}`);
 
-        payBtn.addEventListener('click', e => {
+        payBtn.addEventListener('click', async e => {
             e.preventDefault();
 
             console.log('### CustomCards::createPayButton:: click attribut', attribute);
@@ -70,7 +70,15 @@ const initCheckout = async () => {
             };
             component.state.data = { paymentMethod };
 
-            handleSubmit(component.state, component);
+            const response = await makePayment(component.state.data);
+            component.setStatus('ready');
+
+            if (response.action) {
+                component.handleAction(response.action, window.actionConfigObject || {});
+            } else if (response.resultCode) {
+                component.remove();
+                showAuthorised();
+            }
         });
 
         document.querySelector(parent).appendChild(payBtn);

packages/e2e-playwright/app/src/pages/Dropin/Dropin.js

@@ -2,7 +2,7 @@ import { AdyenCheckout, Dropin } from '@adyen/adyen-web/auto';
 import '@adyen/adyen-web/styles/adyen.css';
 import { getPaymentMethods } from '../../services';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
-import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
+import { handleSubmit, handleAdditionalDetails, handleError, handlePaymentCompleted } from '../../handlers';
 import '../../style.scss';
 
 const initCheckout = async () => {
@@ -19,6 +19,7 @@ const initCheckout = async () => {
         environment: 'test',
         onSubmit: handleSubmit,
         onAdditionalDetails: handleAdditionalDetails,
+        onPaymentCompleted: handlePaymentCompleted,
         onError: handleError,
         ...window.mainConfiguration
     });

packages/e2e-playwright/app/src/pages/IssuerLists/IssuerLists.js

@@ -1,6 +1,6 @@
 import { AdyenCheckout, Ideal } from '@adyen/adyen-web';
 import '@adyen/adyen-web/styles/adyen.css';
-import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
+import { handleSubmit, handleAdditionalDetails, handleError, handlePaymentCompleted } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
 import { getPaymentMethods } from '../../services';
@@ -24,6 +24,7 @@ const initCheckout = async () => {
         showPayButton: true,
         onSubmit: handleSubmit,
         onAdditionalDetails: handleAdditionalDetails,
+        onPaymentCompleted: handlePaymentCompleted,
         onError: handleError
         // ...window.mainConfiguration
     });

packages/e2e-playwright/tests/ancv/ancv.spec.ts

@@ -11,7 +11,7 @@ import { setupMock } from '../../mocks/setup/setup.mock';
 import { statusMock } from '../../mocks/status/status.mock';
 
 test.describe('ANCV - Sessions', () => {
-    test('should call onOrderCreated when payment is partially authorised (Sessions flow)', async ({ ancvPage }) => {
+    test('should call onOrderUpdated when payment is partially authorised (Sessions flow)', async ({ ancvPage }) => {
         const { ancv, page } = ancvPage;
 
         await createOrderMock(page, orderCreatedMockData);

packages/e2e/app/src/handlers.js

@@ -17,26 +17,43 @@ export function handleError(obj) {
     }
 }
 
-export function handleSubmit(state, component) {
-    component.setStatus('loading');
-
-    return makePayment(state.data)
-        .then(response => {
-            component.setStatus('ready');
-            handleResponse(response, component);
-        })
-        .catch(error => {
-            throw Error(error);
+export async function handleSubmit(state, component, actions) {
+    try {
+        const { action, order, resultCode, donationToken } = await makePayment(state.data);
+
+        if (!resultCode) actions.reject();
+
+        actions.resolve({
+            resultCode,
+            action,
+            order,
+            donationToken
         });
+    } catch (error) {
+        console.error('## onSubmit - critical error', error);
+        actions.reject();
+    }
 }
 
-export function handleAdditionalDetails(details, component) {
-    return makeDetailsCall(details.data)
-        .then(response => {
-            component.setStatus('ready');
-            handleResponse(response, component);
-        })
-        .catch(error => {
-            throw Error(error);
+export async function handleAdditionalDetails(state, component, actions) {
+    try {
+        const { resultCode, action, order, donationToken } = await makeDetailsCall(state.data);
+
+        if (!resultCode) actions.reject();
+
+        actions.resolve({
+            resultCode,
+            action,
+            order,
+            donationToken
         });
+    } catch (error) {
+        console.error('## onAdditionalDetails - critical error', error);
+        actions.reject();
+    }
+}
+
+export function handlePaymentCompleted(data, component) {
+    component.remove();
+    alert(data.resultCode);
 }

packages/e2e/app/src/pages/Cards/Cards.js

@@ -1,6 +1,6 @@
 import { AdyenCheckout, Card } from '@adyen/adyen-web';
 import '@adyen/adyen-web/styles/adyen.css';
-import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
+import { handleSubmit, handleAdditionalDetails, handleError, handlePaymentCompleted } from '../../handlers';
 import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
 
@@ -15,35 +15,35 @@ const initCheckout = async () => {
         showPayButton: true,
         onSubmit: handleSubmit,
         onAdditionalDetails: handleAdditionalDetails,
+        onPaymentCompleted: handlePaymentCompleted,
         onError: handleError,
         ...window.mainConfiguration
     });
 
     // Credit card with installments
     window.card = new Card({
-            core: checkout,
-            brands: ['mc', 'visa', 'amex', 'maestro', 'bcmc'],
-            onChange: state => {
-                /**
-                 * Needed now that, for v5, we enhance the securedFields state.errors object with a rootNode prop
-                 *  - Testcafe doesn't like a ClientFunction retrieving an object with a DOM node in it!?
-                 *
-                 *  AND, for some reason, if you place this onChange function in expiryDate.clientScripts.js it doesn't always get read.
-                 *  It'll work when it's part of a small batch but if part of the full test suite it gets ignored - so the tests that rely on
-                 *  window.mappedStateErrors fail
-                 */
-                if (!!Object.keys(state.errors).length) {
-                    // Replace any rootNode values in the objects in state.errors with an empty string
-                    const nuErrors = Object.entries(state.errors).reduce((acc, [fieldType, error]) => {
-                        acc[fieldType] = error ? { ...error, rootNode: '' } : error;
-                        return acc;
-                    }, {});
-                    window.mappedStateErrors = nuErrors;
-                }
-            },
-            ...window.cardConfig
-        })
-        .mount('.card-field');
+        core: checkout,
+        brands: ['mc', 'visa', 'amex', 'maestro', 'bcmc'],
+        onChange: state => {
+            /**
+             * Needed now that, for v5, we enhance the securedFields state.errors object with a rootNode prop
+             *  - Testcafe doesn't like a ClientFunction retrieving an object with a DOM node in it!?
+             *
+             *  AND, for some reason, if you place this onChange function in expiryDate.clientScripts.js it doesn't always get read.
+             *  It'll work when it's part of a small batch but if part of the full test suite it gets ignored - so the tests that rely on
+             *  window.mappedStateErrors fail
+             */
+            if (!!Object.keys(state.errors).length) {
+                // Replace any rootNode values in the objects in state.errors with an empty string
+                const nuErrors = Object.entries(state.errors).reduce((acc, [fieldType, error]) => {
+                    acc[fieldType] = error ? { ...error, rootNode: '' } : error;
+                    return acc;
+                }, {});
+                window.mappedStateErrors = nuErrors;
+            }
+        },
+        ...window.cardConfig
+    }).mount('.card-field');
 };
 
 initCheckout();