Getting Started

BrowserBill makes it easy to monetize your browser extension! Whether you want to accept subscriptions or one-time payments, we provide all the tools you need.

In this tutorial, you will be shown step-by-step, how to create a browser extension that can accept payments and detect whether the user has paid. Let's get started!

1. Create Account

First and foremost, you need to create a BrowserBill account by going to the register page and signing up.

2. Create Extension

Now that you have a BrowserBill account, you can create a new extension by clicking the "New" button on the dashboard near the "Extensions" title. Complete the form to finish creating the extension (this can be changed later).

3. Create Plan

With the extension created, you will need to create a plan. You can do this by going to your new extension's page on the dashboard. Then click the "New" button near the "Plans" title. Complete the form by providing the relevant information (this can be changed later).

4. Create New Folder

With the boring stuff out of the way, we can now get onto making the extension! The first thing to do is create a folder which will hold all of the extension's code.

5. Copy SDK

Copy the 'BrowserBillSDK.js' file into your new folder from our GitHub repository. You can do this by either cloning or downloading the repository, or simply just copying the contents of the file into a new file within your folder.

6. Create Manifest

Create a file called 'manifest.json' and include the following code:

{
    "manifest_version": 3,
    "name": "BrowserBill Example Extension",
    "version": "1.0.0",
    "action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "storage"
    ]
}

The most important things to note here are that we are setting the default popup (which will be created in the next step) so users will see the interface when they click the extension, as well as adding the storage permission which is required by BrowserBill.

7. Create Pop-Up HTML

Create a file called popup.html and include the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
        <title>Pop-up</title>
    </head>
    <body style="width: 300px">
        <div class="container p-3 text-center">
            <div class="row">
                <h1>BrowserBill Example</h1>
            </div>
            <div class="row">
                <p>Current Status: <strong><span id="paidStatus">Unpaid</span></strong></p>
            </div>
            <div class="row align-items-center">
                <div class="col">
                    <button type="button" class="btn btn-primary" id="paymentButton">Purchase</button>
                    <button type="button" class="btn btn-primary" style="display: none;" id="manageButton">Manage</button>
                </div>
            </div>
        </div>
        <script src="BrowserBillSDK.js"></script>
        <script src="popup.js"></script>
    </body>
</html>

This code provides an interface with some basic styling. It also includes the SDK and the soon-to-be-created pop-up JS file.

8. Create Pop-Up JS

Create a file called popup.js and include the following code:

// Config
let extensionCode = "EXTENSION_CODE";
let planID = 1;

var bb = new BrowserBill(extensionCode);

// Get user data
bb.getUser().then((data) => {
    // Change view based on payment status
    if (data.paid) {
        document.getElementById("paymentButton").style.display = "none";
        document.getElementById("manageButton").style.display = "inline";
        document.getElementById("paidStatus").innerHTML = "Paid! 🔥";
    }
});

// Payment button handler
document.getElementById("paymentButton").onclick = () => {
    bb.openPaymentPage(planID);
}

// Manage button handler
document.getElementById("manageButton").onclick = () => {
    bb.openManagementPage();
}

Update the values of the 'extensionCode' and 'planID' variables at the top. The 'extensionCode' variable should be set to the code you selected earlier when you were creating the extension. The 'planID' variable is found on the dashboard next to the plan's name.

This code handles all of the logic to direct users to the checkout or management page, along with detecting whether they have paid or not.

9. Load Extension

Finally it is time to test the extension! We will provide instructions for Google Chrome, so if you are using a different browser, simply search up the necessary steps. For Chrome, go to the 'chrome://extensions/' page, enable 'Developer mode' in the top right and click the 'Load unpacked' button. Select the folder that contains all of the code.

To try the extension, click the extension's icon in your browser's toolbar and you should see the pop-up. Assuming you are still in test-mode, you can make test purchases without any payment.

To begin accepting live payments, you will need to connect your Stripe account and disable test-mode on the dashboard.

We hope this tutorial was helpful and wish you the best of luck in creating and monetising your browser extension!