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

本プロセスは、標準的な 実装ガイド: ホストフィールドでペイメントを作成を行うこととほぼ同じです。唯一の違いは、セッション作成時にデフォルトの支払いモードではなく、mode=customerでカスタマーモードのセッションを作成することです（実装ガイド: ホストフィールドでペイメントを作成と同じです)。

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

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

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

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

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

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

<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にリダイレクトされます。

リダイレクトを完全に回避したい場合は、実装ガイド: ホストフィールドでトークンを利用を参照してください。