設置 – （JavaScript）
インラインフォーム設置用のタグ
以下は、「支払う」と表示されたボタンでの、1000円を決済するためのインラインフォームの設置例です。
<script src="https://widget.univapay.com/client/checkout.js"></script>
<style>
#univapay-payment-checkout {
position: absolute;
top: 360px;
}
</style>
<form id="payment-form" onSubmit="handleSubmit()">
<button id="univapay-payment-checkout">
支払う
</button>
</form>
<script>
var checkout = UnivapayCheckout.create({
appId: "<アプリトークンID>",
checkout: "payment",
amount: 1000,
currency: "jpy",
cvvAuthorize: true,
inline: true,
});
window.onload = function () {
checkout.open();
}
function handleSubmit() {
event.preventDefault();
var form = document.getElementById("payment-form");
var iFrame = document.querySelector("iframe");
UnivapayCheckout.submit(iFrame)
.then(function (data) {
form.submit();
}).catch(function (errors) {
console.error(errors);
});
};
</script>まず、インラインフォームを含むページに次の行をHTMLでの設置と同様に含める必要があります
<script src="https://widget.univapay.com/client/checkout.js"></script>支払うボタンについてのCSS styleの記述です。説明の都合上styleタグに記述しています。
<style>
#univapay-payment-checkout {
position: absolute;
top: 360px;
}
</style>HTMLでの設置とは異なり、自動的にページ上にボタンは作成されませんので、タグとタグで送信するための記述をします。
submitイベントが発火に反応して、onSubmitに指定された関数”handleSubmit()”を呼び出します。
<form id="payment-form" onSubmit="handleSubmit()">
<button id="univapay-payment-checkout">
支払う
</button>
</form>
<script>
<!--
タグ内にJavaScriptの記述をします
内容は以下で説明
-->
</script>次に、UnivapayCheckout.createを呼び出す記述をします。
例えば、1000円の支払いを処理するインラインフォーム・オブジェクトを作成するには、以下を記述する必要があります。
var checkout = UnivapayCheckout.create({
appId: "<アプリトークンID>",
checkout: "payment",
amount: 100,
currency: "jpy",
cvvAuthorize: true,
inline: true,
inlineItemLabelstyle:,
});本サンプルではページの読み込みをした時にインラインフォームを表示させるため、onload関数の記述をしています。event.preventDefault();で、form.submit();の動作させるタイミングを制御するために、一度formのデフォルト処理を防ぐ記述をします。
最後にUnivapayCheckout.submitを呼び出す記述をします。ボタンをクリックした時実際に支払いを行う処理を記述し、送信時エラーが発生した場合はその内容を返します。
window.onload = function () {
checkout.open();
}
function handleSubmit() {
event.preventDefault();
var form = document.getElementById("payment-form");
var iFrame = document.querySelector("iframe");
UnivapayCheckout.submit(iFrame)
.then(function (data) {
form.submit();
}).catch(function (errors) {
console.error(errors);
});
};処理実行時にパラメータの値を上書きする関数
UnivapayCheckout.updateを利用することで、トークン作成前に任意の項目の値を更新することが出来ます。
この関数を利用することで、例えばパラメータでダミーの電話番号やメールアドレスを事前にして項目を非表示にしている場合、決済フォーム以外で入力されている正しい消費者の情報を更新しながらトークンを作成することが出来ます。
更新することが出来る項目は以下です。
UnivapayCheckout.update(
parameters: {
metadata?: Record<string, string | number | boolean | null>;
name?: string;
nameKana?: string;
email?: string;
phoneNumber?: {
countryCode?: string;
localNumber?: string;
};
address?: {
line1?: string;
line2?: string;
city?: string;
state?: string;
zip?: string;
countryCode?: string;
}
},
options?: {
forceUpdate?: boolean; //消費者が決済フォームに情報を入力していたとしても強制的に更新するかどうか
}
)サンプル
UnivapayCheckout.update(
iFrame,
{ email: "updated-dummy-email@univapay.com",
phoneNumber: {
countryCode: "+81",
localNumber: "08000000000"
}
},
);インラインフォームのデザインを制御するパラメータ
全て、インラインでのstyle記述と同じルールで記述してください。
備考欄に記載の要素に、インラインでstyleの値が記述されます。
| フィールド 赤字は必須 ※は条件付き必須 | 許容する値 | 備考 | 省略時の値 |
|---|---|---|---|
| inlineItemStyle | 半角英数 ＋記号 | ラベル、入力欄、エラーメッセージのセットが格納された<div class="form-group form-group-sm">と、それに内包される <div class="checkbox">に適用したい style | 当社規定のCSS適用 |
| inlineTextItemStyle | 〃 | <div class="form-group form-group-sm">に適用したい styleただし、内包される <div class="checkbox">には適用しない（個別の指定が必要な場合） | 〃 |
| inlineToggleItemStyle | 〃 | <div class="checkbox">にのみ適用したいstyle（個別の指定が必要な場合） | 〃 |
| inlineItemLabelStyle | 〃 | 各入力欄のラベル<label class="control-label">にのみ適用したい style | 〃 |
| inlineTextItemLabelStyle | 〃 | テキスト入力フィールドに入力された文字のラベル<label class="control-label">にのみ適用したい style | 〃 |
| inlineFieldStyle | 〃 | テキスト入力フィールドに入力された文字と、チェックボックスのラベル<span class="input-group">に適用したい style | 〃 |
| inlineTextFieldStyle | 〃 | テキスト入力フィールドに入力された文字<span class="input-group">に適用したい styleただし、内包される <div class="checkbox">には適用しない（個別の指定が必要な場合） | 〃 |
| inlineItemErrorStyle | 〃 | エラーメッセージ<div class="field-error">に適用したい style | 〃 |
| inlineTextErrorStyle | 〃 | エラーメッセージ<div class="field-error">に適用したい styleただし、内包される <div class="checkbox">には適用しない（個別の指定が必要な場合） | 〃 |
| inlineFieldInvalidStyle | 〃 | テキスト入力フィールドに入力された文字が、無効と判定された場合<input class="form-control input-sm">に適用したい style | 〃 |
| inlineTextFieldInvalidStyle | 〃 | テキスト入力フィールドに入力された文字が、無効と判定された場合<input class="form-control input-sm">に適用したい styleただし、内包される <div class="checkbox">には適用しない（個別の指定が必要な場合） | 〃 |
| inlineTextToggleInvalidStyle | 〃 | <div class="checkbox">が無効のまま送信されようとした時に適用したいstyle（個別の指定が必要な場合） | 〃 |
| inlineFieldForcusStyle | 〃 | テキスト入力フィールドがフォーカスされた時に<span class="input-group-focus">に適用したい style | 〃 |
| inlineTextFieldForcusStyle | 〃 | テキスト入力フィールドがフォーカスされた時に<span class="input-group-focus">に適用したい styleただし、内包される <div class="checkbox">には適用しない（個別の指定が必要な場合） | 〃 |
| inlineToggleFieldForcusStyle | 〃 | <div class="checkbox">がフォーカスされた時に適用したいstyle（個別の指定が必要な場合） | 〃 |
コールバック
ウィジェットのページに記載してある内容と同様です。
