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 Keysarrow-up-right 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

[]

circle-exclamation

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:

Last updated