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:

AttributeDetails

ident

Required. This should be the checkout request ident received via the 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.

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.

color-primary

Checkout primary brand color.

color-secondary

Checkout secondary brand color.

popup-on-mobile

If set, when in popup mode, the checkout will always launch in the current browser window rather than opening a new page, even on mobile devices.

redirect-on-complete

If set to a URL, the user will be redirected to this page once the payment has completed.

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