設置 – (HTML)
インラインフォーム設置用のタグ
インラインフォームのタグは、3部で構成されます。
1.本サービスの.jsファイルを読み込むための<script>タグ
<script src="https://widget.univapay.com/client/checkout.js"></script>
2.処理の内容を定義する<form>タグ
<form>
タグ内の、空の<span>
要素内の各属性で、処理の内容を定義します。
<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>
3.インラインフレーム内から処理後のデータを引き出すJavaScript
ここでは、インラインフレーム内からunivapayTokenId
を取り出して、<form>
タグのaction
属性の値として定義した「任意のURL」へ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>
インラインフォームのデザインを制御するパラメータ
全て、インラインでのstyle記述と同じルールで記述してください。
備考欄に記載の要素に、インラインでstyleの値が記述されます。
フィールド | 許容する値 | 備考 | 省略時の値 |
---|---|---|---|
data-inline-item-style | 半角英数 +記号 | ラベル、入力欄、エラーメッセージのセットが格納された<div class="form-group form-group-sm"> と、それに内包される <div class="checkbox"> に適用したい style | 当社規定のCSS適用 |
data-inline-text-item-style | 〃 | <div class="form-group form-group-sm"> に適用したい style ただし、内包される <div class="checkbox"> には適用しない(個別の指定が必要な場合) | 〃 |
data-inline-toggle-item-style | 〃 | <div class="checkbox"> にのみ適用したいstyle (個別の指定が必要な場合) | 〃 |
data-inline-item-label-style | 〃 | 各入力欄のラベル<label class="control-label"> にのみ適用したい style | 〃 |
data-inline-text-item-label-style | 〃 | テキスト入力フィールドに入力された文字のラベル<label class="control-label"> にのみ適用したい style | 〃 |
data-inline-field-style | 〃 | テキスト入力フィールドに入力された文字と、チェックボックスのラベル<span class="input-group"> に適用したい style | 〃 |
data-inline-text-field-style | 〃 | テキスト入力フィールドに入力された文字<span class="input-group"> に適用したい style ただし、内包される <div class="checkbox"> には適用しない(個別の指定が必要な場合) | 〃 |
data-inline-item-error-style | 〃 | エラーメッセージ<div class="field-error"> に適用したい style | 〃 |
data-inline-text-error-style | 〃 | エラーメッセージ<div class="field-error"> に適用したい style ただし、内包される <div class="checkbox"> には適用しない(個別の指定が必要な場合) | 〃 |
data-inline-field-invalid-style | 〃 | テキスト入力フィールドに入力された文字が、無効と判定された場合<input class="form-control input-sm"> に適用したい style | 〃 |
data-inline-text-field-invalid-style | 〃 | テキスト入力フィールドに入力された文字が、無効と判定された場合<input class="form-control input-sm"> に適用したい style ただし、内包される <div class="checkbox"> には適用しない(個別の指定が必要な場合) | 〃 |
data-inline-text-toggle-invalid-style | 〃 | <div class="checkbox"> が無効のまま送信されようとした時に適用したいstyle (個別の指定が必要な場合) | 〃 |
data-inline-field-focus-style | 〃 | テキスト入力フィールドがフォーカスされた時に<span class="input-group-focus"> に適用したい style | 〃 |
data-inline-text-field-focus-style | 〃 | テキスト入力フィールドがフォーカスされた時に<span class="input-group-focus"> に適用したい style ただし、内包される <div class="checkbox"> には適用しない(個別の指定が必要な場合) | 〃 |
data-inline-toggle-field-focus-style | 〃 | <div class="checkbox"> がフォーカスされた時に適用したいstyle (個別の指定が必要な場合) | 〃 |