微信小程序支付流程

admin2024-04-03  1

文章目录

  • 1. 用户发起支付请求
  • 2. 前端(小程序)登录并准备支付参数
  • 3. 后端(服务器)处理支付请求,并返回支付参数给前端
  • 4. 前端(小程序)调用微信支付
  • 5. 用户完成支付
  • 6. 微信支付平台通知后端
  • 7. 后端通知前端支付结果(可选)

1. 用户发起支付请求

在小程序界面上,用户选择商品或服务,点击支付按钮。

2. 前端(小程序)登录并准备支付参数

  1. 调用 wx.login 获取 code
  2. code 发送到后端,获取 openidsession_key(如果还未获取)。
  3. 准备商品订单信息,如商品描述、价格、数量等。后面会传送给后端。
// 用户点击支付按钮  
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. 后端(服务器)处理支付请求,并返回支付参数给前端

  1. 验证用户身份(可以使用 openidsession_key)。
  2. 生成订单,保存订单信息到数据库。
  3. 调用微信支付统一下单API,获取prepay_id 和其他支付参数。
  4. prepay_idnonceStr(随机字符串)、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. 后端通知前端支付结果(可选)

后端可以根据需要,将支付结果通知前端,前端更新界面状态。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!