実装ガイド: ホストフィールドでトークンを利用

ペイメントをサーバーサイドで実行する場合はこちらをご参考ください

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

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

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

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

セッションの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つの方法から選べます。

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

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

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

submitケース1の例

<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ケース2の例

<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


What’s Next
Did this page help you?