ホストフィールドとは、安全に支払いを行うフロントエンドライブラリーです。HTML, VueJS, React等、どんなフロントエンド環境でも快適にお使い頂けます。

KOMOJUのセキュアなiframeが支払い情報の入力フィールドを提供して、PCI-DSSの負担も激減します。

コードサンプル

💴

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

Open Recipe

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

<form>
  <!-- optional payment method picker -->
  <komoju-picker></komoju-picker>

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

  <button type="submit">Pay</button>
</form>

イメージ

全属性

<komoju-fields>要素がサポートする属性は以下となります。

`session-id` (必須)

セッションリソースのIDです。この属性を利用することで使用可能な支払方法等がわかります。支払いの金額と通貨はサーバーサイドでハンドリングされるため安全です。

<!-- Create a session on your back-end and pass it to komoju-fields. -->
<komoju-fields
  session-id="abc123xyz"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

`publishable-key` (必須)

KOMOJU APIを使うための公開鍵です。

認証セクションをご参考ください。

<!-- Your publishable key is required in order for Fields to access the KOMOJU API. -->
<komoju-fields
  session-id="{...}"
  publishable-key="pk_live_abc123"
></komoju-fields>

`session`

session_idの代わりにJSONでsessionを渡すと、セッションの詳細を取得するネットワークリクエストを避けることができます。

<!-- If you specify session, session-id is no longer requried. -->
<komoju-fields
  session="{...}"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

`payment-type`

セッションを作成した時にpayment_typesが複数の値を含む可能性があります。そのような場合、三つの選択肢があります。

<komoju-picker>を利用する
セッションを作成する時にpayment_typesに一つの値を指定する
以下のように、フロントエンドでpayment-typeを指定する

<!-- Pre-select payment type. -->
<komoju-fields
  payment-type="konbini"
  session-id="SESSION_ID_FROM_KOMOJU_API"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

<!-- You can change this payment-type attribute during runtime too. -->
<!-- This can be used to make your own payment method picker. -->
<script>
  const fields = document.querySelector('komoju-fields');
  fields.paymentType = 'credit_card';
</script>

`theme`

この属性でホストフィールドのスタイルをカスタマイズできます。

ホストフィールド：カスタマイズを参照ください。

<!-- Set custom CSS -->
<komoju-fields
  session-id="abc123xyz"
  publishable-key="YOUR_PUBLISHABLE_KEY"
  theme="https://example.com/my-fields-theme.css"
></komoju-fields>

`token`と`name`

この二つの属性で<komoju-fields>を<input>のように振る舞わせることが出来ます。この場合、valueがKOMOJUのトークンIDになります。

詳しくは実装ガイド: トークンまで。

<!-- 'token' is a boolean attribute that activates token mode -->
<komoju-fields
  token name="komoju_token"
  session="{...}"
  publishable-key="YOUR_PUBLISHABLE_KEY"
></komoju-fields>

<!-- You can either submit the form normally, or obtain the token via JS: -->
<script>
  (async () => {
    const fields = document.querySelector('komoju-fields');
    const token = await fields.submit();
    console.log(token);
  })()
</script>

コードサンプル

イメージ

全属性

session-id (必須)

publishable-key (必須)

session

payment-type