Welcart SBペイメントサービスのクレジットカード情報入力後に確認ページへ遷移するボタンクリック時に実行されるJS（トークン生成）

Welcartでクレジット決済モジュールとしてSBペイメントサービスを利用しているサイトでクレジットカード情報入力後に内容確認ページへ遷移するボタン（次へ）クリック時にSBペイメントサービス側へ送信するトークンを生成するJavaScriptのコードがありますが、ボタンをオリジナルデザインにする際に同じコードを呼び出す必要がありましたのでメモします。

またトークン他クレジットカード決済時に送信される値のname属性についても合わせてメモします。

SBペイメントサービス トークン生成用JS

function(e) {
  if ("confirm" == $(this).attr("name") && $("#sbps_form").css("display") != "none") {
    if ($("input[name=cust_quick]").val() == undefined || "new" == $("input[name=cust_quick]:checked").val()) {

      var check = true;
      if ("" == $("#cc_number").val()) {
        check = false;
      }
      if (undefined == $("#cc_expyy").get(0) || undefined == $("#cc_expmm").get(0)) {
        check = false;
      } else if ("" == $("#cc_expyy option:selected").val() || "" == $("#cc_expmm option:selected").val()) {
        check = false;
      } else if ("----" == $("#cc_expyy option:selected").val() || "--" == $("#cc_expmm option:selected").val()) {
        check = false;
      }
      if ("" == $("#cc_seccd").val()) {
        check = false;
      }
      if (!check) {
        alert(sbps_params.message.error_token);
        return false;
      }

      var cc_expyy = $("#cc_expyy option:selected").val();
      var cc_expmm = $("#cc_expmm option:selected").val();

      com_sbps_system.generateToken({
        merchantId: sbps_params.sbps_merchantId,
        serviceId: sbps_params.sbps_serviceId,
        ccNumber: $("#cc_number").val(),
        ccExpiration: cc_expyy.toString() + cc_expmm.toString(),
        securityCode: $("#cc_seccd").val()
      }, afterGenerateToken);
      return false;

    } else {
      $("delivery-form").submit();
    }
  } else {
    $("delivery-form").submit();
  }
}

上記コードを呼び出すことでSBペイメントサービスへ渡すためのトークン他、必要情報生成出来ます。

name属性・id属性

[ id=”sbps_form” ] 内のname属性・id属性情報

動作確認環境

エックスサーバー（x10）
PHP 7.3.16
MySQL 5.7
WordPress 5.4.1
Welcart e-Commerce 1.9.30