当前位置 博文首页 > 鹏多多：前端调用微信小程序的支付流程
分享一个完整的微信小程序支付流程中，前端要做的模块。
在调用wx.requestPayment之前，需要准备一些参数，流程如下
1，调用 wx.login() 获取 临时登录凭证code ，并调用wx.request回传到服务端。
2，服务端调用 auth.code2Session 接口，换取用户唯一标识 OpenID 和 会话密钥 session_key。
3，前端拿到服务端返还的参数后，调用wx.requestPayment。
下面是我画的一个流程图
如上，一共五个参数，参数名区分大小写，参数名写错或者参数类型搞错都不行。
pay () {
let _this = this;
//此处5个变量为我项目需要，与微信支付无关
let { userId, needPay, price, walletNum, classId } = this.data;
if(needPay === 0){ //如果还需微信支付的金额为 0 则全部走钱包支付
HTTP.buyPay(userId , price, classId)
.then(res => {
if(res.status === "y"){
FN.Alert(res.info)
.then(() => {
wx.navigateBack();
})
};
});
}else{//进入微信支付
FN.wxLogin()
.then(res => {
this.setData({
code:res
},() => {
HTTP.payCourse(userId, classId, walletNum, needPay, res)// 调服务端，拿到支付密匙
.then(res => {
if(res.status === "y"){
let obj = res.infoObject.wxpayInfo;
wx.requestPayment({// 调起微信支付
timeStamp: obj.timestamp,
nonceStr: obj.nonceStr,
package: obj.wxPackage,
signType: obj.signType,
paySign: obj.sign,
success (res) {
FN.Alert("支付成功")
.then(() => {
wx.navigateBack();
})
},
fail (res) {
_this.setData({
isShow:false,
payPwd:"",
pwdFocus:false
}, () => {
if(res.errMsg.indexOf("cancel") > -1){
FN.Toast("取消支付");
}else{
FN.Toast("支付失败");
}
})
}
})
}
})
});
})
.catch(res => {
FN.Toast("获取登录凭证失败");
})
}
}
如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；
END
往期文章
个人主页
