Sell an item with Supertab Button and Tab.JS

In this 3 minute tutorial, we’ll walk you through selling a PDF for 25¢. To do this, you’ll just need to configure your purchase button in our business portal, and then insert your Add to Tab button on your site. Before you start, make sure you’ve already set up an account (4 min).

Conceptually it’s important to remember how simple this is: a user will make payment through Supertab, and then once payment is confirmed, your site will execute any command you want - in this example, it will reveal a link to view or download a PDF.

​

First up, let’s configure your button

1. Go to the business portal.

2. Go to the Sites menu item to specify the site that you’ll be deploying your button to.

   a. Hit the Add Site button

   b. Enter in a Site Name; this will be used in several places so make sure it properly reflects your site or business name

   c. Enter in the Site URL, or base level domain name, with http:// or https://. This does not need to be the exact url or page where your code will be hosted.

3. Now go to the Monetization menu item

   a. Hit the Single Item toggle

   b. Hit the Add Single Item button

   c. From the Site dropdown menu make sure the site you created in step 2 is selected

   d. Add a description of what you’re selling: let’s call it Pizza Recipe PDF

   e. Enter in 0.25 for the price and hit the Save button

   f. On Save, Your item will appear in the list view

4. Now go to the Revenue Generator menu item

   a. Hit the Purchase Button toggle

   b. From the Site dropdown menu make sure the site you created in step 2 is selected

   c. From the Offering dropdown menu, select the offering you created in step 3

   d. In the Merchant Logo field, paste in the URL of a logo image that will appear in your purchase dialog screen. A logo with dimensions of 125px wide by 75px tall is recommended.

   e. From the Code Snippet section, hit the Copy button

​

Next, let’s add the Button to your site

The Supertab purchase button is ready to be added to your site.

Your code from step 4 will look something like the following:

<script type="module">
      import "https://js.supertab.co/v1/tab.js";
      window.supertab.createPurchaseButton({
        containerElement: document.getElementById("YOUR_ELEMENT_ID"),
        clientId: "client.bea4684d-5c5a-4731-a926-60da0b02de13",
        merchantName: "KetoTacular",
        merchantLogoUrl: "https://ketotacular.com/logo.png",
        offeringId: "offering.eb712d70-5c5b-4a56-bb1f-facd8b7ff4d4", // 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!");
        },
        onError: () => {
          //insert your code to handle an unexpected error
          console.log("Purchase error!");
        },
      });
    </script>

You just need to make a few modifications to get this up and running:

1. Specify the container element where you want your button to appear. In this case let’s call it ‘pdf-download’:

containerElement: document.getElementById("pdf-button"),

2. Within the onPurchaseCompleted callback function, add the following javascript, replacing the PDF path with the path to your PDF. (This code simply displays a link to the PDF when payment is complete): [EXPLAIN THIS more ]

document.body.innerHTML += '<a href="https://ketotacular.com/downloads/pizza_recipe.pdf">View the PDF</a>'; 

3. Your final code should look something like this:

<script type="module">
      import "https://js.supertab.co/v1/tab.js";
      window.supertab.createPurchaseButton({
        containerElement: document.getElementById("pdf-button"),
        clientId: "client.bea4684d-5c5a-4731-a926-60da0b02de13",
        merchantName: "KetoTacular",
        merchantLogoUrl: "https://ketotacular.com/logo.png",
        offeringId: "offering.eb712d70-5c5b-4a56-bb1f-facd8b7ff4d4", // optional
        onPurchaseCompleted: () => {
          //insert your code to grant user access 
            document.body.innerHTML += '<a href="https://ketotacular.com/downloads/pizza_recipe.pdf">View the PDF</a>'; 
          console.log("Purchase completed!");
        },
        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!");
        },
      });
    </script> 

4. Now just make sure you have a <div> on your page where the Add to Tab button will be called:

<div id="pdf-button" style="width: 300px;"></div>

Here’s a link to the finished product.