【每天学点小知识】微信支付的完整流程

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天

本文介绍微信支付的完整流程，踢平微信支付流程中的一些小坑。

主要实现技术：微信原生MINA框架 + 微信云开发。

微信支付云开发可以免鉴权，直接调用微信支付的接口，我们不用关心证书、签名、也不用依赖三方模块，免去了敏感信息泄漏的风险。同时还支持退款，订单查询等。

实现流程

（1）首先你注册自己的小程序获得自己的 APPID。这里有一个限制就是只有商家才能开通微信支付，也比较好理解哈。

（2）小程序开通微信支付功能，关联自己的商户号

登录商户平台按照流程注册一下就完事了。

(3)打开云开发，找到其他设置，添加自己的商户号

到这里准备工作就做的差不多了。下面开始代码的编写：

（4）前端触发支付的按钮，通过callPay事件触发pay云函数

<button bindtap ="callPay">发起支付</button>

（5）设置云函数，这里要注意云函数写完，要及时上传，否则支付不成功。点击pay云函数目录下的index.js，然后右键选择“云函数增量上传：更新文件”或者右键云函数根目录文件夹cloudfunctions，选择“上传并部署：云端安装依赖（不上传Node_modules） ”

const cloud = require('wx-server-sdk')
cloud.init({  
    env: cloud.DYNAMIC_CURRENT_ENV
})
    
exports.main = async (event, context) => {  
    const res = await cloud.cloudPay.unifiedOrder({    
    "body": "微信支付",    
    "outTradeNo" : "122775224070323234368128", //订单号，不能重复，这个可以根据时间生成 
    "spbillCreateIp" : "127.0.0.1", //就是这个值不用改    
    "subMchId" : "1520057521",  //你的商户ID或子商户ID    
    "totalFee" : 100,  //单位为分    
    "envId": "",  //你的云开发环境ID，注意不是环境名称    
    "functionName": "paysuc",  // 支付成功的回调云函数,这个函数可以处理支付成功之后的事情
    "nonceStr":"F8B31E62AD42045DFB4F2",  //随便写的32位字符串，建议自己生成    
    "tradeType":"JSAPI"   //默认是JSAPI  
    })  
    return res
}

（6）调用云函数

callPay(){  
    wx.cloud.callFunction({    
    name: 'pay',  //云函数的名称    
    success: res => {      
        console.log(res)      
        const payment = res.result.payment   // payment包含了支付需要的所有参数   
        wx.requestPayment({        
            ...payment,        
            success (res) {          
                console.log('支付成功', res)
            },        
            fail (err) {          
               console.error('支付失败', err)         
            }      
         })    
     },    
     fail: console.error
    })
},

到这里一个完整的支付流程就完成了，还是比较简单的哈，大家跟着做，大概率不会出错。