Purchase Flow

👍

Check our Reference Materials for more details about MediaStore SDKMediaStore SDK - 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..

👍

See MediaStore SDK Components Library Overview for more information on the components-based integration.

Once you have completed the Quick Start - MediaStore SDK steps, you can start to implement the actual purchase process.

With the MediaStore SDK Components approach, you just pick components you need and import them in the places in your application where you want them to be.

What you need to do to is:

  1. Configure payment settings
  2. Select and import components you need

Payment Settings

Please see the overview of core concepts connected with payments to get ready for payment setup.

Supported Payment Gateways

MediaStore SDK supports payments with Adyen and PayPal Express Checkout with Cleeng being Merchant of RecordMerchant of Record - A merchant of record (MoR) is an entity that is authorized, and held liable, by a financial institution to process consumer’s credit card and debit transactions on your behalf. Beyond accepting payments, a MoR also ensures your business is compliant with tax laws (local and global) and maintains relationships with financial institutions. (MoR).

Payment Method ID

Each payment method is recognized by its paymentMethodIdpaymentMethodId - Constant identifier of the publisher payment method. Each publisher payment method (eg. Adyen, PayPal) has to have paymentMethodId set. Contact the BSS team to set them..

If you want to add a supported payment method (in other words, generate this payment method’s ID), please contact the BSS team.

🚧

Important

Remember to always update order with the correct payment method ID of the method that a customer has chosen.

Please note that using a wrong payment method ID will cause problems with recurring payments (they won't be processed).

Adyen Only: Add your Domain to Allowed Origins

For Adyen, you need to add your domain to allowed origins. For more information, see Add your Domain to Allowed Origins section.

Components Selection

To implement the full purchase flow you need the following components:

  • Register / Login component - because a customer has to be logged in before showing the Purchase component, you can use these components for authorization and to provide 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. JWT is valid for 15 minutes and after that time a refresh token mechanism can be used.

  • PasswordReset component - strongly recommended to cater for the situations when a customer forgets his/her password

  • CheckoutConsents component - to allow you to check if a customer has all required consents accepted once logged in

  • Capture component - optional, but useful to build customer profiles

  • Purchase component - the actual component that lets your customers buy an offer.

Components Import

Import the components in the places in your application where you want them to be.

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:

"Register" Form - MediaStore SDK"Register" Form - MediaStore SDK

"Register" Form - MediaStore SDK

You can style it according to your needs. For details of styling options 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:

"Login" Form - MediaStore SDK"Login" Form - MediaStore SDK

"Login" Form - MediaStore SDK

You can style it according to your needs. For details of styling options 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:

"Password Reset" Form - MediaStore SDK"Password Reset" Form - MediaStore SDK

"Password Reset" Form - MediaStore SDK

You can style it according to your needs. For details of styling options 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:

"Consents" Form - MediaStore SDK"Consents" Form - MediaStore SDK

"Consents" Form - MediaStore SDK

You can style it according to your needs. For details of styling options 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:

"Capture" Form - MediaStore SDK"Capture" Form - MediaStore SDK

"Capture" Form - MediaStore SDK

You can style it according to your needs. For details of styling options 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 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:

"Purchase" Screen - MediaStore SDK"Purchase" Screen - MediaStore SDK

"Purchase" Screen - MediaStore SDK

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

Up Next

Congratulations!
If you wish to make the user experience for your customers even better, you can go on and implement the "My Account" feature, by following the My Account tutorial.


Did this page help you?