12月中旬よりトークン決済方式に切り替えられ、
カード番号をそのまま送信しても受け付けてもらえなくなるそうだ。
カード決済ページを作成できなくなると困るので、
トークン方式にチャレンジしてみた。
これまでのシステムをどう修正してよいのか分からないので、
トークン方式の説明書内のサンプルプログラムを見る。
Javascriptでカード番号、決済の種類、支払い回数などの情報を
セットにしてトークン化している。
そして、そのトークンをフォームに埋め込み、POSTしている。
<html>
<head>
<script src="https://pt01.mul-pay.jp/ext/js/token.js" ></script>
</head>
<body>
<!-- カード情報トークン化フォーム -->
<form id="getTokenForm">
<p>カード番号：<input type="text" value="" name="cardno" id="cardno" /></p>
<p>カード有効期限：<input type="text" value="" name="expire_year" id="expire_year" />
<input type="text" value="" name="expire_month" id="expire_month" />
</p>
<p>カード名義人：<input type="text" value="" name="holdername" id="holdername" /></p>
<p>セキュリティコード：<input type="text" value="" name="securitycode" id="securitycode" /></p>
<p>発行数：<input type="text" value="" name="tokennumber" id= "tokennumber" /></p>
<p><input type="button" value="購入する" onclick="doPurchase()" /></p>
</form>
<!-- 加盟店購入フォーム -->
<form id="purchaseForm" action="(加盟店様 URL)" method="post">
<p>
<input type="hidden" value="" name="kameitenn_chumon_bango" /> <!-- 加盟店での注文番号等、決済を特定できる情報 -->
<input type="hidden" value="" id="token" name="token" /> <!-- 取得したトークンを設定するプレースホルダ -->
</p>
</form>
<script type="text/javascript">
function execPurchase(response) {
if (response.resultCode != "000") {
window.alert("購入処理中にエラーが発生しました");
} else {
// カード情報は念のため値を除去
document.getElementById("cardno").value = "";
document.getElementById("expire_year").value = "";
document.getElementById("expire_month").value = "";
document.getElementById("securitycode").value = "";
document.getElementById("tokennumber").value = "";
// 予め購入フォームに用意した token フィールドに、値を設定
document.getElementById("token").value = response.tokenObject.token;
// スクリプトからフォームを submit
document.getElementById("purchaseForm").submit();
}
}
function doPurchase() {
var cardno, expire, securitycode, holdername;
var cardno = document.getElementById("cardno").value;
var expire = document.getElementById("expire_year").value + document.getElementById("expire_month").value;
var securitycode = document.getElementById("securitycode").value;
var holdername = document.getElementById("holdername").value;
var tokennumber = document.getElementById("tokennumber").value;
Multipayment.init("tshop00000001");
Multipayment.getToken({
cardno : cardno,
expire : expire,
securitycode : securitycode,
holdername : holdername,
tokennumber : tokennumber
}, execPurchase);
}
</script>
</body>
</html>
ポイント
formが二つある。
form id="purchaseForm"からサブミットしている。
流れ
cardno、expire、securitycode、holdername、holdername、tokennumberを
関数doPurchase()でトークン化し、その値を関数execPurchase()に渡す。
関数execPurchase()でトークン値をform id="purchaseForm"に書き込んだ後、
purchaseFormからサブミットしている。
こんなことしました。
支払い方法、支払い回数などはform id="purchaseForm"にhiddenで埋め込んだ。
ここに引っ掛かりました。
入力用テキストボックスのIDは CardNo、Expire、SecurityCode としていた。
サンプルプログラムはcardno、expire、securitycode なので変更の必要なしと早合点してしまった。
大文字と小文字は別物なので、どちらに揃えるか決めて最初に対応するべきだった。
とりかかってからカード決済に成功するまでに4時間。
何度もエラーになり、途中で投げ出そうかとも思った。
決済できたときはうれしかった。
【このカテゴリーの最新記事】
-
no image
-
no image
-
no image
-
no image
フォームpurchaseFormの中に以下のhidden構文があります。
＜input type="hidden" value="" id="Token" name="Token" /＞
Javascriptの関数 execPurchase()とdoPurchase()によって、構文中のvalueにトークンが埋め込まれますので、任意のコントローラー側にPOST値として引き渡せると思います。（言語がphpであれば、$_POST['Token']で確認できるはずです。）
今、GMOのトークンを取得する実装をやっていて、教えていただきたいのですが、
action="(加盟店様 URL) ←これを任意の コントローラーのメソッドを指定して、カード決済用のAPIに投げようと思うのですがトークンの取得方法がわかりません。どの様に記述しましたでしょうか。
はい、そうです。イベントへの参加料金支払いに使用します。
同じ人が二度支払いを行うことは考慮していません。
ここ自分もはまってしまっていて、
トークンを使ったカード登録はできたのですが
決済時にトークンはどうやって生成するかわからずでして
この実装の場合購入時に毎回カード番号入力して決済する感じですかね？
2回目はどうしてますか？
もしわかったら教えてくださいm