Web Components
Last updated
Was this helpful?
Last updated
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:
Two modes are available for tebex-checkout
:
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:
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:
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:
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:
In Vue, this is how you could include an inline tebex-checkout
component and call a function when the payment complete event fires:
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
.