欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

微信小程序实战教程：微信支付跳坑流程

发布：2018-01-25 10:22浏览： 次来源：网络 作者：tianshu

先看一下小程序开发步骤

微信小程序实战教程：微信支付跳坑流程(图1)


步骤
  • wx.login调用接口获取登录凭证（code）

  • code 换取用户的唯一标识（openid）
    • https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
    • 微信小程序实战教程：微信支付跳坑流程(图2)
  • 统一下单
    • URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder
    • post
    • 参数为XML
  • wx.requestPayment进行支付
    • 微信小程序实战教程：微信支付跳坑流程(图3)
采坑
  • 签名MD5加密，网上有些算法是错误的，自己写完还需要在线MD5加密工具进行校验（我采坑一下午，怎么看我写的怎么对，就是出不来，原因就是MD5工具使用错误，坑爹- - ）
  • 签名规则注意事项（must）
    • ◆ 参数名ASCII码从小到大排序（字典序）；
    • ◆ 如果参数的值为空不参与签名；
    • ◆ 参数名区分大小写；
    • ◆ 验证调用返回或微信主动通知签名时，传送的sign参数不参与签名，将生成的签名与该sign值作校验。
    • ◆ 微信接口可能增加字段，验证签名时必须支持增加的扩展字段
  • 统一下单签名appid，wx.requestPayment签名appId（大小写必须区分，真是找瞎我钛合金狗眼- - ）
  • wx.requestPayment中package参数必须是package:"prepay_id=wx21**************"，不然，会出现调用支付JSAPI缺少appid/total_fee
  • total_fee为分，并且是int
  • 生成随机数和时间戳一定要保证签名与上传参数一致
  • 大小写。。一定要注意
  • 微信小程序trade_type=JSAPI，openid参数必传
  • wx.requestPayment生成签名有appId，请求的时候没有appId
     

