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"});

​
Paywall: supertab.createPaywall

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

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

supertabPaywall.show()

​
Parameters

createPaywall accepts an object with the following properties:
​
experienceId
string
required
ID of the paywall 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 paywall UI.Returns a promise which resolves with the paywall summary.
If current user has prior entitlement to the content, the paywall will not show.
​
hide
function
Hide the paywall UI.Returns a promise which resolves with the paywall 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 paywall summary.
​
initialState
ExperienceStateSummary
Initial state of the paywall.
​
destroy
function
Destroy paywall instance. This removes all nodes related to paywall 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.
    }
  }
});