インラインフォームのセットアップ
HTMLタグでインラインフォームをセットアップする際は、事前に管理画面の「店舗」→「決済フォーム」にあるHTMLジェネレータから出力されたタグを使うか、アプリトークンIDを控えてから開始してください。
決済ついてのパラメータはウィジェットと同じです。
(クレジットカード以外の決済手段に関するパラメータや、ウィジェットでしか利用できないパラメータなど、インラインフォームでは一部利用できないものがございます。各パラメータの利用可否はこちらからご確認ください。)
会員番号等、管理上必要なパラメータは data-foo
という形式で任意の data
属性として指定してください。
サンプルコード
<script src="https://widget.univapay.com/client/checkout.js"></script>
<form id="payment-form" action="<任意のURL>">
<div id="checkout">
<span
data-app-id="{アプリトークンID}"
data-checkout="payment"
data-amount="1000"
data-currency="jpy"
data-inline="true"
></span>
</div>
<button type="submit">Pay</button>
</form>
<script>
(function () {
var form = document.getElementById("payment-form");
function getPaymentInfo() {
event.preventDefault();
var iFrame = document.querySelector("#checkout iframe");
UnivapayCheckout.submit(iFrame)
.then((data) => {
console.log(data);
// The `univapayTokenId` hidden input
// has been added with the token id
form.submit();
})
.catch((errors) => {
console.error(errors);
});
}
form.addEventListener("submit", getPaymentInfo);
})();
</script>
これは 1000 円を支払うためのインラインフォームをセットアップしています。
金額と通貨
以下のパラメータを編集することで、チェックアウトタイプ、金額、通貨を変更することができます。data-checkout
と data-token-type
はウィジェット: HTMLと同様です。
ただし、インラインフォームでは qr
は使用できません。
data-checkout="payment"
data-amount="1000"
data-currency="jpy"
パラメータを用いたデザインカスタマイズ
インラインフォームでは、各種パラメータの値にstyleを記述することでデザインを変更できます。変更可能な箇所は、以下の通りです。

- ラベルの文字色/他の要素とのスペース…パラメータ
data-inline-item-label-style
を利用して変更できます。margin, padding
共に指定可能です。 - 未入力時の入力ボックスの文字色/背景色/枠の色/他の要素とのスペース…パラメータ
data-inline-field-style
を利用して変更できます。margin, padding
共に指定可能です。 - 項目選択(入力中)時のボックスの文字色/背景色/枠の色…パラメータ
data-inline-field-focus-style
を利用して変更できます。 - エラーメッセージの文字色/背景色…パラメータ
data-inline-item-error-style
を利用して変更できます。 - 全体の背景色、要素(入力ボックス、ラベル、メッセージで一要素)同士のスペース…
data-inline-item-styleを
利用して変更できます。margin, padding
共に指定可能です。
ボタンデザイン
独自のCSSクラスを記述し適用することで、ボタンのデザインを変更することができます。
<button type="submit">Pay</button>
完了後の処理
決済完了後、トランザクションのIDは送信時にフォームに追加されます。
data-checkout-type=“payment” 指定時には univapayChargeId 、data-token-type=“subscription” 指定時には univapaySubscriptionIdもそれぞれinput要素として追加されます。
サンプルコードの以下記述は、決済成功時にインラインフォームを自動でsubmit
するためのものです。
<script>
(function () {
var form = document.getElementById("payment-form");
function getPaymentInfo() {
event.preventDefault();
var iFrame = document.querySelector("#checkout iframe");
UnivapayCheckout.submit(iFrame)
.then((data) => {
console.log(data);
// The `univapayTokenId` hidden input
// has been added with the token id
form.submit();
})
.catch((errors) => {
console.error(errors);
});
}
form.addEventListener("submit", getPaymentInfo);
})();
</script>
このアクションが不要な場合は、上記を取り除くか、別の記述を行ってください。
ウェブフック
トランザクションの結果は、JSONデータとして管理画面の「Webhook」セクションで指定されたURLにPOSTされます。
「リファレンス > ウェブフック」を参照して、POSTされたデータを取得して注文状況などを更新するスクリプトを作成してください。
パラメータ
パラメータ | |
data-email | string メールアドレス。値が無い場合はフォームにメールアドレス入力欄を表示します。値がある場合はメールが入力済みの状態になり入力欄が非表示になります。 必須: いいえ 指定可能な値: メールアドレス |
data-require-email | boolean data-emailに値がある場合でも入力欄を表示します。入力欄にはdata-emailの値が入力された状態で表示されます。 必須: いいえ 指定可能な値: true |
data-inline-item-style | string 各フィールドコンテナのスタイル。コンテナとは、エラーメッセージ、ラベル、インプット要素を含む要素のことです。 必須: いいえ 指定可能な値: css styles |
data-inline-item-label-style | string フィールドラベルのスタイル。 必須: いいえ 指定可能な値:
|
data-inline-item-error-style | string すべてのエラーメッセージを含む、エラーメッセージコンテナのスタイル。 必須: いいえ 指定可能な値: css styles |
data-inline-field-style | string インプットフィールド用のスタイル。 必須: いいえ 指定可能な値: css styles |
data-inline-field-invalid-style | string 無効時のインプットフィールドのスタイル。 必須: いいえ 指定可能な値: css styles |
data-inline-field-focus-style | string フォーカスされたときのインプットフィールドのスタイル。 必須: いいえ 指定可能な値: css styles |