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 Supertab SDK or direct API.
Transaction Flow
This is the Supertab Transaction Flow. Steps 3 & 4 happen automatically after Step 2, but are shown for illustration purposes.
![](https://supertab.co/wp-content/uploads/2023/08/flow-all-1024x498.png)
1. Customer initiates a checkout
![](https://supertab.co/wp-content/uploads/2023/08/flow-1.png)
The Supertab checkout process begins when the customer selects Supertab as their payment method.
2. Create, configure and start the Supertab widget (COW) object
![](https://supertab.co/wp-content/uploads/2023/08/flow-2.png)
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
![](https://supertab.co/wp-content/uploads/2023/08/flow-3.png)
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
![](https://supertab.co/wp-content/uploads/2023/08/flow-4.png)
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 thewidget
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 SDK 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();