Components Library Overview

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

To give you a better picture of what it is, imagine a big box with building blocks: this big box is the MediaStore SDK Components Library, and the building blocks are components.

You want to build a house - in our case a checkout or self-service customer account. So you simply pick the building blocks that you need and put them in the places where you want them to. In this way, you can build your application as you want it.

What is more, you can style your building blocks in the way you want. For more information, see the Styling section.

Note: Please visit these links if you want to find out more about MediaStore SDK architecture and authorization.

📘

Good to know

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

Main components

Checkout

With this big component, you get a complete purchase flow for your customers.
When you choose it, you get the following components:

For implementation information, please refer to MediaStore SDK Package documentation - Checkout component.

You can see the default look and feel in the screens in the respective components sections below.
You can style it according to your needs. For details, see Styling.

MyAccount

It is a big component that contains the whole "My Account" feature. When you choose it, you get the following components:

For implementation information, please refer to MediaStore SDK Package documentation - MyAccount component.

You can see the default look and feel in the screens below:

28802880

"My Account: Plan Details" - MediaStore SDK

28802880

"My Account: Your Payments" - MediaStore SDK

28802880

"My Account: Update Profile" - MediaStore SDK

Subcomponents

Register

This component is responsible for displaying a basic Cleeng registration form. It is a registration form with consents approval for new customers (who don't have an account yet).

Registered customers are shown in the 'Customer Accounts' dashboard. You can go to 'Customer Accounts' page on sandbox or production.

For implementation information, please refer to MediaStore SDK Package documentation - Register component.

You can see the default look and feel of the form is in the screen below:

16121612

"Register" Form - MediaStore SDK

You can style it according to your needs. For details, see Styling.

Login

This component is responsible for displaying a basic Cleeng login form.

For implementation information, please refer to MediaStore SDK Package documentation - Login component.

You can see the default look and feel of the form is in the screen below:

16121612

"Login" Form - MediaStore SDK

You can style it according to your needs. For details, see Styling.

PasswordReset

This component is responsible for displaying a reset password form. It allows customers to reset their password if for example, they forget it.

For implementation information, please refer to MediaStore SDK Package documentation - PasswordReset component.

You can see the default look and feel of the form in the screen below:

16121612

"PasswordReset" Form - MediaStore SDK

You can style it according to your needs. For details, see Styling.

CheckoutConsents

The CheckoutConsents component is a form that contains all consents that have to be confirmed by a customer. It is used to check the consents after login.

For implementation information, please refer to MediaStore SDK Package documentation - CheckoutConsents component.

You can see the default look and feel of the form in the screen below:

16061606

"Consents" Form - MediaStore SDK

You can style it according to your needs. For details, see Styling.

Capture

The Capture component displays a form used for gathering customer data that a broadcaster wants to collect.

A broadcaster can enable the capture feature and configure its settings in the Cleeng dashboard. For more information, see Cleeng Capture.

For implementation information, please refer to MediaStore SDK Package documentation - Capture component.

You can see the default look and feel of the form is in the screen below:

803803

"Capture" Form - MediaStore SDK

You can style it according to your needs. For details, see Styling.

Purchase

Purchase is a component that enables customers to buy an offer in the Cleeng system.

As mentioned before, you have to be logged in before showing that component. To do so, use the Login/Register component.

Note:
Before showing this component you may need to change the offerId setting (if it is different than configured earlier).

For implementation information, please refer to MediaStore SDK Package documentation - Purchase component.

You can see the default look and feel of the form is in the screen below:

551551

"Purchase" Screen - MediaStore SDK

You can style it according to your needs. For details, see Styling.

PlanDetails

It allows your customers to manage their subscriptions.

This component comprises the following two:

If you want to give your customers access to both their current subscription plan and also present them with options to upgrade, the PlanDetails component is a perfect choice to save time and effort.

For implementation information, please refer to MediaStore SDK Package documentation - PlanDetails component.

You can see the default look and feel of the form in the screen below:

16021602

"Plan details" - MediaStore SDK

You can style it according to your needs. For details, see Styling.

Subscriptions

This component lists all subscriptions that are linked with a given logged-in customer.

For implementation information, please refer to MediaStore SDK Package documentation - Subscriptions component.

You can see the default look and feel of the Subscriptions component in the screen below:

16021602

"Subscriptions" - MediaStore SDK

You can style it according to your needs. For details of styling options see Styling.

SubscriptionSwitches

It shows a list of available switches (upgrade options) for a given subscription. It is a must-have component if you want to offer customers more choice.

For implementation information, please refer to MediaStore SDK Package documentation - SubscriptionSwitches component.

You can see the default look and feel of the SubscriptionSwitches component presenting upgrade options in the screen below:

16141614

"Subscription Switches" - MediaStore SDK

You can style it according to your needs. For details, see Styling.

PaymentInfo

Select this component if you want to show your customers all information about their payments:

  • payment methods
  • transactions that took place in the past (TransactionList component)

For implementation information, please refer to MediaStore SDK Package documentation - PaymentInfo component.
You can see the default look and feel of the PaymentInfo component in the screen below:

16061606

"Payment Info" - MediaStore SDK

You can style it according to your needs. For details, see Styling.

TransactionList

It contains only information about all transactions that took place in the past.

For implementation information, please refer to MediaStore SDK Package documentation - TransactionList component.

You can see the default look and feel of the list of transactions in the screen below:

16061606

"Transactions List" - MediaStore SDK

You can style it according to your needs. For details, see Styling.

UpdateProfile

It displays all information about a current customer. It also empowers a customer to change that profile details.

For implementation information, please refer to MediaStore SDK Package documentation - UpdateProfile component.

You can see the default look and feel of the UpdateProfile component in the screen below:

16021602

"Update Profile" - MediaStore SDK

You can style it according to your needs. For details, see Styling.

Up next

Ready to start? Go ahead with Integration Guide.


Did this page help you?