# Checkout

`Tebex.checkout` provides a seamless checkout experience where customers can purchase items directly from within your website or game.

## Config

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

```javascript
Tebex.checkout.init({
    ident: "checkout request ident"
});
```

### Options

<table><thead><tr><th width="224.5390625">Option</th><th width="415.73046875">Details</th><th>Default</th></tr></thead><tbody><tr><td>ident</td><td><strong>Required.</strong> This should be the checkout request ident received via the <a href="/pages/oX7YOAns5j1nFr2YdL3j">Webstore Builder</a>, <a href="/pages/SsdejuBFgmGS3U55R4K4">Headless API </a>or <a href="/pages/uxywFwu7muf17MAbdoex">Checkout API</a>.</td><td></td></tr><tr><td>locale</td><td>Default language for checkout text. Specified as an ISO locale code, e.g. <code>"en_US"</code> for American English, <code>"de_DE"</code> for German, etc. Users can change the language from within the checkout panel UI.</td><td>English</td></tr><tr><td>theme</td><td><p>Checkout 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><li><code>"default"</code> - applies the theme option you have selected in your store's settings.</li></ul></td><td><code>"default"</code></td></tr><tr><td>colors</td><td>Checkout <a href="#brand-color-config">brand colors</a>.</td><td><code>[]</code></td></tr><tr><td>defaultPaymentMethod</td><td>The default payment method ID to be selected when the user loads the checkout. You can get the list of available methods from the <a href="https://creator.tebex.io/payment-methods">creator panel</a>. To get the ID of the method, hover over the name in the table.</td><td></td></tr><tr><td>closeOnPaymentComplete</td><td>If enabled, the checkout popup will automatically close as soon as the payment has completed. Otherwise, the user will see a "Payment Complete" screen with a button that will close the popup when clicked.</td><td><code>false</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. Ensuring the page has minimal ads, or redirecting users to the checkout flow in a new tab, will avoid this behaviour.
{% endhint %}

{% hint style="info" %}
You're able to retrieve the checkout request ident by using the `{{ basket.ident }}` global Twig variable if you are using a Tebex hosted webstore.
{% 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.checkout.init({
    //..
    colors: [
        {
            name: "primary",
            color: "#910f0f",
        },
        {
            name: "secondary",
            color: "#25c235"
        }
    ]
});
```

## Launch

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

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

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

```html
<!-- Include the Tebex.js script here -->
<script>
  function checkout() {
    Tebex.checkout.init({
      ident: "your checkout request ident goes here"
    });
    Tebex.checkout.launch();
  }
</script>
<!-- ... -->
<button onclick="checkout()">Checkout</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/checkout.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.