Integration Guide

Overview

MediaStore SDK Components Library with ready-to-use components is our latest and most convenient implementation option to be used with React.JS.

With just two components: Checkout and MyAccount you get a full purchase flow and a complete self-service customer account.

Note: If you would like to find out more about all components, please see Components Library Overview.

The following steps will guide you through the integration process:

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 - go to the MediaStore SDK Package documentation.
3. Configure payment settings.
4. Set up the recurring billing.
5. Import Checkout component.
6. Import MyAccount component.
7. Test your integration (including testing your payment methods).

📘

Good to know

You can visit github with the demo application which shows how to integrate with Cleeng MediaStore SDK Components Library.

Configure payment settings

The following points are the general prerequisites to start using Adyen and PayPal payment methods (see Supported payment gateways) with the MSSDK Components.

1. Have any Adyen and/or PayPal payment methods enabled
2. Provide the necessary information on allowed origins and domains for Adyen payment methods
3. Set up the recurring billing

Supported payment gateways

MediaStore SDK Components supports payments with:

• Adyen, including card payments with 3D Secure support, Apple Pay, and Google Pay (see the supported Adyen payment methods section)
• PayPal Express Checkout

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

Payment method ID

To start using Adyen and 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.

If you want to add (enable) a supported payment method (in other words, generate this payment method’s ID), please contact the Broadcaster Success Specialists team (BSS).

Adyen only: Allowed origins & domains

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

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

👍

Tip

When contacting the Broadcaster Success Specialists team (BSS) please provide both: the payment method and the respective information for this payment method (a list of origins or domains).

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

For details of additional configuration, see the MediaStore SDK Package documentation.

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

Set up the recurring billing

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

Import Checkout component

Import the Checkout component in the place in your application where you want it to be.

It is a big component that contains the whole purchase flow feature. It is a recommended option and the easiest way for broadcasters who don't want to dive into details. You can just use it "as is" in the context of your app.

For more details, see the Checkout section in the Components Library Overview.

(If you want to use smaller components (subcomponents), see the full list of components and select the ones that you want.)

Import MyAccount component

Import the MyAccount component in the place in your application where you want it to be.

It is a big component that contains a complete self-service customer account that you can implement for web. It is a recommended option and the easiest way for broadcasters who don't want to dive into details. You can just use it "as is" in the context of your app.

For more details, see the MyAccount section in the Components Library Overview.

(If you want to use smaller components (subcomponents), see the full list of components and select the ones that you want.)

Test your integration

Congratulations! Now that you've done the configuration, it's time to test it.

1. Register a new customer in the platform, to see the checkout page.
2. Choose an offer and buy it using various payment methods (see how to test different payment methods).
3. After a successful purchase, go to the customer account to check if the offer the customer bought is visible there.

Test payment methods

Test the payment methods you have configured:

Card testing

1. Before going live, use the Adyen test card numbers to test your integration.
2. Test 3DS flow using special cards.

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.

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 testing

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.

Remember to provide us with screenshots for verification

Other options

Big Checkout and MyAccount components are not what you're looking for?

No problem, you can use smaller components (subcomponents) of your choice. See the full list of components and select the ones that you want.