Purchase button

Supertab purchase button renders a button in DOM. When clicked, it initiates the purchase flow. Throughout the customer’s journey, various events may occur. Callback functions, defined in the initialization object, are triggered for these events, enabling you to handle them as needed. To get started with purchase button, first set up the experience. Once complete, the code snippet generated in the final step of the Experience Editor will look similar to the following:

<script type="module">
  import { createPurchaseButtonExperience } from "https://js.supertab.co/v1/experiences.js";

  (async () => {
    const { destroy } = await createPurchaseButtonExperience({
      containerElement: document.getElementById("YOUR_ELEMENT_ID"),
      clientId: "live_client.41aa0927-e29f-4572-add8-3c73fa0c0367",
      merchantName: "Your website name",
      merchantLogoUrl: "https://yourwebsite.com/path-to-logo.png",
      offeringId: "offering.77bdfc93-5de0-48da-a9d0-65754e0bb947",
      label: "Put it on my tab",
      onPurchaseCompleted: () => {
        //insert your code to grant user access
        console.log("Purchase completed!");
      },
      onPriorEntitlement: () => {
        //insert your code to handle when prior entitlement is detected
        console.log("User has prior entitlement.");
      },
      onPurchaseCanceled: () => {
        //insert your code to handle when purchase is not completed
        console.log("Purchase canceled!");
      },
      onError: () => {
        //insert your code to handle an unexpected error
        console.log("Purchase error!");
      },
      uiConfig: {
        colors: {
          text: "#9b4c4cff",
          background: "#ffffffff",
        },
      },
    });
  })();
</script>

The async function createPurchaseButtonExperience returns the object with destroy property which can be called to remove purchase button from DOM when interaction with a button is no longer needed.

Initialization object properties

Element

required

DOM Element to render the purchase button in.

string

required

Supertab client ID with live_ or test_ prefix. test_ means the integration runs in test mode.

string

required

Your website name displayed in the purchase dialog on confirmation screen.

string

required

URL path to your logo. Displayed on confirmation screen.

string

Offering ID to sell via the purchase button. If not supplied, the first website offering is used.

string

Purchase button label. Default: Put it on my tab.

object

An object defining custom colors for the button.text HEX code for text color. Default: #ffffffbackground HEX code for background color. Default: #0000000

Callback functions

function

Called when the purchase is successfully completed.

function

Called when a user has prior entitlement to the offering and can access the content without a purchase. The prior entitlement may occur only for offerings with access managed by Supertab – currently time passes and subscriptions.

function

Called when a user dismisses the purchase flow.

function

Called when there was an unexpected error that prevents the purchase flow to continue. For example when wrong client ID and offering ID are supplied, or some API call failed because of network error.

Introduction

Supertab Experiences

Integrate

Initialization object properties

Callback functions

​Initialization object properties

​Callback functions

Initialization object properties

Callback functions