To be able to sell your content and accept payments from your customers, you need to configure payments for your checkout. To do so, follow the steps as specified below.

📘

Before you start:

1. Make sure you have done the basic configuration as described in Quick Start. Remember to use the sandbox environment if you want to do some testing first.
2. Install the NPM Package (see the MediaStore SDK Package documentation).
3. Import components (see the Integration Guide).

❗️

Important!

Remember to configure dunning action settings and webhooks for each payment method that you want to use.

You need to set up dunning action settings and webhooks before the first recurring payment.

See more information in Step 7: Configure recurring payments.

Step 1: Select payment methods

Check the supported payment methods and decide what payment methods you want to offer to your customers.

MediaStore SDK Components supports payments with:

• Adyen, including card payments with 3D Secure support, Apple Pay, Google Pay, iDEAL, Sofort (see the table below which shows the supported Adyen payment methods)
• PayPal Express Checkout

It means that if Cleeng is your Merchant of Record (MoR) you can simply embed MediaStore SDK components, proceed with a few setup steps, and you are ready to go live.

Step 2: Check the prerequisites

Adyen only: Allowed origins & domains

For Adyen, you need to provide the necessary information on allowed origins and domains to Cleeng Broadcaster Success Specialists team (BSS).

Please note that validation might take one or two days (e.g. for Google Pay), depending on the payment method.

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

Step 3: Enable payment methods: sandbox

To start using Adyen and/or PayPal payment methods with MediaStore SDK Components, you need to make sure that you have any Adyen and/or PayPal payment method enabled.

Each payment method is recognized by its paymentMethodId.

To add (enable) a supported payment method (in other words, generate this payment method’s ID), please contact the Broadcaster Success Specialists team (BSS) and:

• inform what payment methods you want them to turn on for you in the sandbox environment, and
• provide the required information for these payment methods (as per the table in Step 2).

Note: No additional details are needed for PayPal. Simply inform the Broadcaster Success Specialists team (BSS) to turn it on for you.

🚧

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 your integration and your payment methods, you should add the payment method to the production environment. Please note that once it is enabled (added), it is immediately visible on production.

To avoid it being immediately visible, you can use filtering.

Step 4 Optional configuration

You can customize the look and feel of Adyen payment in the purchase section by passing a special prop adyenConfiguration.

The availability of customization options depends on the payment method:

See the examples for card and iDEAL below. For details of additional configuration, see the MediaStore SDK Package documentation.

Card

const paymentMethodsConfiguration = {
    card: {
      name: 'Credit Card', //	String that is used to display the payment method name to the shopper.
      billingAddressRequired: true, // Set to true to collect the shopper's billing address and mark the fields as required. Default: false
      billingAddressMode: 'partial', // If billingAddressRequired is set to true, you can set this to partial to require the shopper's postal code instead of the full address. Default: 'full'
      brands: ['visa'], // Array of card brands that will be recognized. For a list of possible values, refer to https://docs.adyen.com/payment-methods/cards/custom-card-integration#supported-card-types. Default: ['mc','visa','amex']
      brandsConfiguration: { // Object where you can customize the icons for different brands.
        visa: {
            icon: 'https://...'
        }
      },
      showBrandIcon: true, // Set to false to not show the brand logo when the card brand has been recognized. Default: true
      showBrandsUnderCardNumber: true, // Shows brand logos under the card number field when the shopper selects the card payment method. Default: true
      positionHolderNameOnTop: true, // Renders the cardholder name field at the top of the payment form. Default: false
      styles: {}, // Set a style object to customize the card input fields. For a list of supported properties, refer to https://docs.adyen.com/payment-methods/cards/custom-card-integration#styling
      billingAddressAllowedCountries: ['US', 'CA', 'BR', 'PL'], // Specify allowed country codes for the billing address. Default: The Country field dropdown menu shows a list of all countries.
      minimumExpiryDate: '05/26', // If a shopper enters a date that is earlier than specified here, they will see the following error: "Your card expires before check out date." Format: 'mm/yy'
      autoFocus: true // Automatically move the focus from date field to the CVC field. The focus also moves to the date field when the entered card number reaches the expected length. Default: true
    },
}

iDEAL

const paymentMethodsConfiguration = {   
	ideal: {
      showImage: true, //	Set to false to remove the bank logos from the iDEAL form. Default: true
      issuer: "0031", // Optional. Set to an iDEAL issuer ID to preselect a specific bank, refer to: https://docs.adyen.com/payment-methods/ideal/web-drop-in?tab=live_payments_2#issuer-ids
      highlightedIssuers: ['0761', '0802'] // Optional. Set to the iDEAL issuer IDs for banks you want to show on top of the dropdown menu.
      placeholder: 'Choose your bank' // Optional. The string you want to show as the dropdown menu text. Custom translation configuration overrides this value. Default: 'Select your bank'
    },
}

Step 5 Test payments

After you have imported the components (at least one of Purchase, Checkout, MyAccount or PaymentInfo), test all the payment methods you have configured.

Apple Pay testing

Please refer to Apple's Developer website for a list of test cards and instructions on how to add these to your test device.

🚧

You need an Apple Developer account to create an Apple Pay sandbox environment and test payments. This is also applicable if you're using Adyen's Apple Pay certificate.

