Web Components

As an alternative to using the Tebex.checkout JavaScript API, Tebex.js also provides a tebex-checkout Web Component.

With this, you can embed a Tebex Checkout into your page by placing the <tebex-checkout></tebex-checkout> HTML tag anywhere in your page's <body>, so long as Tebex.js is also loaded into the page:

<html>
    <head>
        <script defer src="https://js.tebex.io/v/1.js"></script>
    </head>
    <body>
        <tebex-checkout></tebex-checkout>
    </body>
</html>

Due to Web Component quirks, you must include both opening and closing HTML tags (like <tebex-checkout></tebex-checkout>). Using a self-closing tag (<tebex-checkout/>) is not valid.

Modes

Two modes are available for tebex-checkout:

Popup Mode

This is the default mode. The component will display nothing initially, but will launch the checkout as a popup when activated, akin to Tebex.checkout.launch().

The simplest way to achieve this is by placing a button inside the <tebex-checkout> and </tebex-checkout> tags. Tebex.js will automatically attach handlers so that clicking the button will launch the checkout:

<tebex-checkout ident="...">
    <button>Open Checkout</button>
</tebex-checkout>

You don't have to use a button here, it could be any HTML - styled however you see fit - as long as it's clickable!

Alternatively, if you would prefer to open the checkout from your code (i.e. instead of having a user click something), you can leave the tebex-checkout empty and add the open attribute to it whenever you are ready for it to launch:

<script>
    function openCheckout() {
        const checkout = document.getElementById("checkout");
        checkout.setAttribute("open", "true");
    }
    // call openCheckout() when you want the checkout to launch...
</script>

<tebex-checkout id="checkout" ident="..."></tebex-checkout>

Inline Mode

By adding the inline attribute to the checkout element, the element will instead be rendered inline within the rest of the page, in a similar way to Tebex.checkout.render().

It will automatically take up 100% of the width of its container and set its height to a sane default for displaying the iframe checkout content, but you can use the height attribute to manually set the height, in CSS pixels:

<tebex-checkout inline ident="..." height="800"></tebex-checkout>

Common Attributes

HTML attributes take the place of Tebex.checkout.init()'s config options, along with a couple of extra options:

For example:

<tebex-checkout theme="dark" color-primary="#ff0000"></tebex-checkout>

Framework Integration

Web Components such as tebex-checkout integrate seamlessly with most modern frontend frameworks without needing any special setup. However, if you are using Vue, please note that you may need to adjust your config to skip component resolution for tebex-checkout.

Example

In Vue, this is how you could include an inline tebex-checkout component and call a function when the payment complete event fires:

<script setup>
   import "@tebexio/tebex.js";

    const ident = ref("");

    // something to fetch the ident here
    
    function onPaymentComplete() {
        console.log("payment completed");
    }
</script>

<template>
    <tebex-checkout inline :ident="ident" @payment:complete="onPaymentComplete"></tebex-checkout>
</template>
PreviousEventsNextCustom Render Location

Last updated