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: "test_client.X" });

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.

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.

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
object

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.

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
object

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:

priorEntitlement
PriorEntitlement | null

Any prior entitlement of the current user. null if user has no prior entitlement.

authStatus
string

Current authentication status of the user. Possible values: missing, expired, valid.

purchase
Purchase | null

Purchase object if launching the flow resulted in a purchase. null otherwise.

purchasedOffering
Offering | null

Offering object if user has purchased an offering. null otherwise.

tab
Tab

The users tab

paymentResult
boolean

If a purchase required payment, this will be true if payment was successful. false otherwise.

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.
    }
  }