微信小程序支付完整流程（前端）

 微信小程序中，常见付款给商家的场景，下面列出企业小程序中，从0起步完整微信支付流程。

一，注册微信支付商户号（由上级或法人注册）

 

 接入微信支付 - 微信商户平台

此商户号，需要由主管及更上级领导进行注册，会成为公司收款账户（不是由前端程序员注册！！！不是由前端程序员注册！！！不是由前端程序员注册！！！）

注册非常简单，重点是需要提供企业资料，一般程序员没有权限获取这些材料，所以需要由上级注册

企业注册需要材料：营业执照，对公银行账户信息，法人身份证

二，注册小程序账号(由上级或者领导注册)

注册流程简单，企业一般注册为企业小程序，非个人，需要上传营业执照等。

小程序

三，登录商户号绑定小程序

登录之前注册好的商户账号，将当前小程序ID绑定至此商户，表明此小程序可以调用此商户支付相关接口。

微信支付 - 中国领先的第三方支付平台 ｜ 微信支付提供安全快捷的支付方式

四，后端工程师书写接口

返回核心数据如下：

"appId": "xxxx",

        "nonceStr": "xxxx",

        "packageValue": "prepay_id=xxxxx",

        "paySign": "xxxxxx",

        "signType": "MD5",

        "timeStamp": "xxxxxx"

这个接口是你们公司后端程序员自己写的接口，由后端工程师书写，JAVA，PHP，C++，NODE，.NET等...不是前端写！不是前端写！不是前端写！如果没有此接口就与后端工程师沟通，让他书写。

五，前端工程师调用接口

1. 获取openid（当前用户真实id）

       openid为当前用户真实id，无法直接用任何接口获得，需要先调用微信login接口登录，获取登录凭证code，在通过此code（登录凭证，5分钟有效），向微信服务器换取用户openid。

原生小程序登录：

1. wx.login({
2. success (res) {
3. if (res.code) {
4. // code: 用户登录凭证（有效期五分钟）
5. // 使用 code 可以换取 openid、unionid、session_key 等核心信息
6. } else {
7. console.log('登录失败！' + res.errMsg)
8. }
9. }
10. })

uniapp登录：

1. uni.login({
2. provider: 'weixin',
3. success (res) {
4. if (res.code) {
5. //code: 用户登录凭证（有效期五分钟）
6. //使用 code 可以换取 openid、unionid、session_key 等核心信息
7. } else {
8. console.log('登录失败！' + res.errMsg)
9. }
10. }
11. })

发送请求调用微信官方接口，用code凭证换取用户openid（真实用户id）

原生小程序：wx.request     uniapp: uni.request， 流程无差别

1. uni.request({
2. url: `https://api.weixin.qq.com/sns/jscode2session`, //微信官方接口
3. data: {
4. appid: '小程序appId',
5. secret: '小程序密钥，在小程序appId下一行，放一块在',
6. js_code: '刚才获取的code',
7. grant_type: 'authorization_code' //固定值
8. },
9. success: (res) => {
10. //获取openid：用户真实唯一id
11. console.log(res.data.openid);
12. }
13. })

3. 调用公司后端接口，获取支付核心数据

1. // 调用后端接口
2. uni.request({
3. url: '你们公司的后端接口地址,获取支付核心数据',
4. method: 'POST',
5. data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
6. success(obj) {
7. console.log(obj)
8. }
9. })

此接口必须返回以下6个核心数据,都是由后台计算生成。

"appId": "xxxx",

        "nonceStr": "xxxx",

        "packageValue": "prepay_id=xxxxx",

        "paySign": "xxxxxx",

        "signType": "MD5",

        "timeStamp": "xxxxxx"

3. 调用微信官方支付接口，弹出支付界面

1. uni.request({
2. url: '你们公司的后端接口地址,获取支付核心数据',
3. method: 'POST',
4. data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
5. success(obj) {
8. //调用微信官方支付接口弹出付款界面,输入密码扣款
9. wx.requestPayment({
10. timeStamp: obj.xxxx.timeStamp, //后端返回的时间戳
11. nonceStr: obj.xxxx.nonceStr, //后端返回的随机字符串
12. package: obj.xxxx.packageValue, //后端返回的prepay_id
13. signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5
14. paySign: obj.xxxx.paySign, //后端返回的签名
15. success (res) {
16. console.log('用户支付扣款成功', res)
17. },
18. fail (res) {
19. console.log('用户支付扣款失败', res)
20. }
21. })
23. }
24. })

调用后，弹出付款界面，模拟器需要扫码支付。

点击真机调试会直接弹出微信付款界面。

六，总结

• 前端调用uni.login/wx.login调用微信接口，获取code，code相当于临时身份证

• 前端调公司后台获取openid的接口，获取openid

• 前端调公司后台预支付接口，传递openid、商品id、商品单价、商品数量，获取那5个参数。【时间戳timeStamp，随机字符串nonceStr，预支付id package，签名算法signType，签名paySign】

• 前端调用uni/wx.requestPayment调用微信支付方法，传递5个参数，获取支付结果（成功或失败）