mediastore-sdk-release-test v1.0.4
MediaStore SDK
This is the Cleeng official component library to be used with React.js.
MediaStore SDK Library consists of components that will allow you to build a seamless checkout process, help visitors become subscribers, and then allow them to manage their subscriptions.
To find out more about MediaStore SDK, see:
Prerequisites
- node v14.15.0
- react v16.14.0
Installation
Install the package with:
NPM
npm i @cleeng/mediastore-sdkor
Yarn
yarn add @cleeng/mediastore-sdkUsage
Configuration
If you have the package downloaded locally and you want to begin to use it, you should start configuration by setting broadcaster settings such as: publisherId (see more it here), offerId (see more it here) or environment (if it's needed).
You can do this by using the Config class which has few important methods to do it.
- Setting
publisherId:
Config.setPublisher("publisherId");where publisherId is your broadcaster ID in the Cleeng system.
- Setting
offerId
Config.setOffer("offerId");where offerId is the ID of the offer created for your broadcaster in the Cleeng system.
- Setting environment:
Config.setEnvironment("environment");where environment is one of the environments listed below:
stagingsandboxproduction
- Setting PayPal urls
// needed for Checkout Paypal payments
Config.setPaypalUrls({
successUrl: "http://localhost:3000/my-account",
cancelUrl: "http://localhost:3000/",
errorUrl: "http://localhost:3000/error"
});- Setting My Account url
// needed for MyAccount update payment details
Config.setMyAccountUrl("http://localhost:3000/acc");You can also style the application by using one of the Config.setTheme() methods but there will be more information about that in the Styling section.
Available components
You can build a complete flow - allowing customers to buy your offering and use their customer accounts - with two main components:
- Checkout - a full purchase flow (starting from registration to purchase)
- MyAccount - a complete customer account environment
If you prefer smaller components, you can use these to implement the exact features you need:
- Register
- Login
- Capture
- Checkout Consents
- Purchase
- PasswordReset
- Subscriptions
- SubscriptionSwitches
- PlanDetails
- PaymentInfo
- TransactionList
- UpdateProfile
Checkout
Checkout is a big component that contains the whole checkout process (from registration to purchase). It contains components listed below:
You can pass a function that will be called after a successful checkout process by using onSuccess prop. You can also select which offer should be purchased by passing offerId prop.
Usage:
<Checkout
onSuccess={() => console.log("success")}}
offerId={'S531234647_PL'}
>MyAccount
MyAccount is a big component that contains the whole My Account feature. The following sections are available in MyAccount:
Usage:
<MyAccount />Register
Register component is a basic Cleeng registration form (see an example here). You can pass a function that will be called after a successful registration process by using onSuccess prop.
There is also a Have an account? button on that form. You can set what exactly will happen on clicking by using onHaveAccountClick prop.
Usage:
<Register
onSuccess={() => console.log("success")}
onHaveAccountClick={() => console.log("have an account clicked")}
/>Login
Login component is a basic Cleeng login form (see an example here). You can pass a function that will be called after a successful login process by using onSuccess prop.
There are two additional buttons on that form: Go to register and Forgot password?. You can set what exactly will happen on clicking each of them by using onRegisterClick and onPasswordResetClick props.
Usage:
<Login
onSuccess={() => console.log("success")}
onRegisterClick={() => console.log("register button clicked")}
onPasswordResetClick={() => console.log("password reset button clicked")}
/>PasswordReset
PasswordReset is a basic reset password form that can be used for resetting passwords (see an example here). You can pass a function that will be called after successful processing of the request with onSuccess prop.
Usage:
<PasswordReset onSuccess={() => console.log("success")} />Purchase
Purchase is a component that gives you a possibility to buy an offer in the Cleeng system. You have to be logged in before showing that component. To do so, use the Login / Register component.
You can pass a function that will be called after a successful payment process by using onSuccess prop. You can also select which offer should be purchased by passing offerId prop.
Usage:
<Purchase offerId={"S538257415_PL"} onSuccess={() => console.log("success")} />Subscriptions
Subscriptions is a component that will list all subscriptions that are linked with a given logged in subscriber. There is an option to cancel or resume the selected subscription from the list of subscriptions.
Usage:
<Subscriptions />SubscriptionSwitches
This component shows a list of available switches (upgrade options) for a given subscription passed in offerId prop.
Usage:
<SubscriptionSwitches offerId={"S538257415_PL"} />PlanDetails
PlanDetails is a component that contains previously described components
Usage:
<PlanDetails />PaymentInfo
PaymentInfo is a component that contains all information about customer payments. A customer will be able to:
- see or change his/her payment methods, and
- check all transactions that took place in the past.
Usage:
<PaymentInfo />TransactionList
TransactionList is a part of the PaymentInfo component and contains only information about all transactions that took place in the past.
Usage:
<TransactionList />UpdateProfile
UpdateProfile is a component that displays all information about a current customer. It also gives the possibility to change that profile information.
Customers will also be able to reset their password or update consents from the UpdateProfile component.
Usage:
<UpdateProfile />CheckoutConsents
CheckoutConsents is a simple form that contains all consents that have to be confirmed by a customer.
You can pass a function that will be called after successful form submission with onSuccess prop.
Usage:
<CheckoutConsents onSuccess={() => console.log("success")} />Capture
Capture component is a form that was created for collecting user data that a broadcaster wants to collect. A broadcaster can enable the capture feature and configure its settings in the Cleeng broadcaster dashboard. For more information, see Cleeng Capture.
You can pass a function that will be called after successful form submission or if there are no available capture fields with onSuccess prop.
Usage:
<Capture onSuccess={() => console.log("success")} />Styling
There are two ways of styling MediaStore SDK components:
SetTheme function
The setTheme() function gives you a possibility to change basic colors for all MediaStore SDK components.
Here is an example how to do it:
Config.setTheme({
fontColor: "#ffffff",
backgroundColor: "#292525",
cardColor: "#675d5d",
successColor: "#435dc5",
primaryColor: "#435dc5",
loaderColor: "#cccccc",
errorColor: "red",
logoUrl: "link-to-the-logo"
});Custom styles
Another way of styling components from the library is creating custom styles and overriding default styles by those that you have created. Every MediaStore SDK library component has many classes that can be used to select an element that needs to be styled. Their names are based on BEM.
Here is a simple example how styles can be added:
.msd__header {
background: #292525;
border-bottom: none;
}
.msd__header div {
background-image: url("./logo\ —\ white.png");
background-size: auto 60%;
}
.msd__auth-wrapper {
background: #292525;
}
.msd__input {
color: #fff;
}
.msd__input__label {
background: #292525;
color: #fff;
}Related documentation:
License
The Cleeng MediaStore SDK is open source and available under the BSD 3-Clause License. See the LICENSE file for more information.