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>

​
Initialization object properties

​
containerElement
Element
required

DOM Element to render the purchase button in.

​
clientId
string
required

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

​
merchantName
string
required

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

​
merchantLogoUrl
string
required

URL path to your logo. Displayed on confirmation screen.

​
offeringId
string

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

​
label
string

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

​
uiConfig
object

An object defining custom colors for the button.

text HEX code for text color. Default: #ffffff

background HEX code for background color. Default: #0000000

​
Callback functions

​
onPurchaseCompleted
function

Called when the purchase is successfully completed.

​
onPriorEntitlement
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.

​
onPurchaseCanceled
function

Called when a user dismisses the purchase flow.

​
onError
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.

With Google AdManager