# 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:

Attribute	Details
`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: ```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 ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.tebex.io/developers/tebex.js/checkout/web-component.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.