# Web Component As an alternative to using the `Tebex.checkout` JavaScript API, Tebex.js also provides a `tebex-checkout` [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components). With this, you can embed a Tebex Checkout into your page by placing the `` HTML tag anywhere in your page's ``, so long as Tebex.js is also loaded into the page: ```html ``` {% hint style="info" %} Due to Web Component quirks, you must include both opening and closing HTML tags (like ``). Using a self-closing tag (``) is not valid. {% endhint %} ### 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()`](#launch). The simplest way to achieve this is by placing a button inside the `` and `` tags. Tebex.js will automatically attach handlers so that clicking the button will launch the checkout: ```html ``` {% hint style="info" %} 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! {% endhint %} 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: ```html ``` #### 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()`](#custom-render-location). 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: ```html ``` ### Common Attributes HTML attributes take the place of [`Tebex.checkout.init()`](#config)'s config options, along with a couple of extra options:
AttributeDetails
identRequired. This should be the checkout request ident received via the Headless API or Checkout API.
localeDefault 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-primaryCheckout primary brand color.
color-secondaryCheckout secondary brand color.
popup-on-mobileIf 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-completeIf set to a URL, the user will be redirected to this page once the payment has completed.
For example: ```html ``` ### 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**](https://vuejs.org/guide/extras/web-components#skipping-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: ```html ```