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:

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

Options

Option	Details	Default
ident	Required. This should be the checkout request ident received via the Webstore Builder, Headless API or Checkout API.
locale	Default language for checkout text. Specified as an ISO locale code, e.g. "en_US" for American English, "de_DE" for German, etc. Users can change the language from within the checkout panel UI.	English
theme	Checkout 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. "default" - applies the theme option you have selected in your store's settings.	"default"
colors	Checkout brand colors.	[]
defaultPaymentMethod	The default payment method ID to be selected when the user loads the checkout. You can get the list of available methods from the creator panel. To get the ID of the method, hover over the name in the table.
closeOnPaymentComplete	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.	false

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.

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.

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

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