What is MediaStore SDK?

Introduction

When the viewers want to subscribe to your OTT package, the main 4 steps that he/she will need to go through as below:

  • Register an account with you,
  • Choose the offer package of their preference,
  • Enter a coupon code (if applicable), and
  • Enter their payment details

After subscribing, viewers will want to manage their subscriptions by performing different actions like,

  • Changing or updating the plans,
  • Update payment methods,
  • Update profile details, and
  • finally, managing consents.

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.

MediaStore SDK github package includes a best practice checkout and myAccount example using Cleeng API.

📘

Try the demo Application here.

📘

The demo application is connected with our test offer, but

You can pass your sandbox offerIdofferId - Offer identification in Cleeng. Each offer (subscription, season pass, VOD, live event) has his own offerId. and publisherIdpublisherId - Publisher identification in Cleeng. This value can be expose to public, it will not allow sensitive data access. (as query param 'offer' / 'publisher').
You can buy offers here using a testing card.
Try our brand new '/my-account' within MediaStore SDK.

Advantages of using the MediaStore SDK

  • It ensures a best practice checkout for optimal conversion, including support for free trials and coupons; it is also compliant with T&C and GDPR.

  • It's simplified setup significantly reduces time spent on integrations when broadcasters leverage their preferred authentication platform and/or payment gateway.

  • You can alter the look and feel of the page quite easily. The MediaStore SDK provides full flexibility in the design, positioning, and language of all of its elements.

  • The page automatically adapts to the screen size of your viewer's device since it is a responsive page.

  • Your pages will work on desktop, laptop, tablets, and mobile phones where a web browser is used.

  • The payment pages are designed to work with all the payment products that you’ve selected.

Features

The MediaStore SDK has been built upon four main pillars as described below,

Let's see each of them with their offerings.

Identity Management

  • Authentication - login form, the registration form (with consents approval) and ability to reset a password

Login page - MediaStore SDK

Checkout

This ultimate checkout application is implemented as a full flow for a user, with payment by PayPal Express or by card (possible through Adyen). These payment methods are all integrated and can be easily used with our API. You can add other payment methods, but it will require additional work for you (building a connector).

Our checkout flow contains 2 main blocks:

  • Offer display - offer details display with information about the trial, coupon codes application, and price breakdown
  • Payment - dynamically loaded payment methods with Adyen and PayPal Express Checkout integration (as an example payment integration) and "thank you" page after successful offer purchase

Offer with trial period - MediaStore SDK

My Account

MyAccount is a solution for viewers that allows them to manage their subscriptions. It is divided into 3 blocks with the following features:

Plan details

  • It provides the details about the viewer's current plans with an option to unsubscribe from the active subscription.

Plan details page - MediaStore SDK

Payment info

  • It provides viewers with information about the current payment method.

  • It provides an option for the viewers to watch the list of transactions.

Payment informations - MediaStore SDK

Update profile

  • Ability to update first name, last name, and email id provided during the registration process.

  • Ability to change the existing password.

  • Ability to manage marketing consents.

Update profile - MediaStore SDK

Viewer Support

The viewer support section helps you to take care of your customers; it provides means for them to reach out to you when they encounter specific issues when they are using your service. Yet we offer full flexibilities to make sure that the design is well-aligned with your brand and need.

By leveraging the viewer support section, you will be able to use the following functionalities:

  • Branded FAQ center
  • Chatbox
  • Contact form

Customised help center

Translation

MediaStore SDK provides full flexibility to adjust your content language in the checkout process. All content in the checkout pages can be translated into 28 languages, but these translations can also be overwritten if you choose.

Translations are done on a react-i18n library, without backend-side features. Therefore the translation bundle for every language is done on build or start the dev server. It's always available under URL (domain_name)/locales/(language_code)/translations.json.

The translations file for language merges the content of any JSON files in the folder /translations/(language_code), and because of it, the folder name for languages and code of languages declared in i18n init needs to be consistent.

To connect a new page in the router with translations, it's important to use both withTranslations() and labeling() higher-order components. Labeling is a custom method that dynamically loads a translation bundle from the public folder for the chosen language if the bundle is not already loaded. You can change the language using languageDetector, e.g.:

  • querystring (append ?lng=LANGUAGE to URL)
  • navigator (set browser language)
  • localStorage (set key i18nextLng=LANGUAGE)

Authorisation

For authorization - we are using JWTJWT - JWT (JSON Web Token) - open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. In Cleeng, JWT payload contains: customerId, publisherId, expiration date. with the payload containing customerIdcustomerId - Customer identification in Cleeng. This value can be exposed to the public, it will not allow sensitive data access. , publisherIdpublisherId - Publisher identification in Cleeng. This value can be expose to public, it will not allow sensitive data access. , and expiration date.

You can decode JWT using packages like jwt-decode or you can also use online decoder like jwt.io

Good to know

  • JWT is valid for 30 minutes and the customer gets logged out automatically after 30 minutes.

  • JWT is required for all methods in the Checkout part (exception: fetch offer details) and for all methods in My Account part. It is returned after successful login and registration.

References

We have our existing clients integrated the product into their solution to improve the conversion. If you like to have a glimpse of those, please click through the below links,

👍

Our clients

Tennis Channel International [Available only for Germany, Austria and Switzerland]
Topic [Available only for US and Canda]
Manorama [Available for India and ROW]

More Screenshots from topic.com to give a quick glance of product in action,

Step 1: Renowned Registration Form

Step 2: Offer Listing/Display

Step 3: Customised Payment screen

Step 4: Payment success screen
You can design the call to action depending upon the payment status

Step 5: User signed automatically to consume the content

Additional - Login Screen for returning users

Please refer to our FAQ if you need more information about the product.
Still have questions, you can write an email to broadcaster support or use this form.

Updated 2 days ago


What's Next

Now that you read about MediaStore SDK and it's capability, let's get started with MediaStore SDK integration.

Getting Started with MediaStore SDK

What is MediaStore SDK?


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.