LogoLogo
  • Welcome
  • Getting Started
  • Integration Methods
  • SDKs
  • Tebex for Unreal Engine 5
  • Webstore Builder
    • Overview
    • Getting Started
    • Twig
      • Tags
      • Filters
      • Functions
    • Global Variables
      • basket
      • store
      • page
    • Pages
      • index.html
      • checkout.html
      • username.html
      • options.html
      • package.html
      • cms/page.html
      • category.html
      • layout.html
    • Sidebar Modules
      • module.communitygoal.html
      • module.featuredpackage.html
      • module.giftcardbalance.html
      • module.goal.html
      • module.payments.html
      • module.serverstatus.html
      • module.textbox.html
      • module.topdonator.html
    • Assets
    • Schema
    • Developer Plan
    • Footer
    • Guides
      • Package Slugs
  • Headless API
    • Overview
    • Getting Your Listings
    • Creating a Basket
    • Adding Packages
    • Gifting Packages
    • Applying Discounts / Creator Codes
    • Directing to Checkout
    • Endpoints
    • Postman Config
    • Example Integration
  • Checkout API
    • Overview
    • Headers and Authentication
    • Start the Checkout Process
    • Checkout Webhooks
    • Endpoints
    • Errors
    • Postman Config
  • Tebex.js
    • Overview
    • Integration
    • Events
    • Web Components
    • Custom Render Location
    • NPM
    • GitHub
  • Webhooks
    • Overview
    • Login Webhooks
  • Game Server API
    • Overview
    • Authentication
    • Error Handling
    • Endpoints
  • Affiliate API
    • Overview
    • Referrals
    • Game Types
    • Webhooks
Powered by GitBook
On this page
  • Modes
  • Common Attributes
  • Framework Integration

Was this helpful?

Export as PDF
  1. Tebex.js

Web Components

PreviousEventsNextCustom Render Location

Last updated 6 months ago

Was this helpful?

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

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 .

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

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

Attribute
Details

ident

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

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>

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 .

HTML attributes take the place of 's config options, along with a couple of extra options:

Required. This should be the checkout request ident received via the or .

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 for tebex-checkout.

skip component resolution
Web Component
Tebex.checkout.launch()
Tebex.checkout.render()
Tebex.checkout.init()
Headless API
Checkout API