ウィジェット：HTML

HTMLタグでウィジェットをセットアップする際は、事前に管理画面のHTMLジェネレータから出力されたタグを使うか、アプリトークンIDを控えてから開始してください。

会員番号等、管理上必要なパラメータは data-foo という形式で任意の data 属性として指定してください。

サンプルコード

<script src="https://widget.univapay.com/client/checkout.js"></script>
<form action="<任意のURL>">
 <span data-app-id="<アプリトークンID>"
      data-checkout="payment"
      data-amount="1000"
      data-currency="jpy"
      data-auto-submit="true"
 ></span>
</form>

これは 1000 円を支払うためのウィジェットをセットアップしています。このページをブラウザで表示すると、<span> 要素はボタンになり、クリックかタップでウィジェットが表示されます。

決済完了後の処理

決済完了後、トランザクショントークン（data-checkout-type=“token”指定時には univapayTokenId）と決済番号（data-checkout-type=“payment” 指定時には univapayChargeId 、data-token-type=“subscription” 指定時には univapaySubscriptionId）が、それぞれ input 要素として追加されます。
data-auto-submit を利用することにより決済成功時にはウィジェットが含まれるフォームを自動でsubmit します。

data-auto-submit="true"

ウィジェットで使えるパラメーター

コールバック

ウィジェットからは下記のイベントをウィンドウに渡します。

• 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): 定期課金が作成されたときに発生するイベントで、定期課金の詳細情報が含まれています。成功したかどうかに関わらず発生します。

<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);
</script>