Adyen Payment Setup

👍

Check our Reference Materials for more details about MediaStore SDKMediaStore SDK - MediaStore SDK consists of components that will empower you to build and design a seamless checkout process, help visitors become subscribers, and then allow you to manage their subscription to your service in an intuitive and trusted manner..

Migration from originKey to clientKey

🚧

Please perform this step if you already have an existing integration with MediaStore SDK.

With MediaStore SDK 2.0 we migrate from Adyen origin key to clientKeyclientKey - The client key is a public key to authenticate requests from web environment to Adyen. Client key provided by Cleeng allows you to setup Adyen iframe and enable purchase with card. Cleeng client key has a list of allowed origins or domains from which Adyen will expect to get your requests.. Your originKey will still work, but we recommend moving to the clientKey.

This change requires upgrading Adyen script to v3.10 - v3.12.1 and passing clientKey instead of originKey.

You can find more details in Adyen docs.

Please check the recipe below for the details of migration:

Purchase using Adyen

❗️

Recurring Payment Settings

We believe that by now you have configured the webhooks and dunning action settings for the recurring to work. If you have not performed those actions, please refer back to Webhooks and Dunnning Actions Settings or contact our BSS team.

Purchase using Adyen involves:

  1. Adding your domain to allowed origins
  2. Setting up Adyen Component
  3. Setting up the Payments

Add your Domain to Allowed Origins

To be able to process the payment via the Adyen connector you need to add your domain to allowed origins.

If Cleeng will be a merchant of records for your solution and all the necessary configuration has been done including webhooks and dunning actions, the next step is to send an email to the BSS team.

In the email:

  • add a list of your origins, where you want to use an Adyen component
  • provide information about what environment they should be added to: test, production or both
  • provide a domain name with http:// or https:// (depending which one is going to be used).

When your origins are added, you will be able to generate an Adyen Component.

If you run the MediaStore app with default settings, it will be open on http://localhost:3003. This origin is already added to the allowed list, so you can start implementing the Adyen Component. Remember that if you publish your page on another domain, your Adyen Component will work only if you have added this origin to the allowed list.

Set up Adyen Component

To enable purchase with Adyen you need to set up an external Adyen component, which will provide secure data encoding.

To set up an Adyen component you can use [Adyen] Create Component recipe OR follow the steps presented below it.

Follow these steps to set up an Adyen component:

  1. Include the following script in the <body> above any other JavaScript in your checkout page:
<script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.10.1/adyen.js"></script>
  1. Add the CSS file:
<link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.11.4/adyen.css">
  1. Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered.
<div id="adyen-card-component"></div>
  1. Create a configuration object with the following parameters:

Parameter name

Required

Description

showPayButton

Adyen provides a Pay button. To use the Pay button for each payment method, set this to true. The Pay button triggers the onSubmit event.

environment

Use "test". When you're ready to accept live payments, change the value to live.

clientKey

Client key is generated by us and it can be used by each domain on 'allowed list'. Contact us to add your origin to allowed ones. Then use value for test_I4OFGUUCEVB5TI222AS3N2Y2LY6PJM3K or live_BQDOFBYTGZB3XKF62GBYSLPUJ4YW2TPL for production

onSubmit

Callback function which is called when the shopper selects the Pay button. This applies if you settled showPayButton to true

onChange

Callback function which is called when shopper provides the required payment details

const configuration = {
      showPayButton: true,
      environment: "test", // test || live
        clientKey: "test_I4OFGUUCEVB5TI222AS3N2Y2LY6PJM3K", //Cleeng client key for testing
      onSubmit: handleOnSubmit,// Your function for handling onSubmit event
      onChange: handleOnSubmit // Your function for handling onChange event
    };
  1. Use the configuration object to create an instance of AdyenCheckout. Then use the checkout.create method to create and mount an instance of the payment method Component.

    Example for card:

const checkout = new AdyenCheckout(configuration);
const card = checkout.create('card').mount('#adyen-card-component');
Adyen card component - MediaStore SDKAdyen card component - MediaStore SDK

Adyen card component - MediaStore SDK

  1. When the shopper enters data in the card input fields, the onChange callback is called. If you are using Pay/Confirm button, call the .submit() method from your button implementation. If state.isValid is true, collect the values passed in state.data.paymentMethod. These are the shopper details that you will need to make the payment.
    Pass the encoded card details (state.data.paymentMethod) to MediaStore API.
    Here is an example of a received state.data object:
{
  browserInfo: {...},
  paymentMethod: {
    type: "scheme",
    encryptedCardNumber: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    encryptedExpiryMonth: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    encryptedExpiryYear: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    encryptedSecurityCode: "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
 },
 riskData: {...}
}

If you need more details about the Adyen component check Adyen documentation. You can see some differences between Adyen and Cleeng documentation because of Cleeng integration with Adyen.

Set up Payment

After the customer filled out the form and you received an encoded card data - send a request to /connectors/adyen/payments with orderId and received card object to make an initial payment.

🚧

Remember that order should be already updated with the correct paymentMethodId (your Adyen payment method Id).

Please note that using a wrong payment method Id will cause problems with recurring payments (they won't be processed).

If the purchase was successful, the customer becomes a subscriber of your content, and will be charged for every subsequent period automatically.

Some of the cards may be not supported, you will then receive an appropriate error message.

Adyen payment flowchartAdyen payment flowchart

Adyen payment flowchart

Payment Methods

Supported payment methods in Adyen:

  • VISA credit card
  • Mastercard credit card
  • American Express credit card
  • Maestro credit card

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.


Did this page help you?