Supertab Technical Overview – Supertab

Overview

Supertab makes tiny payments possible. By aggregating purchases of any size, including micropayments and fractional payments, then processing them in aggregate, Supertab brings compelling unit economics to any size payment. Supertab is available for deployment on tens of thousands of sites via its integration with Google Ad Manager or standalone via Direct API.

Transaction Flow

This is the Supertab Transaction Flow. Steps 3 & 4 happen automatically after Step 2, but are shown for illustration purposes.

1. Customer initiates a checkout

The Supertab checkout process begins when the customer selects Supertab as their payment method.

2. Create, configure and start the Supertab widget object

Once the widget object has been configured trigger the widget.showPaywall() function to initiate the Supertab application flow when the user selects Supertab from step 1 above.

The widget object is the data payload that gets sent to the Supertab API to initialize a user token and purchase.

Parameter	Description
`client_id` required	API Key, Success & Failure Callback
`site_name` optional	Name of your website

3. Collect customer information

After the customer goes through the Supertab signup flow, we redirect the customer back to the calling page with the user_token so you can parse the response and store it.

4. Authorize the purchase and complete the order

Send a purchase request

Parameter	Description
`client_id` required	API Key, Success & Failure Callback
`user_token` required	User token given in step 3 (Handled automatically by the widget)
`offering_id` required	ID of item and price being purchased. If not provided, least expensive offering is used

Complete the order

Store the entitlement from the widget callback object.
Redirect the customer to the order confirmation page or display a confirmation message. The widget will show its own confirmation unless suppressed.
This completes the order so you can fulfill it.

Supertab Widget JS Configuration Example

1. Include JS on checkout page

<script defer="defer" src="<https://onpage-widget.supertab.co/v2/widget.js>"></script>

2. Set event listener to capture events and data, such as entitlement

window.addEventListener("supertab.event", (event) => {
   switch (event.detail.type) {
      case "ready":
         widget = new event.detail.Widget({
            clientId: "YOUR_CLIENT_ID",
            merchantName: "YOUR_WEBSITE_NAME"
         });
      break;
      case "back_to_caller":
         if (event.detail.accessStatus == 'access_granted') {
            //insert your code to grant user access
         }
         else {
            //user doesn't have an entitlement (optional show upsell dialog)
         }
      break;
   }
});

3. Call Supertab purchase dialogue flow when user chooses to use Supertab

widget.showPaywall();