最近开发微信小程序进入到支付阶段,一直以来从事 App 开发,所以支付流程还是熟记于心的。但是微信小程序的支付就有点奇怪了,应用的创建是在公众号里,但是文档的介绍却在公众号中无法找到直接入口,甚是不解,而且小程序的师傅到底是属于公众号支付范畴还是 app 支付范畴也成疑问。下面是小程序支付文档的入口(嵌套在小程序 api 中):
小程序支付步骤:
1,预支付
2,根据预支付数据 + 签名——> 发起支付
3,支付回调
下面对这 3 个步骤进行简单描述:
1,预支付。该接口通过前端提交需支付的信息(订单号、价格等)给开发者服务器,开发者服务器在提交到微信,而后返回真正前端需要进行支付的一些信息;eg:
开发者服务器的预支付接口:
- https: //()htm?total_fee=100&cid=6001&orderCodes=2016120119
- {
- "sign": "A2****************A6",
- "timestamp": "14****************68",
- "package": "Sign=WXPay",
- "partnerId": "14****************02",
- "appid": "wx****************ab",
- "nonceStr": "9f****************37",
- "prepayId": "wx****************54"
- }
2,发起支付 (需要注意的是发起支付是不需要上传 appid,
但是签名 paySign 需要 appid , 而且放在第一个)
- wx.requestPayment({
- nonceStr: res.data.nonceStr,
- package: "prepay_id=" + res.data.prepayId,
- signType: 'MD5',
- timeStamp: res.data.timestamp,
- paySign: sign,
- //<strong><span style="color:#ff0000;">五个字段参与签名(区分大小写):appId,nonceStr,package,signType,timeStamp(需要注意的是,这5个参数签名排序的顺序按照ASCII字典序排序)</span></strong>
- success: function(res) {
- console.log("支付成功");
- },
- fail: function() {},
- complete: function() {}
- })
生成签名 sign
微信小程序 MD5 加密工具下载地址:https://code.csdn.net/snippets/2019875/master/download
- var MD5Util = require('../../../utils/md5.js');
- var sign = '';
- //<strong><span style="color:#ff0000;">顺序按照ASCII字典序排序</span></strong>
- var signA = "appId=" + app.appId + "&nonceStr=" + res.data.nonceStr + "&package=prepay_id=" + res.data.prepayId + "&signType=MD5&timeStamp=" + res.data.timestamp;
- var signB = signA + "&key=" + app.key;
- sign = MD5Util.MD5(signB).toUpperCase();
生成签名上面是我的代码,不是很清晰, 下面列出来官方文档的详细描述:
假设传送的参数如下:
- appid:wxd930ea5d5a258f4f(需要注意的是appid在wx.requestPayment({})发起支付是不上传,但是签名时需要)mch_id:10000100 device_info:1000 body:test nonce_str:ibuaiVcKdpRxkhJA
第一步:对参数按照 key=value 的格式,并按照参数名 ASCII 字典序排序如下:
- stringA = "appid=wxd930ea5d5a258f4f&body=test&device_info=1000&mch_id=10000100&nonce_str=ibuaiVcKdpRxkhJA";
第二步:拼接 API 密钥:
- stringSignTemp = "stringA&key=192006250b4c09247ec02edce69f6a2d"sign = MD5(stringSignTemp).toUpperCase() = "9A0A8659F005D6984697E2CA0A9CF3B7"
此时的 sign 用于 wx.requestPayment 上传参数 paySign。
最终得到最终发送的数据:
- <xml>
- <appid>
- wxd930ea5d5a258f4f
- </appid>
- <mch_id>
- 10000100
- </mch_id>
- <device_info>
- 1000
- <device_info>
- <body>
- test
- </body>
- <nonce_str>
- ibuaiVcKdpRxkhJA
- </nonce_str>
- <sign>
- 9A0A8659F005D6984697E2CA0A9CF3B7
- </sign>
- <xml>
以上所述是小编给大家介绍的微信小程序进行微信支付的步骤,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/98784.htm