Self-care portal integration guide for product purchase

Introduction

This page explains how the OpenTV ION application integrates purchase flow with the TV application via WebView.

purchasePortal WebView type

A new WebView type, purchasePortal, has been added to support product purchases through the operator portal. It triggers a WebView component with the specified URL and productId of the chosen pack/product passed as a query parameter. Purchase entry points have already been defined within the OpenTV ION application, allowing users to seamlessly navigate to the operator portal and complete product purchases.

Purchase flows

The purchase portal WebView can be triggered from three places:

• Media card

• Full-screen error CTA

• Rail items

Buy option in media card:

Unsubscribed channel in full-screen video playback:

Buy option in the rail item:

Multiple products for a given content:

When the content has more than one product associated with it, a popup is presented with the options to choose a single product. The self-care portal is opened for the selected product.

Integration flow

1. Pre-requisites:

   1. Make the necessary Platform configuration changes (below).

   2. URL provided in the above configuration is accessible and functional.

   3. The HTML app follows the guidelines provided in the rest of the document.

   4. The back key is handled by the WebView and no onMessage() call is required from the HTML page – see WebView back key handling, below.

2. The TV app opens the WebView with the configured URL at the end of the purchase flow. The productId is passed as a query parameter. In the following diagram, the screen with title ‘Complete Purchase’ is an HTML app rendered inside the WebView.

   

   
   

3. On closing the WebView/self-care portal, the OpenTV ION application will refresh the entitlement. After the entitlement is refreshed, the content will be shown with the latest purchase status.

Key navigation within WebView

The web page should handle the user key navigation (TV remote) for navigating between the components and accessing them inside the WebView component.

Mandatory security Requirements

• Always use HTTPS.

• Never log auth tokens.

• Sanitise payloads.

WebView back key handling

WebView security and cache properties from ION

incognito

The incognito property creates a non-persistent WebView session.

Clears all cookies, cache, and localStorage when unmounted.

cacheEnabled

Disables WebView disk cache

cacheMode="LOAD_NO_CACHE"

Ignores HTTP cache completely

thirdPartyCookiesEnabled

Controls whether the WebView accepts third-party cookies (cookies set by a domain other than the main page)

Platform configuration changes

"purchase": {
		"enable": true,
		"purchasePortal": {
			"enable": true,
			"portalUrl": "https://example.com/",
			"productid": true
		}

productId= true

The following parameters are sent as query parameters:

https://example.com?productId=xyz