Adyen Payment Setup

Overview

Cleeng Adyen integration allows you to easily turn on new payment methods with limited development or testing. Cleeng provides a set of endpoints to integrate with Adyen payment methods.

🚧

Please migrate to the new endpoints if you are using the legacy version of API :

See below for the migration guide.

The guide below shows step-by-step how to build the integration from the front-end perspective.

If you want to use our ready-to-use solution, please refer to Components Library Overview - Purchase or Checkout components.

Supported payment methods

Please see the table below for the supported Adyen payment methods.

Supported Payment MethodWeb
Card (with 3D Secure support)
Apple Pay
Google Pay

Migration guide

If you have been using legacy endpoints (Payment with Adyen, Add Adyen payment details) to support Adyen Payments, you should follow the steps below to migrate to the new Adyen payment setup:

  • Replace your old Card component with the Adyen Drop-in component (see the Drop-in integration guide below).
  • Replace requests to the deprecated endpoints with the new Adyen endpoints.
  • Test the new solution on the sandbox.
  • When all payment methods are tested successfully, check the go-live checklist and release the implementation to production.

Prerequisites

The following three points are the general prerequisites to start building Adyen setup with the Adyen Drop-in.

  1. Payment method
  2. Webhooks and dunning action settings
  3. Allowed origins & domains

Once the Drop-in is implemented, you can proceed with configuring a specific payment method. For details of additional configuration, see the specific section: Card setup, Apple Pay setup, and Google Pay setup.

1. Payment method

Make sure you have any Adyen payment method enabled. To do so, call Fetch payment method ids.
You can add new payment methods by reaching to our Broadcaster Success Specialists team.

📘

Please note that payment methods are separately added per environment (sandbox, production).

It is recommended that you first add a payment method to your sandbox environment. Only after testing and completing the go-live checklist, you should enable the payment method in the production environment.

2. Webhooks and dunning action settings

Configure Dunning actions and webhooks for different payment methods.

Subscribe to webhooks / verify the setup with the List of endpoints.

3. Allowed origins & domains

Reach out to our Broadcaster Success Specialists team (BSS) to provide the necessary information on allowed origins and domains.

The table below shows what information needs to be provided for different payment methods:

Payment methodWhat to provide to BSS team
CardAdd origin to allowed origins for Adyen card payment.

Provide a list of your origins, where you want to use an Adyen Drop-in (with information about what environment they should be added to: sandbox, production or both). Provide an origin name with http:// or https:// (depending which one is going to be used).
Apple PayProvide a domain list where you will use an Apple Pay payment (with distinction: sandbox/production).
Google PayProvide a list of domains where you will use GooglePay (production only).
Please note that you will also need to provide screenshots showing the purchase flow (see more in the Prerequisites section).

Drop-in integration

Adyen Drop-in is a pre-built user interface solution for accepting payments on your website. Drop-in shows all payment methods as a list, in a block.

The payment flow is the same for all payments:

  1. The customer goes to the checkout page.
  2. Your server uses the customer order details to create a payment session.
  3. Your front-end application creates an instance of Drop-in using the session data from the server.
  4. Drop-in:
  • shows the available payment methods,
  • collects the customer's payment details,
  • handles additional actions,
  • and presents the payment result to the customer.

To integrate a Drop-in, follow these steps:

  1. Create a payment session
  2. Set-up Drop-in
  3. Make a payment
  4. Handle payment outcome

Create a payment session

A payment session is a resource with information about a payment flow that is initiated by the customer. It has all the information required by Drop-in to handle all the steps of a payment flow.

To create a payment session use the Create Adyen payment session endpoint.

Note: Payment session expiry date is set to 1 hour after session creation.

The response contains:

  • sessionData: the payment session data you need on your front end.
  • id: a unique identifier for the session data.
  • shopperStatement: the name of the Merchant. Pass it to the Drop-in, so Apple Pay and Google Pay will present it as a merchant.
  • amount: object required for Apple Pay and Google Pay configuration.
  • countryCode: country code required for Apple Pay and Google Pay configuration.
  • paymentMethods: array of all payment methods. Configuration objects from this array are useful for Apple Pay and Google Pay configuration.
  • The request body.

