Search
K

Integration

Tebex.js enables you to integrate a seamless checkout experience for customers without them leaving your website or game.
To get started, first include the following script tag in the <head> section of your website. Please include this on every page to assist us with fraud protection:
<script>
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = "https://js.tebex.io/v/1.0.0.js";
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
</script>
Once you have created a checkout ID either via the Headless API or Checkout API, you are able to begin the checkout experience by executing the following Javascript:
const config = {
ident: "CHECKOUT_ID",
theme: "light"
};
Tebex.checkout.init(config);
Tebex.checkout.launch();

Config

Config
Example
Usage
ident
bv4hrr-da710d1aadf8aec07c574588c81da1abcb7d1eaf
The ident received from either the Headless or Checkout APIs.
theme
light
The colour theme - either light or dark.
colors
Change the colours of the checkout flow to your own brand.

Colour Configuration

To change the colours of the checkout experience, you can provide a colours key to the configuration array when calling Tebex.checkout.init(); The following colours are currently configurable:
  1. 1.
    primary
  2. 2.
    secondary
An example colours array is shown below:
[
{
name: "primary",
color: "#910f0f",
},
{
name: "secondary",
color: "#25c235"
}
]

Events

Events are fired by Tebex.js upon specific actions to alert your frontend and enable you to take action when required. These events should not be used to confirm actual receipt of payment - you should use Webhooks instead.
To listen to an event, use the following Javascript:
Tebex.checkout.on(Tebex.events.PAYMENT_COMPLETE, (event) => {
console.log(Tebex.events.PAYMENT_COMPLETE, event);
});
The available events are as follows:
Name
Fired Upon
Tebex.events.OPEN
The checkout popup closing.
Tebex.events.CLOSE
The checkout popup opening.
Tebex.events.PAYMENT_COMPLETE
The customer has successfully completed their payment.
Tebex.events.PAYMENT_ERROR
The customer experienced an error, such as incorrect card details or unsufficient funds, when making a payment.