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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tebex.io/developers/tebex.js/payment-portal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.