Set up Drop-in

This stage consists of four steps:

  1. Use the Adyen Web npm package
  2. Create the container element for Drop-in
  3. Create a configuration object
  4. Initialize the Drop-in

Use the Adyen Web npm package

Install the Adyen Web Node package.

npm install @adyen/adyen-web --save

Import Adyen Web into your application. You can add your own styling by overriding the rules in the CSS file.

import AdyenCheckout from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';

Create the container element for Drop-in

Create a DOM container element on your checkout page where you want Drop-in to be rendered. Make sure to give the container element a descriptive id.

<div id="dropin-container"></div>

If you are using JavaScript frameworks such as Vue or React, make sure that you use references instead of selectors and that you don't re-render the DOM element.

Create a configuration object

Create an object for the global configuration of your Drop-in integration. This section shows the required and recommended parameters.

Parameter nameRequiredDescription
sessionyesThe payment session object from your call to /connectors/adyen/sessions. Contains a session.id and session.sessionData.
clientKeyyesClient key is generated by Cleeng and it can be used by each domain on the 'allowed list'. Contact us to add your origin to the allowed ones. Then use this value for sandbox: test_I4OFGUUCEVB5TI222AS3N2Y2LY6PJM3K or live_BQDOFBYTGZB3XKF62GBYSLPUJ4YW2TPL for production
environmentyesUse "test". When you're ready to accept live payments, change the value to "live".
onSubmit(state, component)yesThe function that will trigger the payment. Required for integration with Cleeng. Make a request to /connectors/adyen/initial-payment inside onSubmit function.
onError(error)noCreate an event handler, called when an error occurs in Drop-in.
paymentMethodsConfigurationnoConfiguration for specific payment methods. Refer to specific payment method section (Apple Pay, Google Pay) for more details.
analytics.enablednoIndicates if you're sending analytics data to Adyen. Default: true.
const configuration = {
  environment: 'test', // Change to 'live' for the live environment.
  clientKey: 'test_I4OFGUUC...', // Public key used for client-side authentication
  analytics: {
    enabled: true // Set to false to not send analytics data to Adyen.
  },
  session: {
    id: 'CSD9CAC3...', // Unique identifier for the payment session.
    sessionData: 'Ab02b4c...' // The payment session data.
  },
  onError: (error, component) => {
      console.error(error.name, error.message, error.stack, component);
  },
  paymentMethodsConfiguration: {
    card: {
      hasHolderName: true,
      holderNameRequired: true,
      billingAddressRequired: true
    }
  },
  onSubmit: submitFn
};

Initialize the Drop-in

  1. Create an instance of AdyenCheckout using the configuration object you created.
  2. Create an instance of Drop-in and mount it to the container element you created.
// Create an instance of AdyenCheckout using the configuration object.
const checkout = await AdyenCheckout(configuration);
 
// Create an instance of Drop-in and mount it to the container you created.
const dropinComponent = checkout.create('dropin');
dropinComponent.mount('#dropin-container');
840

Adyen Drop-in component

Make a payment

In the onSubmit function you should call the /connectors/adyen/initial-payment endpoint.
The next steps depend on the response. If in the response you get:

  • payment object - the payment was completed and succeeded. You can present the success screen.
  • action object - the payment was not completed yet, and additional actions need to be taken.

Handle payment outcome

Some payment methods like iDEAL, and some 3D Secure flows will redirect the customer back to your website. When the customer comes back to your website, show them the payment result, based on the /connectors/adyen/initial-payment/finalize response.

If the initial payment returns an action object, use the dropin.handleAction to proceed with the next steps of payment.

