大家好，又见面了，我是你们的朋友全栈君。
目录
-
-
- 支付流程
- 具体实现
-
- 一、前端调用登录获取code
- 二、服务端接收code，服务端调用微信api获取openId
- 三、前端点击去支付时
- 四、服务端请求微信统一下单接口
- 五、前端获取到prePay_id 调起支付
- 六、注意
-
支付流程
- 点击
去结算时，，前端判断是否登录【未登录跳转到登录页】,登录发送code到服务端，服务端使用code发送请求去获取openId；并返回userId/openId存储在storage； - 点击
去支付时，前端发送请求【订单详细，openId】，服务器用openId去统一下单，下单成功后，获取prePay_id，返回前端 - 前端拿到 prePay_id 调起支付
具体实现
一、前端调用登录获取code
代码语言：javascript复制wx.login({
success: function(res){
if(res.code){
// 发起请求
wx.request({
url: 'http://test.com/login',
data: {
code: res.code
},
success(result) {
console.log(result.openId)
wx.setStorage('openId', result.openId)
}
})
} else {
// 登录失败
}
}
})二、服务端接收code，服务端调用微信api获取openId
文档 – auth.code2Session
代码语言：javascript复制GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code三、前端点击去支付时
前端点击去支付时，提交【openId，订单明细】到服务端进行下单
代码语言：javascript复制// 提交订单
commitOrder() {
let that = this
if (!this.isLogin) {
this.toLogin()
} else if (!this.currentAddress.addressId) {
wx.showToast({
title: '请先选择地址',
icon: 'none',
duration: 1500,
success() {
// 选择地址
}
})
} else if(this.isLogin && this.currentAddress.addressId)
let details = [];
(this.shopCartList).map(g => {
details.push({
goodsId: g.goodsId,
goodsNum: g.cartGoodNum,
goodsPrice: g.goodsPrice
})
})
let openId = wx.getStorageSync('openId')
Api.creatOrder({
query: {
addressId: this.currentAddress.addressId,
openId: openId,
appId: '',
details: details,
goodsMoney: this.totalMoney,
orderNote: this.orderNote
}
}).then(res => {
if (res.data.code == '0') {
this.toPay({
timeStamp: res.data.data.timeStamp.toString(),
nonceStr: res.data.data.nonceStr,
package: res.data.data.package,
signType: res.data.data.signType,
paySign: res.data.data.sign,
orderId: res.data.data.orderId,
})
}
})
} else {
}
},四、服务端请求微信统一下单接口
服务端请求微信统一下单接口，下单成功获取到prePay_id值，返回前端
文档-https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1
商户在小程序中先调用该接口（https://api.mch.weixin.qq.com/pay/unifiedorder）在微信支付服务后台生成预支付交易单，返回正确的预支付交易后，前端调起支付。
五、前端获取到prePay_id 调起支付
代码语言：javascript复制pay: function (param) {
wx.requestPayment({
timeStamp: param.timeStamp,
nonceStr: param.nonceStr,
package: param.package,
signType: param.signType,
paySign: param.paySign,
success: function (res) {
// success
console.log(res)
wx.navigateBack({
delta: 1, // 回退前 delta(默认为1) 页面
success: function (res) {
console.log(res)
},
fail: function () {
// fail
},
complete: function () {
// complete
// 不论成功失败都跳转到订单页面，后台去查询支付结果
wx.switchTab({
url: 'order',
success: function (res) {
}
})
}
})
}
})
}六、注意
不能通过 wx.requestPayment 的success回调判断支付成功 支付完不点完成不操作不进成功
文档 – 查询订单
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/135073.html原文链接：https://javaforall.cn
