微信小程序支付功能开发与踩坑经验总结

| 30 条评论 | 58,481 人已阅
本站所有文章均为博主人工写作，绝无AI辅助成分，请放心参阅。

2021年3月11日更新：
本文虽受到一定关注，但时隔3年多，其中代码以及安全性都已过时，为避免各位踩坑，请移步我的另外一篇文章：https://blog.brain1981.com/2354.html
本文评论区大家所提出的其他问题，也都已在这篇博客列出的代码中解决，如果你不是用WordPress也没关系，其中PHP部分稍加修改即可使用。

以下是原文：

早有耳闻微信小程序的支付功能开发是一步一坑，这两天果然踩了个遍。除了简要到令人愤怒的官方文档外，网上所有能搜到的相关文章，也没有任何一篇提供的代码是能够顺利跑通的。好在还有一部分前人的经验可以吸取，再加上个人的一点直觉引导，终于在凌晨的时候真机测试通过。

趁热打铁把踩过的坑罗列一遍，最后会附上真机跑通的代码。

首先是小程序支付功能的申请。在半年前我有另一个小程序项目，虽然当时没有开通小程序微信支付的需求，但是我留意过应用号（小程序号）后台微信支付的相关选项。当时，这个小程序因为绑定过已认证的服务号，因此小程序支付是可以直接申请的，无需任何费用。但是这次的项目，同样是另一个已经绑定过认证服务号的小程序，在微信支付界面，提示我要认证当前的小程序号才能开通微信支付，也就是说，绑定服务号还不够，必须把这个小程序号也交300元认证后，才给开通支付功能！真的很坑，好在客户没有什么怨言，非常配合地就把认证给办了…

一天后小程序号认证通过，就有了申请支付的入口：

果断选右边那个，根据给出的提示，到商户平台里面用小程序的appid绑定就行了。

第二个坑，获取openid。在网上能找到的大部分实例代码里，都把获取openid的接口调用直接写在了小程序代码里。这个接口的地址是这样的：
https://api.weixin.qq.com/sns/jscode2session?appid=********&secret=********&js_code=********&grant_type=authorization_code
其中js_code是通过wx.login获得的，这个没问题；appid也没问题；问题在secret上，即appsecret，这个密钥如果直接写在小程序端，本来就不太安全。果不其然，开发工具报错如下：

于是我尝试把api.weixin.qq.com域名加入request合法域名列表，人家不给我加…

那就很奇怪了，为啥网上很多例子给出的代码是直接请求api.weixin.qq.com接口的？别人可以我就不可以，没道理啊！

花了很多时间查证，小程序是今年年初的时候禁止了api.weixin.qq.com域名的直接请求的，目的就是为了避免开发者把appsecret直接写在小程序端的代码里，造成安全隐患。虽说是为了安全着想，但这真的很坑爹，官方在开发资料里面并没有提到这事情，导致很多人在此绕了弯路。

此外，我在开发过程中，其实是一路绕过这个坑的。因为发现虽然开发工具会报错不能请求这个域名，但是在开发工具提供的远程调试功能里，在手机上是可以直接请求这个接口的。于是获取openid这个过程在最初的开发调试中并没有暴露问题，而是在我觉得已经大功告成，即将提供对外测试的版本中，在手机上关闭了vconsole后，微信支付功能拉不起来，并且因为关闭了vconsole就看不到任何报错信息，是直觉告诉我这个请求域名发生了问题。微信开发就是这么操蛋，很多时候得靠程序员的直觉，而不是文档…

解决这个问题的唯一办法就是写一个PHP扔到自己的服务器上，借助这个PHP请求openid的接口，再返回给小程序端。这个PHP的代码附在文末。

接下来第三个坑，是签名验证。首先我们要进行商户这里的统一支付签名，把appid、商品名、商户id、nonce值、notify_url、openid、订单号、金额….等等一连串的值，按照key=value&key=value&…格式，key为字母顺序排列下来，最后加上”商户key”（在商户后台的“账户中心 – API安全”页面获得，也叫API密钥），组成一个字符串，并经过MD5加密后生成一串签名值。
这些值，获取的地方哪里都有，光收集他们就得费一番力气；收集完毕后，还要按既定顺序排列，不能颠倒，并且商户key值是例外，得排在最后。MD5加密方法是gitHub上找的现成代码，给出地址：
https://github.com/leibing8912/WxMD5