{
  "action": {
    "paymentMethodType": "scheme",
    "url": "https://test.adyen.com/hpp/3d/validate.shtml",
    "data": {
        "MD": "OEVudmZVMUlkWjd0MDNwUWs2bmhSdz09...",
        "PaReq": "eNpVUttygjAQ/RXbDyAXBYRZ00HpTH3wUosPfe...",
        "TermUrl": "https://example.com/checkout?shopperOrder=12xy..."
     },
     "method": "POST",
     "type": "redirect"
  }
}

Drop-in uses dropin.handleAction(action) to redirect the customer to the issuer page, e.g. to perform 3D Secure authentication.

When the customer completes authentication, he/she is redirected back to the returnUrl from the initial payment request. The redirect is via an HTTP GET and is appended with the Base64-encoded redirectResult.

GET /?shopperOrder=12xy...&&redirectResult=X6XtfGC3%21Y.... HTTP/1.1
Host: www.your-company.com/checkout

To verify the payment result, make another API request to /connectors/adyen/initial-payment/finalize.

Testing and going live

  1. Before going live, use the Adyen testing card to test your integration. We recommend testing each payment method that you intend to offer to your customers.
  2. Verify the payment result in Cleeng Dashboard.
  3. Switch from the sandbox to our production endpoints.
  4. Load Drop-in for live environment (see Create a configuration object).

Optional configuration

Apart from parameters defined within specific payment methods, you can pass additional parameters or use additional methods. Tables below present available parmeters and methods for AdyenCheckout instance and Drop-in.

const checkout = await AdyenCheckout({
    onError: () => {}, // Global configuration for onError
    paymentMethodsConfiguration: {
        card: {
            onError: () => {}, // onError configuration for card payments. Overrides the global configuration.
        }
    }
});
 
checkout.create('dropin', {
    onReady: () => {}, // Drop-in configuration only has props related to itself, like the onReady event. Drop-in configuration cannot contain generic configuration like the onError event.
});

Drop-in configuration

Parameters:
These parameters are specific to Drop-in and are only accepted on the Drop-in instance.

Parameter nameDescription
openFirstPaymentMethodWhen enabled, Drop-in opens the first payment method automatically on page load. Default: true.
onReady()It is called when Drop-in is initialized and is ready for use.
onSelect(component)It is called when the customer selects a payment method.

Methods:

Method nameDescription
mount(selector)Mounts the Drop-in into the DOM returned by the selector.
The selector must be either a valid CSS selector string or an HTMLElement reference.
unmount()Unmounts the Drop-in from the DOM. We recommend to unmount in case the payment amount changes after the initial mount.
closeActivePaymentMethod()Closes a selected payment method, for example if you want to reset the Drop-in.

Code sample:

import AdyenCheckout from '@adyen/adyen-web';
const checkout = await AdyenCheckout(configuration);
const dropin = checkout.create('dropin', {
       onSelect,
       openFirstPaymentMethod:
         !window.matchMedia('(max-width:991px)').matches
     });
dropin.mount(containerRef.current);

AdyenCheckout configuration

Parameters
The following parameters can be set on the AdyenCheckout main instance.

Parameter nameDescription
amountAmount to be displayed on the "Pay" button. It expects an object with the value and currency properties. For example, { value: 1000, currency: 'USD' }.
localeThe language used in the Drop-in UI. For possible values, see the list of available languages.
setStatusAutomaticallySet to false to not set the Drop-in status to 'loading' when onSubmit is triggered. Default: true.

Events:

Event nameDescription
onError(error)Creates an event handler, called when an error occurs in Drop-in.
onChange(state, component)Creates an event handler, called when a change happens in the payment form.
onSubmit(state, component)Creates an event handler, called when the customer selects the "Pay" button and payment details are valid.
onAdditionalDetails(state, component)Creates an event handler, called when a payment method requires more details, for example for native 3D Secure 2, or native QR code payment methods.

Code sample:

