How can I customize a Card/Checkout component using Adyen Web Node package to insert an email address field?

Question

I have imported Adyen Web Node package into my project per Adyen's documentation:

import { AdyenCheckout, Card } from '@adyen/adyen-web';
import '@adyen/adyen-web/styles/adyen.css';

However, I would like to insert an email field into the Card component, which I can then pass into the shopperEmail key when calling the Adyen API. I'm not sure if this is possible because I've not seen anything in the documentation that suggests such a customization. Has anyone tried to customize as such?

I've only tried looking through the documentation here: https://docs.adyen.com/marketplaces/checkout-components/?platform=Web&integration=Components&version=6.0.3.

Answer 1

There are typically two flows you need to accomodate for:

1. Existing users (retrieved & populated from your backend)
2. New users (in your case)

The most flexible (and easiest) way to achieve the latter is to create a field (or a new div element) next to the secure Card Component, and collect your shopper email address.

You can then override the beforeSubmit()-event handler in the Adyen.Component configuration and pass the email address accordingly. Similarly, you can add shopper details like billingAddress, deliveryAddress, shopperEmail, or shopperName here.

Example-code:

beforeSubmit(data, component, actions) {

    const paymentData = {
        ...data,
        shopperEmail: '[email protected]',  // Add the shopper's email from your  field (div)
        billingAddress: {
            city: "Amsterdam",
            country: "NL",
            // ...
        },
        deliveryAddress: {
            city: "Amsterdam",
            country: "NL",
            // ...
        },
        shopperName: {
            firstName: "Shopper",
            lastName: "LastName"
        }
    };

    actions.resolve(paymentData);
}

When the beforeSubmit(..) event is triggered, you need to continue or stop the payment flow using either [1] actions.resolve() or [2] `actions.reject() as follows:

1. Continue the payment flow (actions.resolve()): You should call the actions.resolve() method regardless of the resultCode, including when the payment is unsuccessful. This will ensure that your Component won't get stuck.

2. Stop the payment flow (actions.reject()): Stop the payment flow only when your server-side API request to Adyen failed, or when experiencing network connection issues.

Hope this helped!