以上签名完成后，还要把这些值去掉最后的商户key，加上已经完成的签名，封装成一个XML格式字符串，把这个字符串作为参数请求接口https://api.mch.weixin.qq.com/pay/unifiedorder，在返回的值中提取一串”prepay_id=”值，再用刚才的连接键值的方法获得长字符串，进行第二次MD5加密签名。

真TNND绕啊！我为了调试成功两次签名值，也费了不少力气。好在在别人的文章里看到有微信官方提供的调试工具，帮了不少忙，这是调试工具链接：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1

等到以上统统完成，连同刚才获得的签名值，再根据官方文档重新组织一下各个所需参数，才能通过wx.requestPayment请求拉起支付。而我们可爱的微信官方文档，仅仅介绍了这最后的一步 – wx.requestPayment所需要的几个参数而已，给出的例程更是让人汗颜，欢迎大家去围观（现在是2018年8月16日，我不会知道官方在此之后多久会完善它的文档，但现在这个文档看来是很不友好的）：https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobject

下面我将自己调试完毕的代码整理一下，留个存档：
小程序端，保留大部分的console的版本

  /* Author: Brain - blog.brain1981.com */
  /* 微信支付 */
  goWxPay: function () {
    var that = this;
    //登陆获取code
    wx.login({
      success: function (res) {
        console.log("获取login code",res.code);
        //获取openid
        that.getOpenId(res.code);
      }
    });
  },
 
  /* 获取openId */
  getOpenId: function (code) {
    var that = this;
    wx.request({
      url: "https://****?code=" + code, //服务器端的请求地址，域名已加入小程序request白名单
      method: 'GET',
      success: function (res) {
        console.log("获取openid", res);
        that.unitedPayRequest(res.data.openid);
      },
      fail: function () {
        console.log("获取openid 失败", res);
      },
      complete: function () {
        console.log("获取openid 完毕", res);
      }
    });
  },//getOpenId()
 
  /*统一支付接口*/
  unitedPayRequest: function(openid){
    var that=this;
    //统一支付签名
    var appid = '';//appid必填
    var body = '';//商品名必填
    var mch_id = '';//商户号必填
    var nonce_str = util.randomString();//随机字符串，不长于32位。  
    var notify_url = '';//通知地址必填
    var total_fee = parseInt(0.01 * 100); //价格，这是一分钱
    var trade_type = "JSAPI";
    var key = ''; //商户key必填，在商户后台获得
    var out_trade_no = '';//自定义订单号必填
 
    var unifiedPayment = 'appid=' + appid + '&body=' + body + '&mch_id=' + mch_id + '&nonce_str=' + nonce_str + '&notify_url=' + notify_url + '&openid=' + openid + '&out_trade_no=' + out_trade_no + '&total_fee=' + total_fee + '&trade_type=' + trade_type + '&key=' + key;
    console.log("unifiedPayment", unifiedPayment);
    var sign = md5.md5(unifiedPayment).toUpperCase();
    console.log("签名md5", sign);
 
    //封装统一支付xml参数
    var formData = "<xml>";
    formData += "<appid>" + appid + "</appid>";
    formData += "<body>" + body + "</body>";
    formData += "<mch_id>" + mch_id + "</mch_id>";
    formData += "<nonce_str>" + nonce_str + "</nonce_str>";
    formData += "<notify_url>" + notify_url + "</notify_url>";
    formData += "<openid>" + openid + "</openid>";
    formData += "<out_trade_no>" + that.data.ordernum + "</out_trade_no>";
    formData += "<total_fee>" + total_fee + "</total_fee>";
    formData += "<trade_type>" + trade_type + "</trade_type>";
    formData += "<sign>" + sign + "</sign>";
    formData += "</xml>";
    console.log("formData", formData);
    //统一支付
    wx.request({
      url: 'https://api.mch.weixin.qq.com/pay/unifiedorder', //别忘了把api.mch.weixin.qq.com域名加入小程序request白名单，这个目前可以加
      method: 'POST',
      head: 'application/x-www-form-urlencoded',
      data: formData, //设置请求的 header
      success: function (res) {
        console.log("返回商户", res.data);
        var result_code = util.getXMLNodeValue('result_code', res.data.toString("utf-8"));
        var resultCode = result_code.split('[')[2].split(']')[0];
        if (resultCode == 'FAIL') {
          var err_code_des = util.getXMLNodeValue('err_code_des', res.data.toString("utf-8"));
          var errDes = err_code_des.split('[')[2].split(']')[0];
          wx.showToast({
            title: errDes,
            icon: 'none',
            duration: 3000
          })
        } else {
          //发起支付
          var prepay_id = util.getXMLNodeValue('prepay_id', res.data.toString("utf-8"));
          var tmp = prepay_id.split('[');
          var tmp1 = tmp[2].split(']');
          //签名  
          var key = '';//商户key必填，在商户后台获得
          var appId = '';//appid必填
          var timeStamp = util.createTimeStamp();
          var nonceStr = util.randomString();
          var stringSignTemp = "appId=" + appId + "&nonceStr=" + nonceStr + "&package=prepay_id=" + tmp1[0] + "&signType=MD5&timeStamp=" + timeStamp + "&key=" + key;
          console.log("签名字符串", stringSignTemp);
          var sign = md5.md5(stringSignTemp).toUpperCase();
          console.log("签名", sign);
          var param = { "timeStamp": timeStamp, "package": 'prepay_id=' + tmp1[0], "paySign": sign, "signType": "MD5", "nonceStr": nonceStr }
          console.log("param小程序支付接口参数", param);
          that.processPay(param);
        }
 
      },
    })
 
  },//unitedPayRequest()
 
  /* 小程序支付 */
  processPay: function (param) {
    wx.requestPayment({
      timeStamp: param.timeStamp,
      nonceStr: param.nonceStr,
      package: param.package,
      signType: param.signType,
      paySign: param.paySign,
      success: function (res) {
        // success
        console.log("wx.requestPayment返回信息",res);
        wx.showModal({
          title: '支付成功',
          content: '您将在“微信支付”官方号中收到支付凭证',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
            } else if (res.cancel) {
            }
          }
        })
      },
      fail: function () {
        console.log("支付失败");
      },
      complete: function () {
        console.log("支付完成(成功或失败都为完成)");
      }
    })
  }//processPay()

