--- title: "Click to Pay" description: "Offer one-off card payments." url: "https://docs.adyen.com/payment-methods/cards/click-to-pay" source_url: "https://docs.adyen.com/payment-methods/cards/click-to-pay.md" canonical: "https://docs.adyen.com/payment-methods/cards/click-to-pay" last_modified: "2026-02-04T10:50:00+01:00" language: "en" --- # Click to Pay Offer one-off card payments. [View source](/payment-methods/cards/click-to-pay.md) Click to Pay allows shoppers to make secure card payments without having to enter their card details. To use Click to Pay, shoppers can create accounts with both [Mastercard](https://src.mastercard.com/profile/enroll) and [Visa](https://secure.checkout.visa.com/createAccount), or directly with their issuing bank if it is supported. 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. Currently, Adyen's Click to Pay integration doesn't support [recurring payments](/online-payments/tokenization/make-token-payments), meaning you can't offer it for subscriptions and automatic top-ups. To offer recurring payments, use our regular [Card](/payment-methods/cards) Component or Drop-in instead. ## Requirements The requirements for Click to Pay differ depending on your integration. Select the tab corresponding to your integration: ### Tab: Sessions flow | Requirement | Description | | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Integration type** | Click to Pay is supported for the following integrations:- [Web Drop-in](/online-payments/build-your-integration/sessions-flow/?platform=Web\&integration=Drop-in) v5.39.0 or higher. - [Web Components](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) v5.39.0 or higher. | | **[API credentials](/development-resources/api-credentials)** | Web Drop-in or Components for Click to Pay requires [Checkout API](https://docs.adyen.com/api-explorer/Checkout/latest/overview) v69 or later. | | **Setup steps** | Before you begin:1) [Add cards as a payment method](/payment-methods/add-payment-methods) in your Customer Area. 2) Add Click to Pay as a payment method in your Customer Area. | ### Tab: Advanced flow | Requirement | Description | | | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Click to Pay is supported for the following integrations:- [Web Drop-in](/online-payments/build-your-integration/sessions-flow/?platform=Web\&integration=Drop-in) v5.39.0 or higher. - [Web Components](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components) v5.39.0 or higher. - API only with the [Custom Card Component](/payment-methods/cards/click-to-pay/?tab=custom-card_3). | | | **[API credentials](/development-resources/api-credentials)** | Web Drop-in or Components for Click to Pay requires [Checkout API](https://docs.adyen.com/api-explorer/Checkout/latest/overview) v69 or later. | | | **Setup steps** | Before you begin:1) If you use the Custom Card Component and want to use the separate ClickToPay Component for Click to Pay, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) or your Account Manager to add Click to Pay to your account. 2) [Add cards as a payment method](/payment-methods/add-payment-methods) in your Customer Area. 3) Add Click to Pay as a payment method in your Customer Area. | | ## Benefits Click to Pay offers the following benefits: * **Higher authorization rates**: Increases card authorization rates through the use of [Network tokens](/online-payments/network-tokenization). * **Faster checkout and higher conversion**: Eliminates manual card detail entry, speeding up checkout times and boosting conversion rates. * **Secure**: All 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**: Payments are processed as network token card payments, meaning you don't incur additional costs. ## How it works 1. During checkout, we identify whether your shopper has a Click to Pay account by recognizing either their device or email address. 2. If the shopper has a Click to Pay account, they can pay with their stored card details. Otherwise, the shopper can manually enter their card details. 3. The shopper receives a one-time password via email or phone, and then authenticates with the password.\ This step is skipped if the shopper is using a recognized device. 4. The shopper's stored Click to Pay cards are shown. 5. The shopper selects their preferred card and confirms the purchase. To offer this flow, you need to: * [Configure your integration](#configure-integration) for Click to Pay. * Ensure your integration can [recognize Click to Pay users](#recognize-users). ### Checkout example The following image represents Adyen's implementation of Visa and Mastercard brand guidelines for a Click to Pay checkout page. We recommend you offer Click to Pay through Adyen's Web Drop-in or Component integration, because it meets card scheme requirements. [](/user/pages/docs/08.payment-methods/04.cards/23.click-to-pay/clicktopay.png) [![Click to Pay checkout example](/user/pages/docs/08.payment-methods/04.cards/23.click-to-pay/clicktopay.png "Click to Pay for Drop-in or Components")](/user/pages/docs/08.payment-methods/04.cards/23.click-to-pay/clicktopay.png) [Click to Pay for Drop-in or Components](/user/pages/docs/08.payment-methods/04.cards/23.click-to-pay/clicktopay.png) If you do not use Adyen's provided component, you must follow [EMVCO customer experience guidelines](https://www.emvco.com/dynamic/click-to-pay-cx-guidelines/) to build your Click to Pay checkout component. ## 1. Configure your integration How you configure Click to Pay depends on your integration: * [Drop-in](/online-payments/build-your-integration/sessions-flow?integration=Drop-in): Click to Pay is shown with card payments when available. * [Component](/online-payments/build-your-integration/sessions-flow?integration=Components): Integrate Click to Pay as part of the Card Component. * [Custom Card Component](/payment-methods/cards/custom-card-integration): Integrate Click to Pay as a standalone component. To prevent Click to Pay from appearing, for example when [tokenizing card details](/online-payments/tokenization), include `clicktopay` in the `blockedPaymentMethods` array when making a [/sessions](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/post/sessions) or [/paymentMethods](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods) request. ### Tab: Drop-in When you [configure Drop-in](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Drop-in#create-instance), add the following configuration for Click to Pay to the `paymentMethod.card` object: | Configuration | Description | | --------------------------------------------- | ------------------------------------------------------------------------------------------- | | `clickToPayConfiguration.merchantDisplayName` | Your merchant name. Depending on the authentication flow, this can be shown to the shopper. | **Add Click to Pay configuration to Drop-in** ```js const checkout = await AdyenCheckout({ paymentMethodsConfiguration: { card: { clickToPayConfiguration: { merchantDisplayName: 'YOUR_MERCHANT_NAME' shopperEmail: 'SHOPPER_EMAIL_ADDRESS' // Used to recognize your shopper's Click to Pay account. } }, }, ... }); const dropin = checkout.create('dropin').mount('#dropin-area') ``` ### Tab: Card Component When you integrate Click to Pay as part of the Card Component, the Click to Pay payment option is shown to recognized shoppers who have already set up Click to Pay. Shoppers who have not set up Click to Pay are only shown card payment options that do not use Click to Pay. When you mount the Card Component with Click to Pay configuration, and a Click to Pay shopper is recognized, they receive a one-time password through email or SMS. Make sure that you mount the Component only when your shopper chooses to pay with Click to Pay. When you [configure the Card Component](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components#configure), include the following configuration for Click to Pay: | Configuration | Description | | --------------------------------------------- | ------------------------------------------------------------------------------------------- | | `clickToPayConfiguration.merchantDisplayName` | Your merchant name. Depending on the authentication flow, this can be shown to the shopper. | **Add Click to Pay configuration to Card Component** ```js const card = checkout.create('card', { clickToPayConfiguration: { merchantDisplayName: 'YOUR_MERCHANT_NAME', shopperEmail: 'SHOPPER_EMAIL_ADDRESS' // Used to recognize your shopper's Click to Pay account. } ... }).mount('#card-area'); ``` ### Tab: Custom Card Component To enable the Click to Pay Component, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other). When you integrate with the Click to Pay Component, it is not rendered in the same UI element as where you collect cardholder details for card payments. This lets you separate Click to Pay from regular card payments and implement your own logic for when to offer Click to Pay. Click to Pay is designed to be an alternative to manual card detail entry. To optimize the shopper experience when you combine Click to Pay with your [API-only card integration](/payment-methods/cards/api-only/): * Show the Click to Pay Component next to the card entry fields, so that shoppers who look to pay by card find both options. * Show only one option at a time, to maintain a clean interface. We recommend you show Click to Pay if your shopper is recognized, and manual card entry fields if not or if the shopper chooses to enter their card details manually. When you mount the Click to Pay Component and a Click to Pay shopper is recognized, they receive a one-time password through email or SMS. Make sure that you mount the Component only when your shopper chooses to pay with Click to Pay. To use Click to Pay as a standalone Component: 1. [Create a session](/online-payments/build-your-integration/sessions-flow?integration=Components\&platform=Web\&version=latest#create-payment-session), including all required parameters and `shopperEmail`. 2. [Set up Components](/online-payments/build-your-integration/sessions-flow?integration=Components\&platform=Web\&version=latest#set-up). 3. [Create an instance of `AdyenCheckout`](/online-payments/build-your-integration/sessions-flow?integration=Components\&platform=Web\&version=latest#create-the-component) and instantiate the Click to Pay Component: **Card Component configuration** ```js // Create the Checkout object. const checkout = await AdyenCheckout({ session, ... // Add other parameters, such as `environment`, `clientKey`, etc. }); // Instantiate the Click to Pay Component. const clickToPay = checkout.create('clicktopay', { shopperEmail: 'SHOPPER_EMAIL_ADDRESS', // Used to recognize your shopper's Click to Pay account. onReady() { console.log('Component is ready to interact with the shopper') } }); // Display the Component if the shopper is identified. clickToPay.isAvailable().then(() => { clickToPay.mount('.clicktopay-container'); }).catch(() => { // Click to Pay is not available, for example when the shopper cannot be identified. }); ``` Adyen does not support a custom pay button for Click to Pay. You must use the button provided by the Component. ## 2. Recognize the Click to Pay user Your integration recognizes an existing Click to Pay user by the cookie stored in their browser. If there is no cookie, the user will be prompted to authenticate with their email address, which will set a new cookie. When Click to Pay recognizes the shopper, the Card Component or Drop-in shows the Click to Pay payment option. If the shopper is using a Mastercard but there is no browser cookie, the console always returns a [400 Bad Request error](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/400). This occurs even when the payment flow continues successfully. As long as the shopper's email is registered, you can continue the payment flow. To recognize whether a Click to Pay account is registered with your shopper's email address: * For a [/sessions](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions) request, pass the [shopperEmail](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#responses-201-shopperEmail), [id](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#responses-201-id), and [sessionData](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#responses-201-sessionData) parameters from the `/sessions` response to your [`AdyenCheckout` configuration](/online-payments/build-your-integration/sessions-flow?platform=Web#configure). * For other integrations, add `shopperEmail` to the card configuration. ### Tab: Use the /sessions response **Pass the session object to AdyenCheckout** ```js const checkout = await AdyenCheckout({ session: { id: session.id, sessionData: session.sessionData, shopperEmail: session.shopperEmail }, ... }); ``` ### Tab: Add shopper email to card configuration **Add shopper email address to card configuration** ```js const checkout = await AdyenCheckout({ paymentMethodsConfiguration: { card: { clickToPayConfiguration: { shopperEmail: 'shopper.email@example.com' } }, }, ... }); const dropin = checkout.create('dropin').mount('#dropin-area') ``` ## Sample request and response ### Payment request A payment request with Click to Pay sends the same parameters as a standard [cards](/payment-methods/cards/custom-card-integration) request, plus the following parameters in the `paymentMethod` object: * `srcDigitalCardId`: The [SRC](/get-started-with-adyen/adyen-glossary#secure-remote-connection-src) reference for the Click to Pay token. * `srcCorrelationId`: An identifier used for the Click to Pay transaction. Click to Pay requests also include a `configuration` object that automatically sends the following parameters that identify your CTP accounts or storefronts with the schemes: * `mcDpaId` * `mcSrcClientId` * `visaSrcInitiatorId` * `visaSrciDpaId` ### Tab: Sessions flow If Click to Pay is embedded in the Card Component, then its configuration will come as part of the Card configuration. **Click to Pay request from Card Component** ```json { "amount": { "value": 10123, "currency": "EUR" }, "reference": "YOUR_ORDER_NUMBER", "returnUrl": "https://your-company.example.com/...", "merchantAccount": "ADYEN_MERCHANT_ACCOUNT", "countryCode": "NL", "shopperInteraction": "Ecommerce", "paymentMethod": { "type": "scheme", "srcScheme": "visa", "srcDigitalCardId": "VqYhcPGbQiysxJqSPxJ0uQ000000000000MX", "srcCorrelationId": "34f4a04b.845c1ff2-e0fd-4dac-b25f-55b597c20a6a", "checkoutAttemptId": "761b203c-d922-4a57-96a9-8356977402341692834512345" }, configuration: { mcDpaId:"MASTERCARD_DPA_ID", mcSrcClientId:"MASTERCARD_SRC_CLIENT_ID", visaSrcInitiatorId:"VISA_SRC_INITIATOR_ID", visaSrciDpaId:"VISA_SRC_DPA_ID" }, "name":"Cards", "type":"scheme" } ``` ### Tab: Advanced flow If Click to Pay is a standalone Component, its configuration will come with a payment type of **clicktopay**. **Click to Pay request from standalone component** ```json { "amount" : { "value" : 10123, "currency" : "EUR" }, "reference" : "YOUR_ORDER_NUMBER", "returnUrl" : "https://your-company.example.com/...", "merchantAccount" : "ADYEN_MERCHANT_ACCOUNT", "countryCode" : "NL", "shopperInteraction" : "Ecommerce", "paymentMethod" : { "type" : "scheme", "srcScheme" : "visa", "paymentMethod": { "type": "scheme", "srcScheme": "visa", "srcDigitalCardId": "VqYhcPGbQiysxJqSPxJ0uQ000000000000MX", "srcCorrelationId": "34f4a04b.845c1ff2-e0fd-4dac-b25f-55b597c20a6a", "checkoutAttemptId": "761b203c-d922-4a57-96a9-8356977402341692834512345" }, configuration: { mcDpaId:"MASTERCARD_DPA_ID", mcSrcClientId:"MASTERCARD_SRC_CLIENT_ID", visaSrcInitiatorId:"VISA_SRC_INITIATOR_ID", visaSrciDpaId:"VISA_SRC_DPA_ID" }, "name":"clicktopay", "type":"clicktopay" } ``` ### Payment response When you receive a payment response, the `paymentMethod` object contains: * [type](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods#responses-200-paymentMethods-type): The value that allows you to refer to the payment method. See [payment method types](/payment-methods/payment-method-types) for more information. * [brand](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods#responses-200-paymentMethods-brand): The card brand that the shopper used to pay, appended with **\_clicktopay**. Only returned if `paymentMethod.type` is **scheme**.\ Possible values are **mc\_clicktopay** and **visa\_clicktopay**. **Click to Pay payments response** ```json "pspReference": "8915844059375211", "resultCode": "Authorised", "amount": { "currency": "EUR", "value": 666 }, "merchantReference": "YOUR_ORDER_NUMBER", "paymentMethod": { "brand": "visa_clicktopay", "type": "scheme" } ``` ## Test and go live To test Click to Pay: 1. Create a Click to Pay account: * [Mastercard](https://sandbox.src.mastercard.com/profile/enroll) * [Visa](https://sandbox.secure.checkout.visa.com) 2. Add test cards to your account: * For Mastercard, see their [Testing](https://developer.mastercard.com/mastercard-checkout-solutions/documentation/testing/test_cases/click_to_pay_case/#test-cards) documentation. * For Visa, use any of the following cards: | Card Number | CVV | Expiry | | ---------------- | --- | ------ | | 4622943123114762 | 591 | 12/27 | | 4622943123114770 | 050 | 12/27 | | 4622943123114788 | 939 | 12/27 | | 4622943123114796 | 643 | 12/27 | | 4622943123114804 | 218 | 12/27 | | 4622943123114812 | 950 | 12/27 | | 4622943123114820 | 947 | 12/27 | | 4622943123114838 | 695 | 12/27 | | 4622943123114846 | 697 | 12/27 | | 4622943123114853 | 322 | 12/27 | You cannot use Adyen's [test cards](/development-resources/test-cards-and-credentials/test-card-numbers) to test Click to Pay functionality. ## See also Because Click to Pay payments are processed as card payments, the following applies: * Click to Pay is compatible with [3D Secure](/online-payments/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](/risk-management/manage-disputes). * You can [configure your risk settings](/risk-management/configure-risk-settings) for custom risk management.