---
title: "Introduction to Hosted Fields"
description: "An overview of KOMOJU Hosted Fields — a front-end library for securely collecting payment information on your website using iframe-based components that work with React, VueJS, or vanilla HTML."
url: "https://docs.priv.staging.komoju-dev.tools/en/docs/integration-guides/introduction-to-hosted-fields"
source_url: "https://docs.priv.staging.komoju-dev.tools/en/docs/integration-guides/introduction-to-hosted-fields.md"
language: en
last_modified: "2026-03-24"
---

## Overview

KOMOJU Hosted Fields is a front-end library for securely collecting payment information on your website.

All input fields are rendered in a secure iframe hosted by us to minimize your PCI-DSS burden.

Fields uses modern web features to provide easy-to-use components that work well with frameworks like React, VueJS, or even vanilla HTML.

See also [Supported Payment Methods](https://docs.priv.staging.komoju-dev.tools/en/docs/integration-guides/hosted-fields-supported-payment-methods.md).

The following image shows an example of a Hosted Fields integration.

![KOMOJU Hosted Fields payment form](https://docs.priv.staging.komoju-dev.tools/web-integrations_overview_hosted-fields_2.png)

# Code Example

```html
<script type="module" src="https://multipay.komoju.com/fields.js"></script>

<form>
  <!-- optional payment method picker -->
  <komoju-picker></komoju-picker>

  <komoju-fields
  	session-id={your_session_id}
    publishable-key={your_publishable_key}
  ></komoju-fields>

  <button type="submit">Pay</button>
</form>

```

# Full list of attributes

Here are the attributes accepted by the `<komoju-fields>` tag:

## `session-id` (required)

This [session](https://docs.priv.staging.komoju-dev.tools/en/api-reference#2025-01-28/tag/sessions/POST/sessions) tells Fields which payment methods to render, and ensures payment amount cannot be changed on the front-end.

```html
<!-- Create a session on your back-end and pass it to komoju-fields. -->
<komoju-fields
  session-id="abc123xyz"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

```

## `publishable-key` (required)

Your publishable key is required in order for Fields to access the KOMOJU API.

Everything KOMOJU Fields does under the hood can be done via [our regular JSON API](https://docs.priv.staging.komoju-dev.tools/reference).

```html
<!-- Your publishable key is required in order for Fields to access the KOMOJU API. -->
<komoju-fields
  session-id="{...}"
  publishable-key="pk_live_abc123"
></komoju-fields>

```

## `session`

Avoid a round-trip by passing the entire KOMOJU Session JSON.

```html
<!-- If you specify session, session-id is no longer requried. -->
<komoju-fields
  session="{...}"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

```

## `payment-type`

This is only useful if you're creating sessions that support multiple payment types. Your options are:

1. use `<komoju-picker>`,
2. create a session with only one payment type, or
3. use the `payment-type` attribute manually like below.

```html
<!-- Pre-select payment type. -->
<komoju-fields
  payment-type="konbini"
  session-id="SESSION_ID_FROM_KOMOJU_API"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

<!-- You can change this payment-type attribute during runtime too. -->
<!-- This can be used to make your own payment method picker. -->
<script>
  const fields = document.querySelector('komoju-fields');
  fields.paymentType = 'credit_card';

  // You can also access the session object to see which payment types are available.
  console.log(fields.session.payment_methods);
</script>

```

## `theme`

Hosted Fields supports loading custom CSS to better fit the look and feel of your website.

See [Hosted Fields | Custom Styling](https://docs.priv.staging.komoju-dev.tools/en/docs/integration-guides/hosted-fields-custom-styling.md) for more detail.

```html
<!-- Set custom CSS -->
<komoju-fields
  session-id="abc123xyz"
  publishable-key="YOUR_PUBLISHABLE_KEY"
  theme="https://example.com/my-fields-theme.css"
></komoju-fields>

```

## `token` and `name`

These attributes allow your `<komoju-fields>` to act like an `<input>` tag whose value is a [Token](https://docs.priv.staging.komoju-dev.tools/en/api-reference#2025-01-28/tag/tokens/POST/tokens) ID of the user's input.

See [Hosted Fields | Tokens Integration](https://docs.priv.staging.komoju-dev.tools/en/docs/integration-guides/hosted-fields-tokens-integration.md) for more detail.

```html
<!-- 'token' is a boolean attribute that activates token mode -->
<komoju-fields
  token name="komoju_token"
  session="{...}"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

<!-- You can either submit the form normally, or obtain the token via JS: -->
<script>
  (async () => {
    const fields = document.querySelector('komoju-fields');
    const token = await fields.submit();
    console.log(token);
  })()
</script>

```