几个要用到的方法，除了MD5用从Github上找的代码，其他如下：

/* Author: Brain - blog.brain1981.com */
/* 时间戳产生函数   */
function createTimeStamp() {
  return parseInt(new Date().getTime() / 1000) + ''
}
/* 随机数 */
function randomString() {
  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; //默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
  var maxPos = chars.length;
  var pwd = '';
  for (var i = 0; i < 32; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}
/* 获取XML节点信息 */
function getXMLNodeValue(node_name, xml) {
  var tmp = xml.split("<" + node_name + ">")
  var _tmp = tmp[1].split("</" + node_name + ">")
  return _tmp[0]
}
module.exports = {
  createTimeStamp: createTimeStamp,
  randomString: randomString,
  getXMLNodeValue: getXMLNodeValue
}

在服务端获取openid的PHP代码

//获取用户openid
function getPortData($url){
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_POST, 0);
	curl_setopt($ch, CURLOPT_HEADER, false);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
	$r = curl_exec($ch);
	//$r = json_decode($r);
	if($error=curl_error($ch)){
		die($error);
	}
	curl_close($ch);
	return $r;
}
 
function getopenid(){
	$code = $_GET["code"];
	if(empty($code)) return array('status'=>0,'info'=>'缺少js_code');
	$appid = '';//必填
	$appsecret = '';//必填
	$url = "https://api.weixin.qq.com/sns/jscode2session?appid=".$appid."&secret=".$appsecret."&js_code=".$code."&grant_type=authorization_code";
	$result = getPortData($url);
	//var_dump($result);
	echo $result;
}
getopenid();

自此，拼拼凑凑地总算把小程序微信支付跑起来了。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/1946.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