Card testing

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

2. Test 3DS flows (redirect and native) using these test cards. (Native flow - customer authentication is performed within your website; redirect flow - customers are redirected to the card issuer’s site where they are asked to provide additional information to complete authentication).

   To test the redirect flow, use the following config method: setEnable3DSRedirectFlow().
   Usage sample:

   JavaScript

   import { Config } from "@cleeng/mediastore-sdk";
   Config.setEnable3DSRedirectFlow();
   

Google Pay testing

To test Google Pay, log in to a Google account and add 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.

When you are ready with your integration for production release, reach out to the Cleeng Broadcaster Success Specialists team and provide us with screenshots showing the purchase flow for verification.

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

iDEAL testing

Different test banks for testing iDEAL payments are provided. You can test for payments with different Adyen statuses: Cancelled, Pending, or Refused. In Cleeng you will see these payments either as authorized or rejected.

In order to test a given scenario, select a corresponding test bank name, e.g. "Test Issuer Cancelled" to simulate a cancelled payment situation (see the screenshot below for the illustration of what it might look like).

We recommend that you test each scenario before you go live.

Sofort testing

Sofort does not have a test environment so you are redirected to the Sofort live environment even when making a payment from the Adyen test environment.

You can test successful and rejected payments in EUR for Sofort. For other scenarios, use real payment details and small amounts in your live environment.

Testing a successful payment

To test your integration, use the details below:

🚧

Warning

If you use a different bank name (live data), it will initiate a real payment. Please note that this payment will not be transferred to your account, it will be lost. It is not possible to reverse or refund such a payment.

To test a successful payment, follow the steps:

1. Select Sofort payment method (see the screen below)

2. After redirection to the Sofort website, under Bank name, choose DemoBank (available only in Germany).
3. Select Next.
4. Enter any test login details for Account number and PIN.
5. Select Next.
6. Select an account.
7. Select Next.
8. Enter any test TAN (Transaction Authentication Number), e.g. 12345.
9. Select Next.
10. Check if the transaction was successful. Go to the customer account details page in the dashboard and check if the customer has a transaction and active subscription.

Testing a rejected payment

Please note that for Adyen - if a customer cancels a payment, then the transaction is treated as rejected.

To test a rejected payment, follow the steps:

1. Select Sofort payment method.
2. After redirection to the Sofort website, under Bank name, choose DemoBank (available only in Germany).
3. Select Next.
4. Select the X icon.
5. Select Cancel payment.
6. You should present a screen as in the screenshot presented below, and the customer should not have an active subscription (go to the customer account details page to check).

Step 6: Enable payment methods: production

When you are ready for production, contact the Broadcaster Success Specialists team to turn the payment methods on for you in the production environment.

🚧

You need to set up dunning action settings and webhooks (see Step 7) before the first recurring payment. As by default, once payment methods are turned on in the production environment, they are immediately visible to customers.

To avoid them being immediately visible, you can use filtering.

Step 7: Configure recurring payments

If you want to sell subscriptions, in order to receive and process the payments, you need to configure the below settings to get the recurring billing in place.

Please set up both topics respectively to complete the requirements for a frictionless checkout experience.

• configure Dunning Action Settings
• subscribe to webhooks and verify the setup with the List of endpoints

❗️

Important!

Remember to configure dunning action settings and webhooks for each payment method that you want to use.

You need to set up dunning action settings and webhooks before the first recurring payment.

🚧

Note:

Make sure you subscribe to the refundPayment webhook, otherwise refunds will not work.

Useful Information

Payment methods filtering

By default MediaStore SDK Components present all payment methods enabled by the Cleeng Broadcaster Success Specialists team.

As a broadcaster you have an option to filter payment methods and select which of the payment methods that have been enabled by the Cleeng Broadcaster Success Specialists team are visible to your customers.

You are able to set:

• Array of payment methods that will be presented in the checkout: Config.setVisibleAdyenPaymentMethods(["card", "googlepay"]). Available options: applepay, card, googlepay, ideal, sofort
• Option to hide PayPal (by default PayPal will be visible when turned on by the Cleeng Broadcaster Success Specialists team): Config.setHidePayPal();

Thanks to this you are able to control which payment methods will be displayed in a given environment (sandbox or production).

🚧

Remember that if you do not set this, all payment methods enabled by the Cleeng Broadcaster Success Specialists team in the production environment will be immediately visible to your customers.

Transactions for authentication purposes

By default, Adyen online bank payment methods, like iDEAL, Sofort don’t support transactions for authentication purposes (zero-amount), which is required in case of:

• free trial,
• 100% coupon code,
• add/update payment details feature.

Cleeng offers support for transactions for authentication purposes with these payment methods by charging the customer 0.10 EUR during the initial payment. The amount is refunded once the transaction is completed.

MediaStore SDK Components integration has this solution implemented by default. This means that the order in which payment methods are presented may change:

• for standard offers (paid) - recommended payment methods are presented first (e.g. iDEAL for Netherlands)
• for free offers or Add Payment Details feature - all online bank payment methods (e.g. iDEAL, Sofort) will be presented below standard payment methods that support zero-amount transactions (card, Apple Pay, Google Pay).