設置 – （HTML／JavaScript）
このページは初期設定が完了し、ウィジェットの概要が通読されていることを前提に作成しています。
「ウィジェットの概要」で説明の通り、支払い方法の選択次第で「決済」でなく「申込」がなされる可能性があるため、このページでは、ウィジェットで行われる「決済または申込」を「処理」と表現します。
HTMLで設置する
ウィジェットをHTMLで設置するには、1行の<script>タグと、1つの<form>タグを用います。
<form>タグの中には<span>要素でパラメータ（各種フィールドとその値）を記述します。
アプリトークンは非常に長く規則性のない文字列なので、事前に管理画面でアプリトークンを控えるか、ジェネレータからのコピーを推奨します。
サンプルコード
以下は、「支払う」と表示されたボタンでの、1000円を決済するためのウィジェットの設置例です。
<script src="https://widget.univapay.com/client/checkout.js"></script>
<form action="<任意のURL>">
<span data-app-id="<アプリトークンID>"
data-txt="支払う"
data-checkout="payment"
data-amount="1000"
data-currency="jpy"
data-auto-submit="true"
></span>
</form>処理完了後の動作
処理の完了後、form action= で指定した”<任意のURL>”に対し、以下をsubmitします。
- トランザクショントークン（
data-checkout-type=“token”指定時にはunivapayTokenId） - 決済番号（
data-checkout-type=“payment”指定時にはunivapayChargeId、data-token-type=“subscription”指定時にはunivapaySubscriptionId）
処理結果によって、消費者の画面遷移をコントロールしたい場合は、これらを取得するプログラムを作成してください。
パラメータ（基本動作）で解説の通り、data-auto-submitを利用することにより、完了ボタンを押してウィジェットを閉じた時、ウィジェットが含まれるフォームを自動でsubmitする設定も可能です。
上記を利用して、spanタグの外側に設置したformタグのaction属性に指定したURLに遷移するようにすることも可能です。
JavaScriptで設置する
Javascriptでウィジェットを設定する際は、<script>タグを利用することで、HTMLファイル内にJacaScriptのコードを埋め込んでウィジェットを設置することもできます。
サンプルコード
以下は、「支払う」と表示されたボタンでの、1000円を決済するためのウィジェットの設置例です。
<script src="https://widget.univapay.com/client/checkout.js"></script>
<form id="payment-form" action="https://docs.univapay.com/docs/guide/implement/widget">
<button id="univapay-payment-checkout">
支払う
</button>
</form>
<script>
var checkout = UnivapayCheckout.create({
appId: "<TOKEN>",
checkout: "payment",
amount: 100,
currency: "jpy",
cvvAuthorize: true,
onSuccess: function () {
var form = document.querySelector("#payment-form");
form.submit();
}
});
var button = document.querySelector("#univapay-payment-checkout");
button.onclick = function () {
checkout.open();
};
</script>まず、ウィジェットを含むページに次の行をHTMLでの設置と同様に含める必要があります。
<script src="https://widget.univapay.com/client/checkout.js"></script>HTMLでの設置とは異なり、自動的にページ上にボタンは作成されませんので、<form>タグと<button>タグで送信するための記述をします。
submitイベントが発火に反応して、actionで指定されたURLに遷移します。
<form id="payment-form" action="https://docs.univapay.com/docs/guide/implement/widget">
<button id="univapay-payment-checkout">
支払う
</button>
</form>
<script>
<!--
タグ内にJavaScriptの記述をします
内容は以下で説明
-->
</script>次に、UnivapayCheckout.createを呼び出す記述をします。
例えば、1000円の支払いを処理するウィジェット・オブジェクトを作成するには、以下を記述する必要があります。
var checkout = UnivapayCheckout.create({
appId: "<TOKEN>",
checkout: "payment",
amount: 1000,
currency: "jpy",次に、actionで指定したURLに遷移させるためのsubmitの処理を記述します。
今回はonSuccessを利用し、処理が成功したことでformをsubmitさせるような記述をします。
onSuccess: function () {
var form = document.querySelector("#payment-form");
form.submit();
}
}); 最後に、<button>タグのonclick関数の処理を記述します。UnivapayCheckout.createによって返されたオブジェクトでopen関数を呼び出すことにより、ウィジェットを開きます。
var button = document.querySelector("#univapay-payment-checkout");
button.onclick = function () {
checkout.open();
};ウィジェットのデザインを制御するパラメータ
以下パラメータにより、ウィジェットのデザインが変更可能です。
その他、どんな処理をさせるか等の動作詳細は、左メニューから各種パラメータを参照のうえ、実装してください。
各フィールド名について
data-で始まる、ケバブケース（kebab-case）で記載のフィールド名はHTML用- 2行目にローワーキャメルケース（lowerCamelCase）で記載のフィールド名はJavaScript用
- いずれかしか記載のないものは、いずれかのみで利用可能
| フィールド | 許容する値 | 備考 | 省略時の値 |
|---|---|---|---|
| data-text | テキスト（無制限） | ウィジェットを展開するためのボタン内テキスト | Pay with UnivaPay |
| data-size | 半角英 | ウィジェットを展開するためのボタンサイズ 指定可能な値： small,normal,large | |
| data-class | 半角英数 | ウィジェットを展開するためのボタンのclass属性に付与する値 webサイト側の styleを記述を適用可能 | |
| data-style | 半角英数 | ウィジェットを展開するためのボタンのstyle属性に付与する値 webサイト側の styleを適用せず、インラインでstyle記述したい場合に利用 | |
| data-hover-style | 半角英数 | ウィジェットを展開するためのボタンのhover時のstyle（インライン記述） | |
| data-header header | テキスト（無制限） | ウィジェットのヘッダーに表示したいテキスト | 本サービス名 |
| data-title title | テキスト（無制限） | ウィジェットのサブヘッダーに表示したい店舗名 | 管理画面での設定に依存 |
| data-description description | テキスト（無制限） | ウィジェットのサブヘッダーの、店舗名の下に表示したいテキスト | 管理画面での設定に依存 |
| data-submit-button-text submitButtonText | テキスト（無制限） | ウィジェットの「支払い」ボタンに、代わりに表示したいテキスト | 支払う |
ウェブフック
処理の結果は、JSONデータとして管理画面の「Webhook」セクションで指定されたURLにPOSTされます。
「リファレンス > ウェブフック」を参照して、POSTされたデータを取得して注文状況などを更新するスクリプトを作成してください。
コールバック
ウィジェットタグ内のソースコードに下記の関数を定義しておくことで、各イベントが発生した時にその内容を含めた通知を実行します。
処理結果に応じて元のページの表示内容や、遷移先をコントロールしたい場合は、こちらか、フォームタグからsubmitされる値を利用してください。
| イベント | 内容 |
|---|---|
| Opened (univapay:opened) | 決済フォームを開くことで発生するイベントです。その他の情報は含みません。 |
| Closed (univapay:closed) | 決済フォームを閉じることで発生するイベントです。他の情報は含みません。 |
| Success (univapay:success) | 決済フォームの処理が完了すると発生するイベントです。生成されたリソースのIDと処理の詳細情報が含まれます。 |
| Error (univapay:error) | いずれかの段階で処理が失敗することで発生するイベントです。生成されたリソースのIDが含まれます。 |
| Token created (univapay:token-created) | トランザクショントークンが作成されたときに発生するイベントで、トークンの詳細情報を含みます。定期課金やリカーリング課金のように作成済のトランザクショントークンを利用して決済をする場合は発生しません。 |
| Charge created (univapay:charge-created) | 課金が作成されたときに発生するイベントで、課金の詳細情報が含まれています。成功したかどうかに関わらず発生します。 |
| Subscription created (univapay:subscription-created) | 定期課金が作成されたときに発生するイベントで、定期課金の詳細情報が含まれています。成功したかどうかに関わらず発生します。 |
| Validation error (univapay:validation-error) | このイベントには各フィールドにエラーがある場合に発生します。エラーがない場合、または各フィールドがまだ選択されていない場合、オブジェクトにはオブジェクトは空白になります。 |
| 3DS Start (univapay:three-ds-authorization) | 3-Dセキュア認証が開始されたことで発生するイベントです。 その他の情報は含みません。 |
| 3DS Open (univapay:three-ds-authorization-modal-opened) | 3-Dセキュア認証を実行する際、フォーム上にポップアップが表示されることで発生するイベントです。 その他の情報は含みません。 |
| 3DS Success (univapay:three-ds-authorization-success) | 3-Dセキュア認証が成功すると発生するイベントです。 対象のリソースのIDと処理の詳細情報が含まれます。 決済の成功を通知するイベントではありません。 |
| 3DS Failed (univapay:three-ds-authorization-failure) | 3-Dセキュア認証が失敗することで発生するイベントです。 対象のリソースのIDと処理の詳細情報が含まれます。 |
コールバックのサンプル
<script>
window.addEventListener("univapay:success", (e) => { console.info("Success event", e) }, false);
window.addEventListener("univapay:token-created", (e) => { console.info("Token event", e) }, false);
window.addEventListener("univapay:charge-created", (e) => { console.info("Charge event", e) }, false);
window.addEventListener("univapay:subscription-created", (e) => { console.info("Subscription event", e) }, false);
window.addEventListener("univapay:validation-error", (e) => { console.error("Validation error event", e) }, false);
</script>