找回密码
 立即注册

QQ登录

只需一步,快速开始

让你的微信小程序具有在线支付功能

[复制链接]
查看: 478|回复: 0
最佳答案
1 

1

主题

7

帖子

95

积分

新人求带

积分
95
 楼主| 发表于 2017-5-17 10:36:26 | 显示全部楼层 |阅读模式
最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点。

55bcb2ffc27c.png

1.开通微信支付和微信商户号
这个过程就和开通服务号的微信支付过程一样,没有什么可以说的。


2.获得用户的openid
首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可以得到用户的code,然后开发者服务器使用登录凭证 code 获取 openid。
  1. wx.login({
  2.       success: function(res) {
  3.         if (res.code) {
  4.           //发起网络请求
  5.           wx.request({
  6.             url: 'https://yourwebsit/onLogin',
  7.             method: 'POST',
  8.             data: {
  9.               code: res.code
  10.             },
  11.             success: function(res) {
  12.                 var openid = res.data.openid;
  13.             },
  14.             fail: function(err) {
  15.                 console.log(err)
  16.             }
  17.           })
  18.         } else {
  19.           console.log('获取用户登录态失败!' + res.errMsg)
  20.         }
  21.       }
  22.     });
  23. var code = req.param("code");
  24.         request({
  25.             url: "https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code",
  26.             method: 'GET'
  27.         }, function(err, response, body) {
  28.             if (!err && response.statusCode == 200) {
  29.                 res.json(JSON.parse(body));
  30.             }
  31.         });
复制代码

3.获取prepay_id和支付签名验证paySign
这一步的过程就和服务号里的微信支付过程一样,分为客户端和服务器端

首先来看一下客户端js

在服务号里,我们是通过如下的代码来调起支付功能
  1. function jsApiCall()
  2.         {
  3.             WeixinJSBridge.invoke(
  4.                 'getBrandWCPayRequest',
  5.                 {
  6.                    "appId":"",     //公众号名称,由商户传入     
  7.                    "timeStamp":"",         //时间戳,自1970年以来的秒数     
  8.                    "nonceStr":"", //随机串     
  9.                    "package":"prepay_id=<%=prepay_id%>",     
  10.                    "signType":"MD5",         //微信签名方式:     
  11.                    "paySign":"<%=_paySignjs%>" //微信签名
  12.                 },
  13.                 function(res){
  14.                     WeixinJSBridge.log(res.err_msg);
  15.                     if( res.err_msg =="get_brand_wcpay_request:ok"){
  16.                         alert("支付成功!");
  17.                     }else{
  18.                         alert("支付失败!");
  19.                     }
  20.                 }
  21.             );
  22.         }
复制代码

在小程序里,我们是通过wx.requestPayment方法来调起支付功能,当然在这之前,我们先要获取prepay_id。
  1.               wx.request({
  2.                     url: 'https://yourwebsit/service/getPay',
  3.                     method: 'POST',
  4.                     data: {
  5.                       bookingNo:bookingNo,  /*订单号*/
  6.                       total_fee:total_fee,   /*订单金额*/
  7.                       openid:openid
  8.                     },
  9.                     header: {
  10.                         'content-type': 'application/json'
  11.                     },
  12.                     success: function(res) {
  13.                         wx.requestPayment({
  14.                           'timeStamp':timeStamp,
  15.                           'nonceStr': nonceStr,
  16.                           'package': 'prepay_id='+res.data.prepay_id,
  17.                           'signType': 'MD5',
  18.                           'paySign': res.data._paySignjs,
  19.                           'success':function(res){
  20.                               console.log(res);
  21.                           },
  22.                           'fail':function(res){
  23.                               console.log('fail:'+JSON.stringify(res));
  24.                           }
  25.                         })
  26.                     },
  27.                     fail: function(err) {
  28.                         console.log(err)
  29.                     }
  30.                 })
复制代码

