Integration

Tebex.js enables you to integrate a seamless checkout experience for customers without them leaving your website or game.

Installation

From NPM

Tebex.js is available as an NPM package, which you can install using your preferred JS package manager:

npm install @tebexio/tebex.js

The Tebex object can then be imported into your code like so:

import Tebex from "@tebexio/tebex.js";

From Our CDN

Alternatively, we also provide Tebex.js via our own CDN, which you can add as a script within the <head> tag of your website:

<script defer src="https://js.tebex.io/v/1.js"></script>

We will automatically update v/1.js with new minor and patch releases of Tebex.js. This shouldn't present any breaking changes, but if you would prefer to stay on a fixed version, you can specify the full version number in the URL, for example https://js.tebex.io/v/1.1.1.js. Our version history can be found on our GitHub releases page.

When installing Tebex.js this way, the Tebex object will become available globally on the window object.

We recommend using defer on the script to prevent it from blocking your website's initial page render, but when doing do, it's important to wait for the page load event before you begin configuring the checkout:

<script>
    addEventListener("load", function() {
        // Configure Tebex.js here
    });
</script>

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.

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>

PreviousOverviewNextEvents

Last updated

Was this helpful?