# 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="../templates/pages/checkout.html">Webstore Builder</a>, <a href="../headless-api">Headless API </a>or <a href="../checkout-api">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>
```