那在服务器端主要要实现的是prepay_id的获取和签名paySign
  1.         var bookingNo = req.param("bookingNo");
  2.         var total_fee = req.param("total_fee");
  3.         var openid = req.param("openid");
  4.         var body = "费用说明";
  5.         var url = "https://api.mch.weixin.qq.com/pay/unifiedorder";
  6.         var formData = "<xml>";
  7.         formData += "<appid>appid</appid>"; //appid
  8.         formData += "<attach>test</attach>";
  9.         formData += "<body>" + body + "</body>";
  10.         formData += "<mch_id>mch_id</mch_id>"; //商户号
  11.         formData += "<nonce_str>nonce_str</nonce_str>";
  12.         formData += "<notify_url>notify_url</notify_url>";
  13.         formData += "<openid>" + openid + "</openid>";
  14.         formData += "<out_trade_no>" + bookingNo + "</out_trade_no>";
  15.         formData += "<spbill_create_ip>spbill_create_ip</spbill_create_ip>";
  16.         formData += "<total_fee>" + total_fee + "</total_fee>";
  17.         formData += "<trade_type>JSAPI</trade_type>";
  18.         formData += "<sign>" + paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, bookingNo, spbill_create_ip, total_fee, 'JSAPI') + "</sign>";
  19.         formData += "</xml>";
  20.         request({
  21.             url: url,
  22.             method: 'POST',
  23.             body: formData
  24.         }, function(err, response, body) {
  25.             if(!err && response.statusCode == 200) {
  26.                 var prepay_id = getXMLNodeValue('prepay_id', body.toString("utf-8"));
  27.                 var tmp = prepay_id.split('[');
  28.                 var tmp1 = tmp[2].split(']');
  29.                 //签名
  30.                 var _paySignjs = paysignjs(appid, mch_id, 'prepay_id=' + tmp1[0], 'MD5',timeStamp);
  31.                 var o = {
  32.                     prepay_id: tmp1[0],
  33.                     _paySignjs: _paySignjs
  34.                 }
  35.                 res.send(o);
  36.             }
  37.         });
复制代码

下面是用到的函数
  1. function paysignjs(appid, nonceStr, package, signType, timeStamp) {
  2.     var ret = {
  3.         appId: appid,
  4.         nonceStr: nonceStr,
  5.         package: package,
  6.         signType: signType,
  7.         timeStamp: timeStamp
  8.     };
  9.     var string = raw1(ret);
  10.     string = string + '&key='+key;
  11.     console.log(string);
  12.     var crypto = require('crypto');
  13.     return crypto.createHash('md5').update(string, 'utf8').digest('hex');
  14. };

  15. function raw1(args) {
  16.     var keys = Object.keys(args);
  17.     keys = keys.sort()
  18.     var newArgs = {};
  19.     keys.forEach(function(key) {
  20.         newArgs[key] = args[key];
  21.     });

  22.     var string = '';
  23.     for(var k in newArgs) {
  24.         string += '&' + k + '=' + newArgs[k];
  25.     }
  26.     string = string.substr(1);
  27.     return string;
  28. };

  29. function paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, out_trade_no, spbill_create_ip, total_fee, trade_type) {
  30.     var ret = {
  31.         appid: appid,
  32.         attach: attach,
  33.         body: body,
  34.         mch_id: mch_id,
  35.         nonce_str: nonce_str,
  36.         notify_url: notify_url,
  37.         openid: openid,
  38.         out_trade_no: out_trade_no,
  39.         spbill_create_ip: spbill_create_ip,
  40.         total_fee: total_fee,
  41.         trade_type: trade_type
  42.     };
  43.     var string = raw(ret);
  44.     string = string + '&key='+key;
  45.     var crypto = require('crypto');
  46.     return crypto.createHash('md5').update(string, 'utf8').digest('hex');
  47. };

  48. function raw(args) {
  49.     var keys = Object.keys(args);
  50.     keys = keys.sort()
  51.     var newArgs = {};
  52.     keys.forEach(function(key) {
  53.         newArgs[key.toLowerCase()] = args[key];
  54.     });

  55.     var string = '';
  56.     for(var k in newArgs) {
  57.         string += '&' + k + '=' + newArgs[k];
  58.     }
  59.     string = string.substr(1);
  60.     return string;
  61. };

  62. function getXMLNodeValue(node_name, xml) {
  63.     var tmp = xml.split("<" + node_name + ">");
  64.     var _tmp = tmp[1].split("</" + node_name + ">");
  65.     return _tmp[0];
  66. }
复制代码

这样简单3步,小程序的微信支付功能就接上了,下面是测试的支付效果图

cf9d84ef7.png
51c89413c.png

原文:http://www.jianshu.com/p/72f5c1e3f8a5
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /2 下一条


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com