Describe the steps for WeChat payment using WeChat mini program

Recently, the development of WeChat applet has entered the payment stage. I have been engaged in App development, so I still know the payment process by heart. But the payment for WeChat mini program is a bit strange. The application is created in the official account, but the introduction of the document cannot be found in the official account. It is very confusing, and the master of the mini program belongs to the official account for payment. The scope or the scope of app payment is also questionable. The following is the entrance to the mini program payment document (nested in the mini program api):

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1

Mini program payment steps:

1, prepayment

2, based on prepayment data + signature——> initiate payment

3, payment callback

The following is a brief description of these 3 steps:

1 , prepaid. This interface submits the payment information (order number, price, etc.) to the developer server through the front end. The developer server submits it to WeChat and then returns some information that the real front end needs to pay; eg:

Prepayment of the developer server Interface:

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, initiate payment (it should be noted that initiating payment does not require uploading appid,

but signature paySign requires appid, and it is placed first)

wx.requestPayment({ 
nonceStr: res.data.nonceStr, 
package: "prepay_id="+res.data.prepayId, 
signType: 'MD5', 
timeStamp: res.data.timestamp, 
paySign: sign,//五个字段参与签名(区分大小写)：appId,nonceStr,package,signType,timeStamp（需要注意的是，这5个参数签名排序的顺序按照ASCII字典序排序） 
success: function(res){ 
console.log("支付成功"); 
}, 
fail: function() { 
}, 
complete: function() { 
} 
})

generate signature sign

https://pay .weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1&t=20161122

WeChat applet MD5 encryption tool download address: https://code.csdn.net/snippets/2019875 /master/download

var MD5Util = require('../../../utils/md5.js');
var sign = ''; 
//顺序按照ASCII字典序排序 
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();

The above is my code to generate the signature, which is not very clear. The detailed description of the official document is listed below:

Assume that the parameters transmitted are as follows:

appid： wxd930ea5d5a258f4f（需要注意的是appid 在wx.requestPayment({})发起支付是不上传，但是签名时需要）
mch_id： 10000100
device_info： 1000
body： test
nonce_str： ibuaiVcKdpRxkhJA

The first step: follow the key=value for the parameters Format, and sorted in ASCII dictionary order of parameter names as follows:

stringA="appid=wxd930ea5d5a258f4f&body=test&device_info=1000&mch_id=10000100&nonce_str=ibuaiVcKdpRxkhJA";

Step 2: Splice the API key:

stringSignTemp="stringA&key=192006250b4c09247ec02edce69f6a2d"
sign=MD5(stringSignTemp).toUpperCase()="9A0A8659F005D6984697E2CA0A9CF3B7"

The sign at this time is used for wx.requestPayment to upload the parameter paySign.

Finally got the final sent data:

wxd930ea5d5a258f4f
10000100
1000
test
ibuaiVcKdpRxkhJA
9A0A8659F005D6984697E2CA0A9CF3B7

The above are the steps for WeChat payment in the WeChat applet introduced by the editor. I hope it will be helpful to everyone