const configuration = {
     locale: 'en-US',
     environment: 'test',
     analytics: {
       enabled: true
     },
     session: {
       id,
       sessionData
     },
     clientKey: ‘test_…’,
     onSubmit: (state, component) => console.log(state, component),
     onAdditionalDetails: (state, component) => console.log(state, component),
     onError,
     paymentMethodsConfiguration: {
       card: {
         hasHolderName: true,
         holderNameRequired: true
       },
       applepay: {
         amount: {
         value: 1000,
                 currency: "EUR" 
         },
          countryCode: “US”,
         }
       },
       googlepay: {
         environment: ‘TEST’,
          amount: {
         value: 1000,
                 currency: "EUR" 
         },
       }
     }
   };
 const checkout = await AdyenCheckout(configuration);

Card setup

Prerequisites

  1. Reach out to the Cleeng Broadcaster Success Specialists team to add the payment method to your account and add your origin to allowed origins. In the email :
  • add a list of your origins, where you want to use an Adyen Drop-In
  • provide information about what environment they should be added to: sandbox, production or both
  • provide an origin name with http:// or https:// (depending which one is going to be used).
  1. Make sure that you've already built a Drop-in integration and proceed with integration.

Configure Drop-in

You can create a configuration object with the following optional parameters:

Parameter nameDescriptionDefault
hasHolderNameTo show the input field for the cardholder name, set this to true. It is strongly recommended to increase the security of transactions.false
holderNameRequiredTo make the cardholder name a required field (strongly recommended to increase the security of transactions), you need to set the holderNameRequired parameter to true.

To show the field, you additionally need to set hasHolderName to true.
false
positionHolderNameOnTopTo show the cardholder name field at the top of the payment form, set this to true.false
stylesTo customize the card input fields, set a style object. For a list of supported properties, refer to Adyen documentation.Refer to Adyen documentation.
billingAddressRequiredTo collect the customer's billing address and mark the fields as required, set this to true.false
billingAddressModeIf billingAddressRequired is set to true, you can set this to partial to require the customer's postal code instead of the full address.If billingAddressRequired is false: none.
If billingAddressRequired is true: full.
minimumExpiryDateIf a customer enters an earlier date than specified here, they will see the following error:
"Your card expires before check out date."
Format: mm/yy

If you want to add an optional configuration, include this in a configuration object. The following example shows how to configure Drop-in to collect the cardholder name and billing address as required:

const cardConfiguration = {
   hasHolderName: true,
   holderNameRequired: true,
   billingAddressRequired: true, // Set to true to show the billing address input fields.
};

If you created a cardConfiguration object, include this when creating a configuration object:

const configuration = {
  // ...  other required configuration
  paymentMethodsConfiguration: {
    card: cardConfiguration
  }
};

Test your integration

Before going live, use the Adyen test card numbers to test your integration.

When you are ready with your integration, reach out to the Cleeng Broadcaster Success Specialists team to turn on the card payment method on production.

Apple Pay setup

When the customer selects Apple Pay, they are presented with a payment sheet where they choose a card and optionally provide contact details and shipping address. Then they are prompted to authenticate the payment through Face ID or Touch ID.

Adyen does not currently support UnionPay cards through Apple Pay.

Compatibility

Apple Pay is available with specific issuers, on specific devices and browsers, and in specific countries. For details, please refer to:

Prerequisites

Make sure that you've completed the three prerequisites below.

1. Set up your server for secure communication with Apple Pay.

  • All pages that include Apple Pay must be served over HTTPS.
  • Your domain must have a valid SSL certificate.
  • Note: you cannot use http://localhost to test.
  • You need a domain association file. Please see the Certificate section below for details.

Certificate

You don't need to create your own Apple Pay certificate for your web integration because you can process payments through Adyen's Apple Pay certificate. The benefits of using Adyen's Apple Pay certificate are:

  • A faster way to add Apple Pay to your integration.
  • Less configuration required.

Use Adyen Apple Certificate:
A. Download and unzip the domain association file.
B. Host the domain association file with the name apple-developer-merchantid-domain-association on each domain you want to use (testing and live), including subdomains, under the following path:

