Purchase Button SDK – tab.js
Supertab has an easy way to create a purchase button to sell a single item, time pass, or subscription access to your services or content.
1. Include JS on page you want button to render
<script type="module">
import "https://js.supertab.co/v1/tab.js";
window.supertab.createPurchaseButton({
containerElement: document.getElementById("YOUR_ELEMENT_ID"),
clientId: "YOUR_CLIENT_ID",
merchantName: "YOUR_WEBSITE_NAME",
merchantLogoUrl: "YOUR_LOGO_URL",
offeringId: "YOUR_OFFERING_ID", // optional
label: "BUTTON LABEL", // optional
onPurchaseCompleted: () => {
//insert your code to grant user access
console.log("Purchase completed!");
},
onPurchaseCanceled: () => {
//insert your code to handle when purchase is not completed
console.log("Purchase canceled!");
},
onPriorEntitlement: () => {
//insert your code to handle when user already has access
console.log("Prior Entitlement!");
},
onError: () => {
//insert your code to handle an unexpected error
console.log("Purchase error!");
},
});
</script>
2. Initialization Parameters and Callback Handling
Parameters
containerElement
– CSS element of where you want the button to be renderedclientId
– Your client idmerchantName
– This will be shown to the user during the SSO flowmerchantLogoUrl
– This is shown to the user during the purchase confirmationlabel
– This is the text that appears in the call to action buttonofferingId
– Item you want to sell when the user clicks the button. This is optional, if one is not provided, the first offering will be used.
Callbacks
onPurchaseCompleted
– This callback is called when the user successfully completes the purchaseonPurchaseCanceled
– This callback is called when the user closes the purchase dialog without completing the purchaseonPriorEntitlement
– This callback is called if the user has an entitlement to the offeringonError
– This callback is called when an unexpected error occurs. Have the user try again.
Want to learn more?