Payment Portal

Tebex.portal provides a way for your customers to review their subscription and purchase history directly from within your website or game.

Config

Before the portal can be launched, it must first be configured by calling the Tebex.portal.init() method. This method takes an object containing config options:

Tebex.portal.init({
    token: "project public token"
});

Options

Option	Details	Default
token	Required. This should be the Public Token found on the API Keys page in your project's settings.
theme	UI color theme. Must be one of the following options: "light" "dark" "auto" - applies the theme based on the user's light/dark mode system preference.	"auto"
colors	UI brand colors.	[]

In some cases, pages with heavy ad content can trigger browser pop-up blocking when loading Tebex.js. This behaviour can be avoided by ensuring the page has minimal ads, or by redirecting users to the portal flow in a new tab.

Brand Color Config

Brand colors can be specified as an array of objects with name and color keys. name must be either "primary" or "secondary", while color must be a valid CSS color:

Tebex.portal.init({
    //..
    colors: [
        {
            name: "primary",
            color: "#910f0f",
        },
        {
            name: "secondary",
            color: "#25c235"
        }
    ]
});

Launch

When you are ready to show the Tebex.js payment portal to your user, you can call the Tebex.portal.launch() method. On desktop devices this will open the portal as a popup, while on mobile devices it will open as a new tab.

If you are only calling the Tebex.portal.launch() inside a click event, you might prefer to also call Tebex.portal.init() inside your click handler.

This way, you don't need to wait for the page load event to fire to configure your portal:

<!-- Include the Tebex.js script here -->
<script>
  function launchPortal() {
    Tebex.portal.init({
      portal: "your project's public token goes here"
    });
    Tebex.portal.launch();
  }
</script>
<!-- ... -->
<button onclick="launchPortal()">View payment history</button>