---
title: "実装ガイド: ホストフィールドでカスタマーリソースを作成しトークンを作成する"
description: "ホストフィールドを使って長期利用可能なトークンを作成します。"
url: "https://docs.komoju.com/ja/docs/integration-guides/hosted-fields-customer-integration"
source_url: "https://docs.komoju.com/ja/docs/integration-guides/hosted-fields-customer-integration.md"
language: ja
last_modified: "2026-03-31"
---

このガイドではホストフィールドを使用してカスタマーリソースに保存し、支払い用のトークンを作成し使用する方法を説明します。このAPIの使用例としては、独自の定期購入システムや従量課金システムを作成することが考えられます。

本プロセスは、標準的な [実装ガイド: ホストフィールドでペイメントを作成](https://docs.komoju.com/ja/docs/integration-guides/hosted-fields-standard-integration.md)を行うこととほぼ同じです。唯一の違いは、セッション作成時にデフォルトの支払いモードではなく、mode=customerでカスタマーモードのセッションを作成することです（[実装ガイド: ホストフィールドでペイメントを作成](https://docs.komoju.com/ja/docs/integration-guides/hosted-page-customer-mode.md)と同じです)。

# 1: バックエンドでカスタマーモードセッションを作成する

入力欄を表示する前に、サーバーからセッションを作成する必要があります。ペイメントセッションとは異なり、カスタマーセッションでは金額と通貨パラメーターは任意項目となります。

# 2: セッションIDを使ってフィールドを表示

このステップは支払いモードと変わりません。

次の 2 つのパラメーターをフロントエンドHTMLの`<komoju-fields>`に要素を入れます。パラメーターは以下となります。

1. ステップ 1で作成したセッションID
2. KOMOJU管理画面からの公開鍵

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

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

```

# 3: submitする方法を選んで実行

このステップも支払いモードと同じです。フィールドを送信するには 2 つの方法があります。

1. `<komoju-fields>`を`<form>`要素の中に入れ、`<form>`の通常submitボタンを使います。
2. JavaScriptで`<komoju-fields>`の`submit()`関数を呼び出します。例：`document.querySelector('komoju-fields').submit()`

ケース１を選んだ場合、`<form>`要素のネイティブ`submit`は発生しません。ホストフィールドが`submit`のイベントをキャンセルして、支払い情報を直接KOMOJUに送信します。

いずれのケースでも、ペイメントが成功すると顧客はセッションの`redirect_url`にリダイレクトされます。

リダイレクトを完全に回避したい場合は、[実装ガイド: ホストフィールドでトークンを利用](https://docs.komoju.com/ja/docs/integration-guides/hosted-fields-tokens-integration.md)を参照してください。