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.
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.
The MediaStore SDK has been built upon four main pillars as described below,
Let's see each of them with their offerings.
- Authentication - login form, the registration form (with consents approval) and ability to reset a password
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
MyAccount is a solution for viewers that allows them to manage their subscriptions. It is divided into 3 blocks with the following features:
- It provides the details about the viewer's current plans with an option to unsubscribe from the active subscription.
It provides viewers with information about the current payment method.
It provides an option for the viewers to watch the list of transactions.
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.
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
- Contact form
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
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
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
- navigator (set browser language)
- localStorage (set key i18nextLng=LANGUAGE)
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.
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,
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
Updated 2 days ago
Now that you read about MediaStore SDK and it's capability, let's get started with MediaStore SDK integration.
|Getting Started with MediaStore SDK|