/.well-known/apple-developer-merchantid-domain-association

The file must:

  • Have Content-Type: text/plain in the header.
  • Be externally accessible.
  • Not be password protected.
  • Not be behind a proxy or redirect.
  • Be hosted with the Unix line ending.

See an example of a working domain association file.
C. Add the following IP addresses to your firewall's allow list:

D. Your domain needs to be added to the allowed ones for Apple Pay.

2. Reach out to the Cleeng Broadcaster Success Specialists team to add the Apple Pay payment method to your account. Provide a domain list where you will use an Apple Pay payment (with distinction: test/production).

📘

It is recommended that you provide the full list of live and test domains so it can be added all at once as it will speed up the process.

3. Make sure that you've already built a Drop-in integration and proceed with Apple Pay integration.

Configure Drop-in

const applePayConfiguration = {
    amount: { // amount object from create payment session response
        value: 1000,
        currency: "EUR" 
    },
    countryCode: "DE", // countryCode field from create payment session response
    configutation: {
        merchantName, // shopperStatement field from create payment session response
      merchantIdentifier // merchantId value from configuration object for applepay (from create payment session response)
    }
};

Include the applePayConfiguration object when creating a configuration object:

const configuration = {
  // ...  other required configuration
  paymentMethodsConfiguration: {
    applepay: applePayConfiguration
  }
};
840

Apple Pay payment method

📘

Important

The Apple pay confirmation screen presents the payment value, which is taken from the payment session. If the customer applies a coupon you should:

  • unmount the existing Drop-in,
  • create a new payment session,
  • mount a new Drop-in instance.

Thanks to that, the customer will see the proper price on the Apple payment sheet.
If the amount object will be different than the one received in the payment sessions response, then the payment will not succeed.

Test your integration

Use Apple's test card numbers to test your integration.

For a full list of test cards and instructions how to add these to your test device, see Sandbox testing on Apple's Developer website.

🚧

To create an Apple Pay sandbox environment and test payments, you need an Apple Developer account. This also applies if you're using Adyen's Apple Pay certificate.

When you are ready with your integration, reach out to the Cleeng Broadcaster Success Specialists team to turn on the Apple Pay payment method on production.

Google Pay setup

With Google Pay, customers can make purchases using credit or debit cards stored in their Google account.

When a customer pays with Google Pay on websites, Google Pay shows a payment sheet where they select their preferred card payment method and confirm their purchase.

Availability

For more information on Google Pay availability, refer to:

Supported networks

Our integration supports the following card networks:

  • American Express: Supported globally.
  • Discover: Supported in the US.
  • Elo: Supported in Brazil; you must have a local business entity in Brazil to offer this to customers.
  • Interac: Supported in Canada; you must have a local business entity in Canada to offer this to customers.
  • Maestro: Supported in the EU and Brazil.
  • Mastercard: Supported globally.
  • Visa: Supported globally.

When customers select Google Pay, the Drop-in presents the Google Pay payment sheet where customers choose a card they want to use. If customers select a card that requires 3D Secure authentication, Drop-in also handles redirecting customers to another website to complete the verification.

Prerequisites

  1. Reach out to the Cleeng Broadcaster Success Specialists team to add the Google Pay payment method to your account.
  2. Make sure that you've already built a Drop-in integration and proceed with Google Pay integration.

Note:
When you are ready with your integration for production release, you'll need to reach out to the Cleeng Broadcaster Success Specialists team and send a list of domains where you will use GooglePay (production only) and screenshots showing the purchase flow for Google website verification.

Configure Drop-in

Load the Google Pay API JavaScript library

We recommend that you preload the Google Pay API JavaScript library, by including the following script on your checkout page:

<script src="https://pay.google.com/gp/p/js/pay.js"></script>

Required configuration

Include the googlePayConfiguration object when creating a configuration object:

