微信小程序支付流程
文章目录
1. 用户发起支付请求
在小程序界面上,用户选择商品或服务,点击支付按钮。
2. 前端(小程序)登录并准备支付参数
- 调用
wx.login
获取code
。 - 将
code
发送到后端,获取openid
和session_key
(如果还未获取)。 - 准备商品订单信息,如商品描述、价格、数量等。后面会传送给后端。
// 用户点击支付按钮
onPayButtonClick() {
// 准备订单信息,调用后端接口发起支付请求
let orderInfo = {};
this.wxLogin(orderInfo);
},
// 调用 wx.login 获取 code(如果还未获取)
wxLogin(orderInfo) {
let that = this;
wx.login({
success: (res) => {
if (res.code) {
// 发送 code 到后端获取 openid 和 session_key
wx.request({
url: 'https://xxxxxx/api/get-openid',
data: {
code: res.code
},
success: (res) => {
// 获取到 openid 和 session_key(如果需要的话)
// that.handlePayment(orderInfo) // 第四步
}
});
} else {
console.log('登录失败!' + res.errMsg);
}
}
});
}
3. 后端(服务器)处理支付请求,并返回支付参数给前端
- 验证用户身份(可以使用
openid
和session_key
)。 - 生成订单,保存订单信息到数据库。
- 调用微信支付统一下单API,获取
prepay_id
和其他支付参数。 - 将
prepay_id
、nonceStr
(随机字符串)、package
(统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=***)、signType
(签名方式)、timeStamp
(时间戳)等必要的支付参数返回给前端。
4. 前端(小程序)调用微信支付
前端调用 wx.requestPayment
API 发起支付请求,传入后端返回的支付参数
// 创建订单并发起支付请求
handlePayment(orderInfo) {
wx.request({
url: 'https://xxxxx/api/create-order',
method: 'POST',
data: {
orderInfo // 订单信息,如商品ID、数量、价格等
},
success: (orderRes) => {
// 获取到支付参数
const payment = orderRes.data;
// 调用微信支付
wx.requestPayment({
provider: 'wxpay',
timeStamp: payment.timeStamp,
nonceStr: payment.nonceStr,
package: payment.package,
signType: payment.signType,
paySign: payment.paySign,
success: function (res) {
// 支付成功后的回调函数
},
fail: function (res) {
// 支付失败后的回调函数
}
});
}
});
},
5. 用户完成支付
用户在小程序内完成支付操作
6. 微信支付平台通知后端
- 微信支付平台会向后端服务器发送支付结果通知。
- 后端服务器需要验证通知的合法性,并更新订单状态。
7. 后端通知前端支付结果(可选)
后端可以根据需要,将支付结果通知前端,前端更新界面状态。