WeChat JSAPI 決済
以前からWeChat関連の業務を行っていましたが、新しい技術ではないものの、これまで触れる機会がなく、いくつかの落とし穴にはまりました。そこで、時間を取って整理し、記録しておきます。 WeChat Payは全部で7種類あり、それぞれ:支払いコード決済、JSAPI決済、Native決済、APP決済、H5決済、ミニプログラム決済、顔認証決済です。 今回の業務で使用したのはWeChat JSAPI決済です。ユーザーがWeChatスキャン、公式アカウントのフォローなどの方法で販売者のH5ページに入り、WeChat内でJSSDKを呼び出して支払いを完了します。 ドキュメント:https://pay.weixin.qq.com/wiki/doc/api/index.html SDK:[https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=11_1 ](https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=11_1)JSAPI決済は、WeChat内のブラウザで開くことでWeChat Payを起動できます。効果は以下の図の通りです。 インターフェースコードを添付します。 コードではテンプレートエンジンを使用しています。 html: {$competition\['username'\]} {$prices\[0\]}钻 {$prices\[1\]}钻 {$prices\[2\]}钻 {$prices\[3\]}钻 {$prices\[4\]}钻 注:1钻=1元,1钻={$activity\['offset'\]}票 立即微信支付 JavaScript: // 投票 var offset = {$activity[‘offset’]}; $(’#tips’).html(‘正在给{$competition[‘code’]}号赠送{$prices[0]}钻=’+({$prices[0]}*offset)+‘票’); $(’#vote’).click(function(){ $.post(’/index/index/detailed.html?cid={$cid}&aid={$aid}’,{ formhash :’{FORMHASH}’, submit:‘1’, type:1, openid:’{$_G[‘member’][‘openid’]}’ },function(res){ alert(res.msg); if (res.code == 0) { $(’.box-1 span’).text(res.data.all); $(’.box-2 span’).text(res.data.rank); $(’.box-3 span’).text(res.data.up + ‘票’); } }); }) /* jQuery对象级别プラグイン拡張 */ $.fn.extend({ /* 単選框 */ hlRadio:function () { var radioEl=$(this); radioEl.click(function () { var price = 0; price = $(‘input:radio:checked’).val(); $(’#price’).val(’’); $(’#tips’).html(‘正在给{$competition[‘code’]}号赠送’+price+‘钻=’+(price*offset)+‘票’); radioEl.siblings(“div”).removeClass(“active”); $(this).siblings(“div”).addClass(“active”); }); }, }); $(“input[name=‘price’]”).hlRadio(); $(’#price’).bind(‘input propertychange’, function(){ var price = 0; price = $(’#price’).val(); $(’#tips’).html(‘正在给{$competition[‘code’]}号赠送’+price+‘钻=’+(price*offset)+‘票’); }) ...