Parameter nameRequiredDescription
amount.valueyesThe value of payment. Pass the value from the payment session response.
amount.currencyyesThe currency code, pass the value from the payment session response.
countryCodeyesPass the countryCode from the payment session response.
environmentyesSet to PRODUCTION when you're ready to accept live payments. The default value is TEST.
const googlePayConfiguration = {
    amount: { // amount object from create payment session response
        value: 1000,
        currency: "EUR" 
    },
    countryCode: "DE", // countryCode field from create payment session response
    environment: "TEST", //Set this to PRODUCTION when you're ready to accept live payments
    configutation: {
        merchantName, // shopperStatement field from create payment session response
      gatewayMerchantId, // gatewayMerchantId value from configuration object for googlepay (from create payment session response)
      merchantId //  merchantId value from configuration object for googlepay (from create payment session response)
    }
};
const configuration = {
  // ...  other required configuration
  paymentMethodsConfiguration: {
    googlepay: googlePayConfiguration
  }
};

Test your integration

To test Google Pay, log in to a Google account and create a Google Pay wallet with the details of a real card, not a test card. When you make a test payment, the card number is automatically mapped to Adyen test card number starting with 4111, so the real card is not charged.

840

Google Pay payment method

Note that in the live environment Google Pay will only be available if:

  • The customer is logged in to their Google account.
  • The customer has at least one valid payment method on their Google Pay account.

Once Google Pay is successfully tested, proceed with the Google website verification step.

Google website verification

The verification is done by Google before giving access to production use. The verification process might take about two days. Once the verification is successful, Cleeng can turn on Google Pay for you.

To prepare for Google website verification, you need to provide the screenshots showing the purchase flow.

You need to provide the following screenshots:

  • Item selection screen - when a customer is browsing for an offer
  • Pre-purchase screen - when a customer is ready to make a purchase
  • Payment method screen - when a customer selects Google Pay as payment method
  • Google Pay API payment screen - when a customer is shown the payment info they have saved to Google Pay
  • Post-purchase screen - when a customer has successfully purchased an offer.

Please also refer to Google Brand guidelines.

When you are ready with your integration for production release, reach out to the Cleeng Broadcaster Success Specialists team and send a list of domains where you will use GooglePay (production only) and screenshots showing the purchase flow.

Once it is verified and accepted by Google, Cleeng will turn on Google Pay on production for you.

3D Secure setup

Overview

To complete a card payment with 3D Secure authentication, the customer needs to additionally verify their identity with their bank. 3D Secure 2.2 authentication can be performed in two ways:

  • Native - customer authentication is performed within your website
  • Redirect - customers are redirected to the card issuer’s site where they are asked to provide additional information to complete authentication

Native authentication is more user-friendly, but a redirect flow should be also supported to provide for the cases when authentication falls back to redirecting the customer to the card issuer’s site.

When making a card payment with native 3D Secure 2.2 authentication:

  1. Configure Drop-in to collect the card holder name.
  2. Provide the required 3D Secure parameters when making a payment request.
  3. Submit the authentication result if you receive an action object from /connectors/adyen/initial-payment.
  4. If the payment was routed to the 3D Secure 2.2 redirect flow, handle the redirect result.
  5. Test your integration.
  6. When you will be ready to production use, reach out to our Broadcaster Success Specialists team to turn 3DSecure on for you.

For higher authentication rates, we recommend that you collect the card holder name and billing address for payments with 3D Secure authentication.

Prerequisites

Make sure that you've already built a Drop-in integration.

Configure Drop-in

When creating an instance of Drop-in, you can optionally specify:

FieldDescriptionDefault
hasHolderNameRecommended. Set to true to show the input field for the card holder name.false
holderNameRequiredRecommended. Set to true to make the card holder name a required field. To show the field, you additionally need to set hasHolderName to true.false
nameString that is used to display the payment method name to the customer.Depends on customer locale
billingAddressRequiredSet to true to collect the customer's billing address. It is recommended for 3D Secure.false
const configuration = {
   paymentMethodsConfiguration: {
       card: { // Sample Drop-in configuration for 3D Secure
          hasHolderName: true,
          holderNameRequired: true,
          billingAddressRequired: false,
          name: 'Credit or debit card',
       },
       ...
   }
   ... // rest of the configuration object
};

