ホームページ >WeChat アプレット >WeChatの開発 >Nodejs WeChat パブリック アカウント支払いの開発
odeJs WeChat パブリック アカウント機能の開発、モバイル H5 ページは WeChat の支払い機能を呼び出します。過去数日間、支払い要件を完了するための企業のニーズに応じて、node ページと h5 ページを使用して WeChat の支払い機能が呼び出されてきました。ここで、より多くの開発者が WeChat 支払い機能の開発を正常に完了できるように、開発プロセスをもう一度見てみましょう。 (WeChat はまだノード支払い機能を提供していません)
1. コードをリクエストする
コードをリクエストする目的は、ユーザーの openid (現在の公式アカウントに対するユーザーの一意の識別子) と、リクエストされた API である access_token を取得することです。 // open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
この API はいくつかのパラメータに注意する必要があります:
1. appid 公式の appid。アカウントは公式アカウントで見つけることができます
2 を参照してください。 redirect_uri カスタマイズされた WeChat コールバック アドレス。コードを使用して上記のアドレスを要求した後、WeChat は定義した redirect_uri のアドレスにジャンプします。ここでの redirect_url には **url_encode** *php * が必要です, プログラムがノードの場合は、**encodeURLComponent(url)** エンコーディングを使用する必要があります
3. これについては何も言うことはありません。詳細な手順については、response_type=code を確認してください。 WeChat公式Webサイトの手順
4.scope=snsapi_userinfoを次のように記述します。詳細な手順については、WeChat公式Webサイトの手順を確認してください
5.詳細な手順については、次のように記述します。 6. wechat_redirect: このように記述します。詳細な手順については、WeChat 公式 Web サイトの手順を確認してください
ps: 公式 Web サイトのリンク:
API https://api.weixin.qq.com/sns/oauth2 /access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
API のパラメータ説明:
https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316518&lang=zh_CN
4. Web ページで支払い API を呼び出します
これを見ると、Web ページが WeChat 支払い機能を呼び出すだけで、もう終わりだと思いませんか?いいえ、閉じてもいません
WeChat ブラウザで H5 Web ページを開き、JS を実行して支払いを有効にします。インターフェースの入出力データ形式はJSONです。
サンプルコードは次のとおりです:
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入 "timeStamp":" 1395712654", //时间戳,自1970年以来的秒数 "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串 "package" : "prepay_id=u802345jgfjsdfgsdg888", "signType" : "MD5", //微信签名方式: "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。 } ); } if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } }else{ onBridgeReady(); }
上記のコードを参照してください。WeChatの支払い機能を呼び出したい場合は、パラメータを渡す必要があります。
{ "appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入 "timeStamp":" 1395712654", //时间戳,自1970年以来的秒数 "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串 "package" : "prepay_id=u802345jgfjsdfgsdg888", "signType" : "MD5", //微信签名方式: "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 }パラメータの説明: appId //公式アカウント名。 、マーチャントによって渡されます
2. timeStamp //タイムスタンプ、1970 年からの秒数。ここでは特に注意が必要です。文字列のタイムスタンプ形式である必要があります。つまり、引用符である必要があります。
3. nonceStr // ランダムな文字列 32 ビット、続いて Provide メソッド4. SignType // WeChat 署名メソッド: MD5
5. paySign // WeChat 署名、**パッケージ** // これは最も重要なことは、どこで入手したのかということです。 次。
ps: 公式 Web サイトのインターフェイスの説明
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
5. パッケージを取得し、統合注文から prepay_id を取得します。 WeChatのインターフェース
公式API:
https://api.mch.weixin.qq.com/pay/unifiedorder
リクエストパラメータはたくさんありますが、一部は必須ではありません
{ appid : APPID, attach : ATTACH, body : BODY, mch_id : MCH_ID, nonce_str: NONCE_STR, notify_url : NOTIFY_URL,// 微信付款后的回调地址 openid : OPENID, out_trade_no : OUT_TRADE_NO ,//new Date().getTime(), //订单号 spbill_create_ip : SPBILL_CREATE_IP , //客户端的 ip total_fee : TOTAL_FEE, //商品的价格, 此处需要注意的是这个价格是以分算的, 那么一般是元, 你需要转换为 RMB 的元 trade_type : 'JSAPI', }
var body = '<xml> ' + '<appid>'+config.wxappid+'</appid> ' + '<attach>'+obj.attach+'</attach> ' + '<body>'+obj.body+'</body> ' + '<mch_id>'+config.mch_id+'</mch_id> ' + '<nonce_str>'+obj.nonce_str+'</nonce_str> ' + '<notify_url>'+obj.notify_url+'</notify_url>' + '<openid>'+obj.openid+'</openid> ' + '<out_trade_no>'+obj.out_trade_no+'</out_trade_no>'+ '<spbill_create_ip>'+obj.spbill_create_ip+'</spbill_create_ip> ' + '<total_fee>'+obj.total_fee+'</total_fee> ' + '<trade_type>'+obj.trade_type+'</trade_type> ' + '<sign>'+obj.sign+'</sign> ' + // 此处必带签名, 否者微信在验证数据的时候是不通过的 '</xml>';次のステップは、API に prepay_id の値を取得するようリクエストすることです。上で取得した XML データを API に送信します。以下のように WeChat に送信します。Wechat はデータが正しいことを確認します。必要な値を戻します。
api: https://api.mch.weixin.qq.com/pay/unifiedorder
{ "appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入 "timeStamp":" 1395712654", //时间戳,自1970年以来的秒数 "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串 "package" : "prepay_id=u802345jgfjsdfgsdg888", "signType" : "MD5", //微信签名方式: }
有了这样的参数, 那么你还需要吧所有参与的参数做签名。签名规跟上面的一样,生成了签名后需要吧签名的参数 paySign 赋给h5 呼起微信的支付功能的参数(也就是微信的签名不参与签名的生成)
最后的参数是这样子的:
{ "appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入 "timeStamp":" 1395712654", //时间戳,自1970年以来的秒数 "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串 "package" : "prepay_id=u802345jgfjsdfgsdg888", "signType" : "MD5", //微信签名方式: "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 }
如果你的各个环节都没有问题, 那么得到了这样参数后你就可以正常的调用起微信的支付功能, 跟原生的功能是没有任何的差别的,(估计你现在的心里也特高兴吧, 没有 app 竟然可以使用 app 的功能,就是这么的神奇)。
七.支付完成的回调
微信支付完了后会在 h5 页面的微信支付的回调函数里面放回值,
res.err_msg == "get_brand_wcpay_request:ok" ,这样就是成功了, 但是不是就完事儿了呢 ? 也不是,为什么呢? 微信真的收到钱了么? 收到的钱是不是你传递给微信的值呢 ?你还需要将支付的结果写数据库什么的,这些都是未知。还记的在统一下单接口中有个必须参数就是 notify_url : NOTIFY_URL,// 微信付款后的回调地址 这个地址是用户传递给微信的, 微信在收到用户的付款后会以 post 的方式请求这个接口,微信会传递用户付款的信息过来, 不过是 xml 格式的。
类系这样的 xml 格式:
<xml> <appid><![CDATA[wx2421b1c4370ec43b]]></appid> <attach><![CDATA[支付测试]]></attach> <bank_type><![CDATA[CFT]]></bank_type> <fee_type><![CDATA[CNY]]></fee_type> <is_subscribe><![CDATA[Y]]></is_subscribe> <mch_id><![CDATA[10000100]]></mch_id> <nonce_str><![CDATA[5d2b6c2a8db53831f7eda20af46e531c]]></nonce_str> <openid><![CDATA[oUpF8uMEb4qRXf22hE3X68TekukE]]></openid> <out_trade_no><![CDATA[1409811653]]></out_trade_no> <result_code><![CDATA[SUCCESS]]></result_code> <return_code><![CDATA[SUCCESS]]></return_code> <sign><![CDATA[B552ED6B279343CB493C5DD0D78AB241]]></sign> <sub_mch_id><![CDATA[10000100]]></sub_mch_id> <time_end><![CDATA[20140903131540]]></time_end> <total_fee>1</total_fee> <trade_type><![CDATA[JSAPI]]></trade_type> <transaction_id><![CDATA[1004400740201409030005092168]]></transaction_id> </xml>
根据自己的业务逻辑解析这个 xml 格式的数据就好了。
注意:这里你在获取到数据后微信需要得到你的回应, 如果你一直不回应微信, 微信会请求你好几次, 这样估计你的逻辑会有问题吧,所以你需要给微信返回 xml 的格式的 回应。
<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> </xml>
小坑:node ,express 框架开发, 如果你在微信的支付成功后的回调中没有获取到任何 xml 的值, 那么你需要安装一组件:body-parser-xml, 你可以使用 npm install body-parser-xml --save 安装, 在 app.js 里面require('body-parser-xml')(bodyParser);,使用中间件的方式
// 解决微信支付通知回调数据 app.use(bodyParser.xml({ limit: '2MB', // Reject payload bigger than 1 MB xmlParseOptions: { normalize: true, // Trim whitespace inside text nodes normalizeTags: true, // Transform tags to lowercase explicitArray: false // Only put nodes in array if >1 } }));
这样你就可以正常的获取到微信的 xml 数据了。
使用方法:
pay.getAccessToken({ notify_url : 'http://demo.com/', //微信支付完成后的回调 out_trade_no : new Date().getTime(), //订单号 attach : '名称', body : '购买信息', total_fee : '1', // 此处的额度为分 spbill_create_ip : req.connection.remoteAddress, }, function (error, responseData) { res.render('payment', { title : '微信支付', wxPayParams : JSON.stringify(responseData), //userInfo : userInfo }); });
就到这里吧, 感觉也差不多了。如有不对的地方还请指正。
更多nodejs微信公众号支付开发相关文章请关注PHP中文网!