好了，上代码了（代码很原始，没有封装）

 

  1. /* 微信支付 */
  2.   wxpay: function () {
  3.     var that = this
  4.     //登陆获取code
  5.     wx.login({
  6.       success: function (res) {
  7.         console.log(res.code)
  8.         //获取openid
  9.         that.getOpenId(res.code)
  10.       }
  11.     });
  12.   },
  13.  
  14.   /* 获取openId */
  15.   getOpenId: function (code) {
  16.     var that = this
  17.     wx.request({
  18.       url: "https://api.weixin.qq.com/sns/jscode2session?appid=wxbd5a8270399d41d9&secret=d8aac26a5a9c16266d1a23851ebb7d9b&js_code=" + code + "&grant_type=authorization_code",
  19.       method: 'GET',
  20.       success: function (res) {
  21.         //统一支付签名
  22.         var appid = '';//appid  
  23.         var body = '';//商户名
  24.         var mch_id = '';//商户号  
  25.         var nonce_str = that.randomString;//随机字符串，不长于32位。  
  26.         var notify_url = '';//通知地址
  27.         var spbill_create_ip = '';//ip
  28.         // var total_fee = parseInt(that.data.wxPayMoney) * 100;
  29.         var total_fee = 100;
  30.         var trade_type = "JSAPI";
  31.         var key = '';
  32.         var unifiedPayment = 'appid=' + appid + '&body=' + body + '&mch_id=' + mch_id + '&nonce_str=' + nonce_str + '¬ify_url=' + notify_url + '&openid=' + res.data.openid + '&out_trade_no=' + that.data.paySn + '&spbill_create_ip=' + spbill_create_ip + '&total_fee=' + total_fee + '&trade_type=' + trade_type + '&key=' + key
  33.         var sign = MD5.MD5(unifiedPayment).toUpperCase()
  34.         console.log(sign)
  35.  
  36.         //封装统一支付xml参数
  37.         var formData = "<xml>"
  38.         formData += "<appid>" + appid + "</appid>"
  39.         formData += "<body>" + body + "</body>"
  40.         formData += "<mch_id>" + mch_id + "</mch_id>"
  41.         formData += "<nonce_str>" + nonce_str + "</nonce_str>"
  42.         formData += "<notify_url>" + notify_url + "</notify_url>"
  43.         formData += "<openid>" + res.data.openid + "</openid>"
  44.         formData += "<out_trade_no>" + that.data.paySn + "</out_trade_no>"
  45.         formData += "<spbill_create_ip>" + spbill_create_ip + "</spbill_create_ip>"
  46.         formData += "<total_fee>" + total_fee + "</total_fee>"
  47.         formData += "<trade_type>" + trade_type + "</trade_type>"
  48.         formData += "<sign>" + sign + "</sign>"
  49.         formData += "</xml>"
  50.  
  51.         //统一支付
  52.         wx.request({
  53.           url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
  54.           method: 'POST',
  55.           head: 'application/x-www-form-urlencoded',
  56.           data: formData, // 设置请求的 header
  57.           success: function (res) {
  58.             console.log(res.data)
  59.           
  60.             var result_code = that.getXMLNodeValue('result_code', res.data.toString("utf-8"))
  61.             var resultCode = result_code.split('[')[2].split(']')[0]
  62.             if (resultCode == 'FAIL') {
  63.               var err_code_des = that.getXMLNodeValue('err_code_des', res.data.toString("utf-8"))
  64.               var errDes = err_code_des.split('[')[2].split(']')[0]
  65.               wx.navigateBack({
  66.                 delta: 1, // 回退前 delta(默认为1) 页面
  67.                 success: function (res) {
  68.                   wx.showToast({
  69.                     title: errDes,
  70.                     icon: 'success',
  71.                     duration: 2000
  72.                   })
  73.                 },
  74.  
  75.               })
  76.             } else {
  77.  
  78.               //发起支付
  79.               var prepay_id = that.getXMLNodeValue('prepay_id', res.data.toString("utf-8"))
  80.               var tmp = prepay_id.split('[')
  81.               var tmp1 = tmp[2].split(']')
  82.               //签名  
  83.               var key = '';
  84.               var appId = '';
  85.               var timeStamp = that.createTimeStamp();
  86.               var nonceStr = that.randomString();
  87.               var stringSignTemp = "appId=&nonceStr=" + nonceStr + "&package=prepay_id=" + tmp1[0] + "&signType=MD5&timeStamp=" + timeStamp + "&key="
  88.               var sign = MD5.MD5(stringSignTemp).toUpperCase()
  89.               console.log(sign)
  90.               var param = { "timeStamp": timeStamp, "package": 'prepay_id=' + tmp1[0], "paySign": sign, "signType": "MD5", "nonceStr": nonceStr }
  91.               that.pay(param)
  92.             }
  93.  
  94.  
  95.  
  96.           },
  97.  
  98.         })
  99.       },
  100.       fail: function () {
  101.         // fail
  102.       },
  103.       complete: function () {
  104.         // complete
  105.       }
  106.     })
  107.   },
  108.   /* 随机数 */
  109.   randomString: function () {
  110.     var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  111.     var maxPos = chars.length;
  112.     var pwd = '';
  113.     for (var i = 0; i < 32; i++) {
  114.       pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  115.     }
  116.     return pwd;
  117.   },
  118.   /* 获取prepay_id */
  119.   getXMLNodeValue: function (node_name, xml) {
  120.     var tmp = xml.split("<" + node_name + ">")
  121.     var _tmp = tmp[1].split("</" + node_name + ">")
  122.     return _tmp[0]
  123.   },
  124.  
  125.   /* 时间戳产生函数   */
  126.   createTimeStamp: function () {
  127.     return parseInt(new Date().getTime() / 1000) + ''
  128.   },
  129.   /* 支付   */
  130.   pay: function (param) {
  131.     wx.requestPayment({
  132.       timeStamp: param.timeStamp,
  133.       nonceStr: param.nonceStr,
  134.       package: param.package,
  135.       signType: param.signType,
  136.       paySign: param.paySign,
  137.       success: function (res) {
  138.         // success
  139.         console.log(res)
  140.         wx.navigateBack({
  141.           delta: 1, // 回退前 delta(默认为1) 页面
  142.           success: function (res) {
  143.             wx.showToast({
  144.               title: '支付成功',
  145.               icon: 'success',
  146.               duration: 2000
  147.             })
  148.           },
  149.           fail: function () {
  150.             // fail
  151.           },
  152.           complete: function () {
  153.             // complete
  154.           }
  155.         })
  156.       },
  157.       fail: function () {
  158.         // fail
  159.         console.log("支付失败")
  160.       },
  161.       complete: function () {
  162.         // complete
  163.         console.log("pay complete")
  164.       }
  165.     })
  166.   }





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有