Make a payment

When the customer selects to pay, the Drop-in calls the onSubmit event, which contains a state.data.

Make a /connectors/adyen/initial-payment request, specifying also parameters required for 3D Secure: origin, browserInfo, and recommended billingAddress.

const configuration = {
  onSubmit: (state, component) => {
    const {
      data: { paymentMethod, browserInfo, billingAddress }
    } = state;
    const origin = window.location.origin;
    //make a request to /connectors/adyen/initial-payment passing paymentMethod, browserInfo, billingAddress, origin and orderId
  },
  ... // rest of the configuration object
};

Your next steps depend on whether the /connectors/adyen/initial-payment response contains an action object.

action.typeDescriptionNext steps
No action objectThe payment was finalized without the 3D Secure authentication.Present payment result to the customer
threeDS2The payment qualifies for 3D Secure 2, and will go through the authentication flow.Submit the challenge result (see Submit authentication results)
redirectThe payment is routed to the 3D Secure 2 redirect flow.Handle the redirect result (see the section below)

Submit authentication results

Drop-in uses dropin.handleAction(action) to perform the required authentication flow. If the issuer requires customer interaction, the Drop-in presents the challenge screen. The Drop-in then calls the onAdditionalDetails event.

Get the state.data from the onAdditionalDetails event, and pass it to /connectors/adyen/initial-payment/finalize.

{ 
    details: {
      threeDSResult: "eyJ0cmFuc1N0YXR1cyI6IlkifQ=="
  },
  ...
}
const configuration = {
  onAdditionalDetails: (state, component) => {
    // pass state.details to /connectors/adyen/initial-payment/finalize endpoint
  },
  ... // rest of the configuration object
};

Handle the redirect

Drop-in uses dropin.handleAction(action) to redirect the customer to the issuer page (the action.url from the /connectors/adyen/initial-payment response) to perform 3D Secure authentication.

const onAdyenSubmit = async (state, component) => {
  const {
    data: { paymentMethod, browserInfo, billingAddress }
  } = state;
  const { errors, responseData } = await submitAdyenPayment( // call /connectors/adyen/initial-payment
    paymentMethod,
    browserInfo,
    billingAddress
  );
  ...
  if (responseData.action) {
    component.handleAction(action); // Drop-in action handler
    return;
  }
}

When the customer completes authentication, the payment is authorized. The customer is redirected back to the returnUrl from your /connectors/adyen/initial-payment request. The redirect is via an HTTP GET and is appended with the Base64-encoded redirectResult.

GET /?shopperOrder=12xy...&&redirectResult=X6XtfGC3%21Y.... HTTP/1.1
Host: www.your-company.com/checkout

To verify the payment result, make another API request with the redirectResult parameter:

  1. URL-decode the redirectResult
  2. Make a request to /connectors/adyen/initial-payment/finalize to finalize the payment.

Present the payment result

/connectors/adyen/initial-payment/finalize endpoint will return payment response if the payment was successful, or a proper error message if the payment was unsuccessful.

  • Refused - The payment was refused. Ask the customer to try the payment again using a different payment method.
  • Error - There was an error when the payment was being processed. Inform the customer that there was an error processing their payment.

Test your integration

Use test card for 3DSecure to test the flow.

When you are ready for production use, reach out to the Cleeng Broadcaster Success Specialists team to turn 3D Secure on for you.

Up Next

Congratulations! Now, you're ready to accept payments with Adyen.

If you're interested in more options, consider the following:

  • You can continue to PayPal Payment Setup if you want to offer payments with PayPal Express, too.

  • Go to Payment-free Setup if you would like to offer free content.

  • If you're happy with the payment setup but wish to make the user experience for your customers even better, you can go on and implement "My Account" feature, by following My Account-Web use case.