小程序支付基本流程

发布：2018-02-09 15:04浏览：次来源：网络作者：cola

提及这个支付，真是像是一个女神一样很多人都很渴望，但是很多时候都没有用到，但是又想试试到底是怎么样子的：
今天我们就来揭开神秘秘的面纱吧。

前提是：
1、小程序已经注册完毕，各种服务器环境、https等已经配置好。
2、你们是前后台合作，后台给主要给我们提供相应的数据、因为有些接口请求后台做要比我们做要简单，其实我更认为是小程序只有1M，更多的东西给后台吧

正题：

一、参考：

1、https://www.cnblogs.com/jcscript/p/6126722.html
2、https://www.weixinapphome.com/topic/28
注释：第一个是盟主天下雪已经转到小程序联盟中了的文章，第二个是根据第一个做的一篇文正，这两个都是前端实现支付发起和调用的
我的而是把支付发起和支付分开到前后分别处理。请继续。。。

[attach]8273[/attach]
上图我标记了3点需要我们注意：
第一：1、属性package的参数值是package：'prepay_id=wx211262323463265451'
第二：2、这个签名需要我们注意，签名方式是把所有参数拼接成url格式再进行MD5编码
第三：3、这个是支付的文档，请细看

对于上面的问题我们来一个一个解决：我们要先看第三步打开支付流程的文档：https://pay.weixin.qq.com/wiki/d ... api.php?chapter=9_1
[attach]8274[/attach]
其实我们可以看到所有流程都在这里！那么我们就按照这个流程一步步走。
1、小程序内调用登录接口，获取到用户的openid,api参见公共api【小程序登录API】
上面已经说过要前后台结合，所以开发小程序的你这时就要做第一步了，文档在：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject

首先用
wx.login(OBJECT)获取code，code用来换取openid，获取openid的事情我是我们后台来做，我用request带上获取的code去get就好了

function getopenid(code, cb) {
requestGet('UserOpenid', { code: code }, function (res) {
if (typeof cb == "function") {
cb(res);
}
})
}

res的返回结果就是我们的openid，到这里我们第一步完成了。

2、商户server调用支付统一下单，api参见公共api【统一下单API：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1】这个我们看一下：

这个里面的东西很多很多，如果是你自己完成前后端的话那就好好看，磨刀不误砍柴工，有一点看不到可能导致一直解决不了这个流程，毕竟微信的文档有那么一点乱乱的赶脚。这个如果像我一样是后端做的那就不用你操心了，但是你想了解的话也不难，看上面我最开始给出的两个地址，这两个文章都是吧全部流程做在前端（小程序）这里的其实没必要，这个在看资料的时候发现其实微信是提供java，net，php三种语言的封装包的，那么就是说后台只要吧这个东西下载下来把对应的参数填写修改就可以了，但是最终是什么样子的，如果可以的话我会补上这个代码，后台的代码不在我这，谅解！这个我们一样只要request用post请求得到结果就可以了，这次我们需要的结果就是支付perpay_id 我的这个请求时只返回了一个perpay_id但是我们可以看统一下单接口返回的数据他给我们不仅返回了perpay_id，还有随机字符串和签名，我说这个点的原因是我没有用这个所以是不是我们直接在接下来要用的随机字符串和签名就是直接用这两个就可以了呢（我没有验证后台没有给我返回，具体是什么样子的待验证）。跳过这一点，我们只要这个perpay_id一样可以成功。到现在我们来看一下第一步和第一步的我们已经完成了，只有第二步paySign这个签名了。对应微信的流程是： 3、商户server调用再次签名，api参见公共api【再次签名：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7】这个签名我们来看看是有点令人苦恼的，我们来看看上面说的两个文章的踩坑总结：第一篇：第二篇：总的来说看这个签名的坑是最多的。我结合一下来描述一下吧：首先我们看第三步（绿色）部分的地址

再看微信小程序API中wx.requestPayment(OBJECT)接口的文档我特别标注的红色框部分可能会让你恍然大悟了，有些“坑”可能是我们看东西的方式不对啊，对于appid和key文档上有明确的说明要带上由此我们也可以看出，对于支付流程我们正确的打开方式是下图要遵循上面图片的步骤和连接页面进行看和做。好了，扯远了：来看签名

// 调起支付签名

function MixedencryMD5(res_paydata,randomString,timeStamp) {

return "appId=" + config.appid + "&nonceStr=" + randomString + "&package=prepay_id=" + res_paydata + "&signType=MD5" + "&timeStamp=" + timeStamp + "&key=" + config.key;

}

这个是正确的顺序，在具体签名方法说明中，可以看出key是在签名参数按照ASCII大小排序完再拼接上去的，上面的参数函数

// 时间戳

function timeStamp() {

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;

}

最后就是吧这个拼接的字符串进行MD5加密，Md5加密的js在网上搜一下就好了，如果怕不对自己可以在线验证。至此我们 timeStamp 时间戳，nonceStr 随机数，package 支付id，paySign 签名，是不是都有了？对的，这样就结束了上图就是调用支付的最后步骤了，注意一点时间戳和随机字符串，保证生成一次，因为在 wx.requestPayment(OBJECT)中我们要用，在拼接的字符串中同样要用，这两个要保证一样微信去MD5加密的时候才能得到和你自己MD5加密一样的结果。

祝大家，一次成功！！有什么不对的请指正，文章引用上如有侵犯请留言我会及时修正，谢谢！

上一篇：[经验]跳坑《一百八十六》支付签名校验失败（签名错误）

下一篇：微信小程序支付源码，后台服务端代码

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