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();

You're able to retrieve the checkout ID by using the {{ basket.ident }} global Twig variable if you are using a Tebex hosted webstore.

Config

ConfigExampleUsage

ident

bv4hrr-da710d1aadf8aec07c574588c81da1abcb7d1eaf

The ident received from either the Headless or Checkout APIs.

theme

light

The colour theme - either light or dark.

colors

Colour Configuration Examples

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

  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:

NameFired Upon

Tebex.events.OPEN

The checkout popup opening.

Tebex.events.CLOSE

The checkout popup closing.

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.

PreviousOverviewNextOverview

Last updated