|
本文來自 企業(yè)微信 移步到微官網(wǎng)原文鏈接:http://www./999a979.html 微信小程序開發(fā)出來后，想要用在線支付功能怎么辦？畢竟在小程序里面實現(xiàn)微信支付的話還是會帶來很大的便捷的。有過開發(fā)服務號下微信支付經(jīng)驗的親會發(fā)現(xiàn)，其實小程序里的微信支付和服務號里面的開發(fā)過程很像。 那么具體過程是怎樣的呢？移步到微種草君七嬤嬤帶你瞧瞧： Step1：開通微信支付和微信商戶號 這個過程幾乎就和開通服務號的微信支付一樣。  Step2：獲得用戶的 OpenID 首先，我們需要在小程序的客戶端的邏輯層中，獲取當前用戶的 OpenID。通過調用 wx.login方法，可以得到用戶的code，然后開發(fā)者服務器使用登錄憑證code 獲取 openid。 wx.login({ success: function (res) { if (res.code) { //發(fā)起網(wǎng)絡請求 wx.request({ url: 'https://yourwebsit/onLogin', method: 'POST', data: { code: res.code }, success: function (res) { var openid = res.data.openid; }, fail: function (err) { console.log(err) } }) } else { console.log('獲取用戶登錄態(tài)失敗!' + res.errMsg) } } }); var code = req.param('code'); request({ url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code', method: 'GET' }, function (err, response, body) { if (!err && response.statusCode == 200) { res.json(JSON.parse(body)); } }); Step3：獲取 prepay_id和支付簽名驗證paySign 這一步的過程，和服務號里的微信支付過程一樣。這個過程區(qū)分為客戶端操作，以及服務器端的操作。首先來看一下客戶端邏輯層實現(xiàn)。在服務號里，我們是通過如下的代碼來調起支付功能： function jsApiCall { WeixinJSBridge.invoke('getBrandWCPayRequest', { 'appId': '', //公眾號名稱，由商戶傳入 'timeStamp': '', //時間戳，自1970年以來的秒數(shù) 'nonceStr': '', //隨機串 'package': 'prepay_id=', 'signType': 'MD5', //微信簽名方式： 'paySign': '' //微信簽名 }, function (res) { WeixinJSBridge.log(res.err_msg); if (res.err_msg == 'get_brand_wcpay_request:ok') { ; } else { ; } }); } 在小程序里，我們是通過 wx.requestPayment 方法調起支付功能。當然，在這之前，我們先要獲取 prepay_id。 wx.request({ url: 'https://yourwebsit/service/getPay', method: 'POST', data: { bookingNo: bookingNo, total_fee: total_fee, openid: openid }, header: { 'content-type': 'application/json' }, success: function (res) { wx.requestPayment({ 'timeStamp': timeStamp , 'nonceStr': nonceStr , 'package': 'prepay_id=' + res.data.prepay_id , 'signType': 'MD5' , 'paySign': res.data._paySignjs , 'success': function (res) { console.log(res); } , 'fail': function (res) { console.log('fail:' + JSON.stringify(res)); } }) }, fail: function (err) { console.log(err) } }) 在服務器端，我們需要實現(xiàn)的是 prepay_id 的獲取，以及簽名 paySign 的獲取。 var bookingNo = req.param('bookingNo'); var total_fee = req.param('total_fee'); var openid = req.param('openid'); var body = '費用說明'; var url = 'https://api.mch.weixin.qq.com/pay/unifiedorder'; var formData = ''; formData += 'appid'; //appid formData += 'test'; formData += '' + body + ''; formData += 'mch_id'; //商戶號 formData += 'nonce_str'; formData += 'notify_url'; formData += '' + openid + ''; formData += '' + bookingNo + ''; formData += 'spbill_create_ip'; formData += '' + total_fee + ''; formData += 'JSAPI'; formData += '' + paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, bookingNo, spbill_create_ip, total_fee, 'JSAPI') + ''; formData += ''; request({ url: url, method: 'POST', body: formData }, function (err, response, body) { if (!err && response.statusCode == 200) { var prepay_id = getXMLNodeValue('prepay_id', body.toString('utf-8')); var tmp = prepay_id.split('['); var tmp1 = tmp[2].split(']'); //簽名 var _paySignjs = paysignjs(appid, mch_id, 'prepay_id=' + tmp1[0], 'MD5', timeStamp); var o = { prepay_id: tmp1[0] , _paySignjs: _paySignjs } res.send(o); } }); 下面是用到的函數(shù)： function paysignjs(appid, nonceStr, package, signType, timeStamp) { var ret = { appId: appid, nonceStr: nonceStr, package: package, signType: signType, timeStamp: timeStamp }; var string = raw1(ret); string = string + '&key=' + key; console.log(string); var crypto = require('crypto'); return crypto.createHash('md5').update(string, 'utf8').digest('hex'); }; function raw1(args) { var keys = Object.keys(args); keys = keys.sort var newArgs = {}; keys.forEach(function (key) { newArgs[key] = args[key]; }); var string = ''; for (var k in newArgs) { string += '&' + k + '=' + newArgs[k]; } string = string.substr(1); return string; }; function paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, out_trade_no, spbill_create_ip, total_fee, trade_type) { var ret = { 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, spbill_create_ip: spbill_create_ip, total_fee: total_fee, trade_type: trade_type }; var string = raw(ret); string = string + '&key=' + key; var crypto = require('crypto'); return crypto.createHash('md5').update(string, 'utf8').digest('hex'); }; function raw(args) { var keys = Object.keys(args); keys = keys.sort var newArgs = {}; keys.forEach(function (key) { newArgs[key.toLowerCase] = args[key]; }); var string = ''; for (var k in newArgs) { string += '&' + k + '=' + newArgs[k]; } string = string.substr(1); return string; }; function getXMLNodeValue(node_name, xml) { var tmp = xml.split('<' +="" node_name="" +="" '="">'); var _tmp = tmp[1].split(''); return _tmp[0]; } 好啦，簡簡單單三步，so easy是不是？就可以實現(xiàn)微信小程序對接微信支付功能了。上一個效果圖： 
|
|
|
