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.
- Have any Adyen and/or PayPal payment methods enabled
- Provide the necessary information on allowed origins and domains for Adyen payment methods
- 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:
Payment method | What to provide to BSS team |
---|---|
Card (with 3DS support) | Add origin to allowed origins for Adyen card payment. Provide a list of your origins, where you want to use MediaStore SDK payment-related components (with information about what environment they should be added to: sandbox, production, or both). Provide an origin name with http:// or https:// (depending on which one is going to be used). |
ApplePay | Add a domain association file to your website (see here for details). Once added: provide a domain list where you will use an Apple Pay payment (with distinction: sandbox/production). |
GooglePay | Provide a list of domains where you will use GooglePay (production only). You will also need to provide screenshots showing the purchase flow (see more in the Google website verification. |
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.)

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.
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.)

Self-service customer account with MyAccount Component
Test your integration
Congratulations! Now that you've done the configuration, it's time to test it.
- Register a new customer in the platform, to see the checkout page.
- Choose an offer and buy it using various payment methods (see how to test different payment methods).
- 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
- Before going live, use the Adyen test card numbers to test your integration.
- 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.
Updated 3 days ago