ホストフィールド

KOMOJU Fields: マーチャントの自作ウェブサイト上でも支払いが可能になります

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

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

コードサンプル

<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が複数の値を含む可能性があります。そのような場合、三つの選択肢があります。

  1. <komoju-picker>を利用する
  2. セッションを作成する時にpayment_typesに一つの値を指定する
  3. 以下のように、フロントエンドで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>

tokenname

この二つの属性で<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>

What’s Next

Once you're ready to start development, see our KOMOJU Fields integration guides.

Did this page help you?