---
title: "実装ガイド: ホストフィールドでペイメントを作成"
description: "ホストフィールドでペイメントを作成します"
url: "https://docs.komoju.com/ja/docs/integration-guides/hosted-fields-standard-integration"
source_url: "https://docs.komoju.com/ja/docs/integration-guides/hosted-fields-standard-integration.md"
language: ja
last_modified: "2026-03-31"
---

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

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

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

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

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

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

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

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

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

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

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