Supertab.js provides a low-code way to start experiences on your pages. See the guide on setting up experiences for more details on how to create and configure experiences. When you need more control over what happens with experiences you can use Supertab.js to recieve callbacks for specific events, entitlement statuses, or error conditions.

​
Pre-requisites

​
Initialization

const supertabClient = new Supertab({clientId: "client.your_client"});

​
Paygate: supertab.createPaygate

Invoke the Paygate on page load or in response to user action. 
const supertabClient = new Supertab({ clientId: "test_client.abc" });

const supertabPaygate = await supertabClient.createPaygate({
  experienceId: "experience.abc",
});

supertabPaygate.show()

​
Parameters

createPaygate accepts an object with the following properties:
​
experienceId
string
required
ID of the paygate experience created in Business Portal.
​
purchaseMetadata
object
Key-value pairs of custom information associated with the purchase.

​
Return value

A promise which resolves with an object with following properties:
​
show
function
Show the paygate UI.Returns a promise which resolves with the paygate summary.
If current user has prior entitlement to the content, the paygate will not show.
​
hide
function
Hide the paygate UI.Returns a promise which resolves with the paygate summary.
​
logIn
function
Starts the login flow. Opens Supertab SSO popup window if user is unknown. Otherwise will log user in silently if auth data are found but has expired.Returns a promise which resolves with the paygate summary.
​
initialState
ExperienceStateSummary
Initial state of the paygate.
​
destroy
function
Destroy paygate instance. This removes all nodes related to paygate from DOM.

​
Purchase Button supertab.createPurchaseButton

Fill a container element with the Purchase Button 
<div id="supertab-button-container"></div>

const supertabButton = supertabClient.createPurchaseButton({
  containerElement: document.getElementById("supertab-button-container"),
  experienceId: "experience.abc",
});

​
Parameters

​
containerElement
Element
required
Container element to render purchase button in. Elements are appended to the container, so original contents are not replaced.
​
experienceId
string
required
ID of the purchase button experience created in Business Portal.
​
purchaseMetadata
object
Key-value pairs of custom information associated with the purchase.
​
onDone
function
Callback function called when user leaves the purchase flow either as a result of successful purchase or cancellation.Returns a promise which resolves with the purchase button summary. See Purchase button summary for more details.

​
Return Value

A promise which resolves with an object with following properties:
​
destroy
function
Destroy Supertab button instance. This removes all nodes related to Supertab button from DOM.
​
initialState
ExperienceStateSummary
Initial state of the purchase button. See Purchase button summary for more details.

​
Purchase button summary

Both the returned initialState object and the object passed as an argument to the onDone callback contain the following properties:

​
Example

Example
const supertabButton = await supertabClient.createPurchaseButton({
  containerElement: document.getElementById("supertab-button-container"),
  experienceId: "experience.abc",
  onDone: ({ priorEntitlement, purchase }) => {
    if (priorEntitlement) {
      // User has prior entitlement to the content.
      return;
    }

    if (purchase) {
      if (purchase.status === "completed") {
        // Purchase was completed successfully.
      } else {
        // Purchase was not completed. User may have
        // canceled the payment dialog if purchase
        // required payment.
      }
    } else {
      // User has canceled the flow and did not
      // attempt to purchase the offering.
    }
  }
});