# 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:

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

### Options

<table><thead><tr><th width="224.5390625">Option</th><th width="415.73046875">Details</th><th>Default</th></tr></thead><tbody><tr><td>token</td><td><strong>Required.</strong> This should be the <strong>Public Token</strong> found on the <a href="https://creator.tebex.io/developers/api-keys">API Keys</a> page in your project's settings.</td><td></td></tr><tr><td>theme</td><td><p>UI color theme. Must be one of the following options:</p><ul><li><code>"light"</code></li><li><code>"dark"</code></li><li><code>"auto"</code> - applies the theme based on the user's light/dark mode system preference.</li></ul></td><td><code>"auto"</code></td></tr><tr><td>colors</td><td>UI <a href="#brand-color-config">brand colors</a>.</td><td><code>[]</code></td></tr></tbody></table>

{% hint style="warning" %}
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.
{% endhint %}

### 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:

```javascript
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:

```html
<!-- 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>
```