CheckoutHelperにコールバックを指定する機能を追加しました

CheckoutHelperに、トークン取得処理の終了時に指定されたコールバックを呼ぶ機能を追加しました。

次のボタンで、実際に生成されたトークンがalert()で表示されます。

カード番号はテスト環境で使用できるクレジットカードの情報として掲載しているものを利用することをおすすめします。 カード情報は実際にWebPayに送信されますが、テスト環境へ接続しているため、なんらかの課金が発生することはありませんのでご安心ください。

このサンプルのHTMLコードは次のようになっています。

1
2
3
4
5
6
<script type="text/javascript">
  function callback(token) {
    alert(token.id);
  }
</script>
<script src="https://checkout.webpay.jp/v1/" class="webpay-button" data-key="test_public_YOUR_PUBLIC_KEY" data-partial="true" data-on-created="callback"></script>

コールバックにはグローバルの名前空間で定義されたJavaScriptの関数名を指定します。 トークンの作成に成功した場合(data-on-created)と、失敗した場合(data-on-failed)に別々に登録することができます。

また、data-on-createdを利用して、トークン作成後にフォームを自動送信する動作をキャンセルすることもできます。 キャンセルしたい場合はdata-on-createdに指定された関数の返り値としてfalseを返してください。 通常のJavaScriptで、onsubmitevent.preventDefault()を行うのと同じような効果があります。

詳細はWebPayのCheckoutHelperの解説もあわせてご覧ください。