Click to Pay

Click to Pay is a payment feature that allows shoppers to make secure card payments without having to enter their card details. There are over 70 million Click to Pay shopper accounts worldwide.

To use Click to Pay, shoppers can create an account either through the Mastercard and Visa portals, or directly with their issuing bank if it is supported. In the future, we will also let shoppers create Click to Pay accounts directly from checkout. The card scheme is responsible for securely storing the cardholder data and issuing tokens.

Shoppers with Click to Pay accounts are recognized during checkout and can select their preferred card details from their Click to Pay account to complete the payment.

Benefits

Click to Pay offers you the following benefits:

• Higher authorization rates: Click to Pay increases card authorization rates by up to 2% through the use of Network Tokens.
• Higher conversion rates: Click to Pay eliminates manual cardholder data entry, boosting conversion.
• Secure: all Click to Pay payments are made from a recognized device, or are authenticated through a one-time password, making them more secure than regular card payments.
• No additional fees: Click to Pay payments are processed as Network Token card payments, meaning you don't incur additional costs.

How it works

1. During your checkout, we identify whether your shopper has a Click to Pay account, by recognizing either their device or email address.
2. If your shopper has a Click to Pay account, we display Click to Pay in your checkout. Else, the regular card component is displayed.
3. Your shopper receives a one-time password via email and phone, and they authenticate themselves.
4. The card component displays your shopper's stored Click to Pay cards.
5. Your shopper selects their preferred card and confirms the purchase.

Before you begin

Before you begin to integrate Click to Pay, make sure you have integrated one of the following:

• Web Drop-in (v5.39.0 or newer)
• Web Components (v5.39.0 or newer)

To add Click to Pay to your account, contact our Support Team or your Account Manager.

Step 1: Configure your integration

Drop-in

If you have a Drop-in integration, under the card configuration, set clickToPayConfiguration.merchantDisplayName to your merchant name. Depending on the authentication flow, this name may be displayed to the shopper.

const checkout = await AdyenCheckout({
    paymentMethodsConfiguration: {
        card: {
            clickToPayConfiguration: {
                merchantDisplayName: 'YOUR_MERCHANT_NAME'
            }
        },
    },
    ...
}

const dropin = checkout.create('dropin').mount('#dropin-area')

Components

If you have a Card Component integration, in the configuration, set clickToPayConfiguration.merchantDisplayName to your merchant name. Depending on the authentication flow, this name may be displayed to the shopper.

const card = checkout.create('card', {
    clickToPayConfiguration: {
        merchantDisplayName: 'YOUR_MERCHANT_NAME'
    }
    ...
}).mount('#card-area');

Step 2: Recognize the Click to Pay user

There are two ways in which your integration can recognize an existing Click to Pay user:

1. A Click to Pay account is registered with your shopper's email address.
2. A Click to Pay cookie is stored in your shopper's browser.

If at least one of these conditions is met, the Card Component displays Click to Pay.

To recognize whether a Click to Pay account is registered with your shopper's email address:

• If your integration uses the /sessions request, pass the shopperEmail parameter.
• Else, add the shopper email address as shopperEmail to the card configuration:

const checkout = await AdyenCheckout({
    paymentMethodsConfiguration: {
        card: {
            clickToPayConfiguration: {
                shopperEmail: 'shopper.email@example.com'
            }
        },
    },
    ...
}

const dropin = checkout.create('dropin').mount('#dropin-area')

Test and go live

To test Click to Pay, create a Click to Pay account for:

• Mastercard
• Visa

Then add one of the following cards to your account:

• For Mastercard, see their Testing documentation.
• For Visa:

Additional information

Because Click to Pay payments are processed as card payments, the following applies:

• The usage of Click to Pay is compatible with 3D Secure, meaning that transactions may or may not require 3D Secure authentication, based on regular 3D Secure decision-making.
• Your shoppers can issue chargebacks, which you can defend against.
• You can configure your risk settings for custom risk management.