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:
The Tebex
object can then be imported into your code like so:
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:
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:
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:
Options
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:
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:
Last updated