Integration Guide

Overview

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

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.

📘

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

Please see below the overview of core concepts connected with payments to get ready for payment setup.

Supported payment gateways

MediaStore SDK supports payments with Adyen and PayPal Express Checkout with Cleeng being Merchant of Record (MoR).

Payment method ID

Each payment method is recognized by its paymentMethodId.

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

🚧

Important

Remember to always update order with the correct payment method ID of the method that a customer has chosen.

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

Adyen only: Add your domain to allowed origins

For Adyen, you need to add your domain to allowed origins. For more information, see Add your Domain to Allowed Origins section.

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.

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.

57065706

Full purchase flow with Checkout Component

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.

56905690

Self-service customer account with MyAccount Component

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.
  3. After a successful purchase, go to the customer account to check if the offer the customer bought is visible there.

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.


Did this page help you?