---
title: "ホストフィールド"
description: "KOMOJU Fields: マーチャントの自作ウェブサイト上でも支払いが可能になります"
url: "https://docs.komoju.com/ja/docs/integration-guides/introduction-to-hosted-fields"
source_url: "https://docs.komoju.com/ja/docs/integration-guides/introduction-to-hosted-fields.md"
language: ja
last_modified: "2026-03-31"
---

ホストフィールドとは、安全に支払いを行うフロントエンドライブラリーです。HTML, VueJS, React等、どんなフロントエンド環境でも快適にお使い頂けます。

KOMOJUのセキュアなiframeが支払い情報の入力フィールドを提供して、PCI-DSSの負担も激減します。

# コードサンプル

```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>

```

# イメージ

<iframe src="https://komoju-fields-demo.herokuapp.com/picker" height="1100px" width="100%"></iframe>

# 全属性

`<komoju-fields>`要素がサポートする属性は以下となります。

## `session-id` (必須)

[セッションリソース](https://docs.komoju.com/ja/docs/sessions-1.md)<!-- TODO: update link -->のIDです。この属性を利用することで使用可能な支払方法等がわかります。支払いの金額と通貨はサーバーサイドでハンドリングされるため安全です。

```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` (必須)

KOMOJU APIを使うための公開鍵です。

[認証セクション](https://docs.komoju.com/ja/docs/introduction/authentication.md)をご参考ください。

```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`

`session_id`の代わりにJSONで`session`を渡すと、セッションの詳細を取得するネットワークリクエストを避けることができます。

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

```

## `payment-type`

セッションを作成した時に`payment_types`が複数の値を含む可能性があります。そのような場合、三つの選択肢があります。

1. `<komoju-picker>`を利用する
2. セッションを作成する時に`payment_types`に一つの値を指定する
3. 以下のように、フロントエンドで`payment-type`を指定する

```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';
</script>

```

## `theme`

この属性でホストフィールドのスタイルをカスタマイズできます。

[ホストフィールド：カスタマイズ](https://docs.komoju.com/ja/docs/integration-guides/hosted-fields-custom-styling.md)を参照ください。

```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`と`name`

この二つの属性で`<komoju-fields>`を`<input>`のように振る舞わせることが出来ます。この場合、`value`がKOMOJUの[トークン](https://docs.komoju.com/ja/api-reference#2025-01-28/tag/tokens/POST/tokens)IDになります。

詳しくは[実装ガイド: トークン](https://docs.komoju.com/ja/docs/integration-guides/hosted-fields-tokens-integration.md)まで。

```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>

```