30 关于 “微信小程序支付功能开发与踩坑经验总结” 的评论

    2. Brain 文章作者

      这个我回头查了下之前的代码，填的就是我自己网站的域名地址（http://www.xxx.com）。在我的小程序里notify_url暂时只在签名这里用到，所以我猜测填什么都不要紧

      回复 ↓
      1. 匿名

        notify_url回调地址,是在用户支付完成后，微信通知你用户已完成支付用的。它应该会传给你之前下单获取的prepay_id。

        回复 ↓
        1. 匿名

          比如说用户支付完毕后，你这边需要做什么，就得靠它了。不然用户支付完了，他什么也没得到，会骂人的 🙂

          回复 ↓
        3. 小夏

          这是否是说我们制作小程序需要申请一个域名，有一个可以公网访问的地址，用来接收用户已完成支付的通知？

          回复 ↓
  2. 一股凉风

    首先说下，没有亲自测试，看了下流程，感觉应该可以跑通。
    说下问题，统一支付那块应该是服务器去调合适一些吧，那么多的key都在JS里面必然不安全

    回复 ↓
    1. Brain 文章作者

      出于安全考虑肯定是尽可能多的把这些都放服务器。
      但是我觉得在统一支付这一块，即使把key丢出来了，调用不是还有域名或ip限制么，我记得商户后台可以查看限制的，至于到底是域名还是IP，时间久远我也不记得了。微信是不会留这么大一个破绽的。

      另外这个当前是否能跑通我现在也不敢保证了，只能保证写这篇文章的时候是肯定能跑通的。目前上线的项目，没有改动过代码，支付运行也正常。
      如果你照此操作也能跑通，欢迎留言告知。谢谢

      回复 ↓
  4. 风殇

    几个要用的方法写在哪里的，在哪里调用。 我现在就只看见前端把所有的支付跑通了，后端只有一个获取openid的。

    回复 ↓
    1. Brain 文章作者

      你把这些方法名做关键词搜一下不就知道用在了哪里了。这套代码已经很完整了，至少我写这篇文章的时候网上没有比我更完整的了，而且是亲自跑通的。

      回复 ↓
  5. 风殇

    大哥，用你这个模拟器，真机都调试成功了。 其中就一个 res 报一个没有定义的function . 明天是返回来的数据，传入下一个函数。 结果一直报没有定义。

    回复 ↓
  9. 吴越山人

    楼主辛苦, 这段代码确实已经相当完整. 但取prepay_id那段放到服务器端，key不在客户端暴露，安全性较好。

    回复 ↓
    1. Brain 文章作者

      谢谢！
      的确key在服务器上提供就行了，自己可以写个简单的接口获取，现在看来这里是偷懒了。写这篇文章的当时只为了能调试成功已经很费脑力了，并不太在意安全性方面。
      其实我好奇的是，key写在小程序前端，黑客如何可以获取到？小程序的源代码本身有哪些漏洞可以让人直接破解？如果不知道这个方法，我对这里所谓的安全性始终无法提起精神来，也就一直懒得去改这一块。因为我在服务器上简单写一个这样的获取接口，安全性未必比小程序的加密（如果有的话）来的高，所以暂时还不想去改这篇文章。而如果你了解小程序的漏洞和相关安全知识，我相信你已经自己改进了我的程序，本文在其他方面能帮你节约了一些时间也就足够了。
      也欢迎分享自己的相关经验，包括如何改进我这篇的代码，不胜感激。

      回复 ↓
      2. 吴越山人

        我没有做过小程序支付，就是觉得微信支付过程繁琐，所以觉得上面的代码比较明了，要更安全点，就是在微信小程序和服务器端之间增加一个来回，微信小程序传openId给服务器端, 服务器端拿openId和key、appId等换取prepay_id, 然后把prepay_id，timeStamp，nonceStr，signType，paySign返回微信小程序，后面过程就一样了。

        回复 ↓
  10. mudaoao

    说实在，你把本该在服务端实现的东西，搞在了小程序里面，姿势不对，踩坑里面难免不了。按照最新文档，订单生成所有流程是在服务端做的，获取openid，拼接参数，调用统一下单api，全部由服务器实现。然后返回小程序需要的requestPayment参数，小程序拉起支付就行了。

    回复 ↓
    1. Brain 文章作者

      谢谢。
      不过这是一年多以前的总结了，那时候没有人提供正确的姿势参考，只能一步一步自己踩坑试错，确实比较菜。
      刚去官网撇了一眼最新文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=4
      那时候可没这么幸福，没有步骤对比和详细的参数说明的。官方有提示把key放在服务端，其余一概无。
      现在么，我这篇文章的确过时了。

      回复 ↓
  12. jamesjia

    谢谢您的帮助,我已成功调起微信支付功能.
    并且发现在小程序下使用web-view组件可以兼容h5页面的微信支付.小程序整合支付的另一种思路.

    回复 ↓

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注