一般的なフィールドの実装では支払い情報がブラウザから直接KOMOJUに送信されます。これはシンプルで簡単な実装方法ですが、セキュリティ上の都合等からバックエンドサーバーからペイメントを作成せざるを得ない場合もあります。このような場合にもホストフィールドを使用することができます。

この方法でホストフィールドを使用する場合、まずホストフィールドでトークンAPIを叩きトークンを取得します。その後それをバックエンドサーバーに送り、バックエンドサーバーはそれを処理します。

1: バックエンドでセッションを作成

ホストフィールドが入力欄を表示するにはセッションが必要です。

💴

決済セッションの作成（最小構成）

Open Recipe

セッションのidを保存しフロントエンドに渡してください。

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

<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つの方法から選べます。

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

実装ガイド: フィールドでペイメントとは少し異なり、このケース１の場合は<form>が通常通りsubmitされます。この時<komoju-fields>は<input>のように振る舞います。顧客が入力した支払い情報がトークンになり、そのトークンのIDが<form>のactionに渡されます。これによりペイメントをバックエンドで安全に作成することができます。

ケース２の場合はtokenをご自身でバックエンドに送信していただく必要があります。JavaScriptのfetchなどでも出来ます。

submitケース１の例

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

<form method="POST" action="/pay">
  <komoju-fields
    session-id={your_session_id}
    publishable-key={your_publishable_key}
    name="komoju_token"
  ></komoju-fields>
  
  <button type="submit">Pay</button>
</form>

// Example server in expressjs
app.get('/pay', async (req, res) => {
  const token = req.body['komoju_token']
  const payment = await fetch('https://komoju.com/api/v1/payments', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Basic ${btoa(secretKey + ':')}`
    },
    body: JSON.stringify({
      amount: 1000,
      currency: 'JPY',
      payment_details: token
    })
  }).then(r => r.json())

  console.log(payment)
  // ...
})

submitケース２の例

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

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

<button type="button" onclick="submit()">Pay</button>

<script>
  async function submit() {
    const fields = document.getElementById('fields');
    const token = await fields.submit();

    await sendTokenToBackendForProcessing(token.id);
  }
</script>

4: バックエンドでペイメントを作成

トークン取得後ペイメントを作ることができます。

ペイメントを作る際は、以下のAPIのいずれかをご利用ください。

POST /api/v1/payments

POST /api/v1/sessions/{id}/pay