Skip to main content

In-App Purchase

Applicaster supports storefront payments integration in the following platforms:

  • App Store (iOS and TVOS)
  • Google Play (Android & Android TV)
  • Amazon Appstore (Fire TV)
  • Channel Store (Roku)

Prerequisites​

  1. To allow payments on your app you will need a payment provider with products and plans set and connected to the relevant stores. Applicaster offers out of the box integrations with Cleeng, InPlayer and MPX.
  2. Reach out to your account manager in order to get your <PROVISION_BASE_URL>.
  3. Add the following plugins to your application versions: Video Preload for Quickbrick, Storefront and Login Flow.
info

To see the Storefront (products/prices) users must be logged in. The reason for that is the prices are retrieved depending on the location/country of the user.

info

The app store (Apple Store, Google Play, Amazon, Roku) is the source of truth. A user will not be able to purchase an item that does not appear in the store.

Cleeng​

Create endpoints​

  • Create the endpoint Transaction.
    • Set its URL to <PROVISION_BASE_URL>/cleeng/transactions.
    • Set its method to POST.
    • Set its Mime Type to application/json
    • Add store, quick-brick-login-flow.access_token as ctx context keys.
  • Create the endpoint Offers & Entitlements
    • Set its url to <PROVISION_BASE_URL>/cleeng
    • Set its method to GET.
    • Add quick-brick-login-flow.access_token as ctx context key.

Create feeds​

  • Create the feed Products - and set it to <PROVISION_BASE_URL>/cleeng/offers/

    • Add the optional query params:
      • productIds=<comma separated cleeng offer ids> - for example /offers?productIds=1234_US,4567_US
      • columnOrder=<title or updatedAt> - sort by title or updated at
      • columnDirection=<asc or desc>
      • pageLimit=<number of offers per page, default 15>

  • Create the feed Transactions and set its URL to <PROVISION_BASE_URL>/cleeng/transactions.

  • Create the feed Entitlements and set its URL to <PROVISION_BASE_URL>/cleeng.

inPlayer​

Create endpoints​

  • Create the endpoint inPlayer products.
    • Set its URL to <PROVISION_BASE_URL>/inplayer/access-fees.
    • Set its method to GET.
    • Add store, quick-brick-login-flow.access_token as ctx context keys.
  • Create the endpoint inPlayer payment validation
    • Set its url to <PROVISION_BASE_URL>/inplayer/payments/validation
    • Set its method to POST.
    • Set its Mime Type to application/json
    • Add quick-brick-login-flow.access_token as ctx context key.
    • Set its Mime Type to application/json Create the endpoint inPlayer user entitlements
    • Set its URL to <PROVISION_BASE_URL>/inplayer/entitlements
    • Set its method to GET.
    • Add quick-brick-login-flow.access_token as ctx context key.

Create feeds​

  • Create the feed Products - and set it to <PROVISION_BASE_URL>/inplayer/access-fees?byPackageIds={{packageIds}}
  • Create the feed Transactions and set its URL to <PROVISION_BASE_URL>/inplayer/payments/validation/{{packageId}}
  • Create the feed Entitlements and set its URL to <PROVISION_BASE_URL>/inplayer/entitlements?byPackageIds={{packageIds}}

Screen Configuration​

Add the Storefront screen and set the feeds.

Modify the text labels according to your needs.

Add to the screen a component such as grid or list to display the product offers. Use cell style to design the wanted design.

Define where to navigate after the purchase is finished.

note

Default flow means that the user will be redirected to view the media after a successful purchase.

Add a pre-hook screen if needed (for example: parent lock).

Once you are done with the configuration, you need to set the login and storefront as pre-hooks to the player. In addition, you will need a “video preload for Quickbrick” too. Make sure to keep the order as following:

tip

Tip: You can pull the payment provider feed from Xray. open the storefront, then open Xray. change to “verbose”, look for “offers” and you will get the feed. Copy it and open it on a browser.

Samsung and LG​

For users on Samsung and LG platforms, storefront support is not available. As a result, users on these platforms must visit the website to complete their purchases. Therefore, a message notifying users should be displayed after login.

To show the message, navigate to the Storefront screen in the layout. Enable the toggle and upload 16x9 image that provides users with instructions on where to make their purchase.

Example of the image: