このガイドはホストフィールドの具体的な使い方をご紹介します。マーチャントの独自サイトで支払い入力フィールドを表示して、スムーズなチェックアウトを実装します。

ホストフィールドの入力欄は顧客の支払い情報を直接KOMOJUに送信します。結果によって顧客が自動的にリダイレクトされます。

1: バックエンドでペイメントセッションを作成

入力欄を表示する前に、サーバーからセッションが必要を作成する必要があります。セッションを作成する時に必須パラメーターとして金額と通貨を含めてください。

セッションのidを保存して、フロントエンドで利用します。

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

フロントエンドの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する方法を選んで実装

ホストフィールドをsubmitするには、2つの方法から選べます。

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

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

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