微信小程序中微信支付（前端流程）

微信支付前准备工作

1. 微信公众平台绑定商户号
   
2. 微信支付平台配置好后端信息
3. 支付前要有用户的openid

1. 客户端点击支付按钮

在用户点击支付按钮时，触发支付流程。

// 绑定支付按钮点击事件
function onPayButtonClick() {
  const openid = 'USER_OPENID'; // 你已经获得的用户 openid
  const total_fee = 1; // 金额（单位：分）
  const body = '商品描述';

  // 调用服务器接口创建预支付订单
  wx.request({
    url: 'https://yourserver.com/createOrder', // 替换为你的服务器接口地址
    method: 'POST',
    data: {
      openid: openid,
      total_fee: total_fee,
      body: body
    },
    success(orderResponse) {
      const payParams = orderResponse.data.payParams;
      // 调用微信支付
      wx.requestPayment({
        timeStamp: payParams.timeStamp,
        nonceStr: payParams.nonceStr,
        package: payParams.package,
        signType: payParams.signType,
        paySign: payParams.paySign,
        success(res) {
          console.log('支付成功', res);
          // 可以在这里添加进一步的支付成功处理逻辑
        },
        fail(res) {
          console.log('支付失败', res);
          // 可以在这里添加支付失败处理逻辑
        }
      });
    }
  });
}

2. 调用后端创建预支付订单接口

此时后端服务器需要处理创建预支付订单的请求，并返回支付参数给小程序客户端。这里假设你已经有后端接口来处理这个逻辑。

后端接口需要做以下几件事：

1. 调用微信支付的统一下单接口。
2. 返回支付参数给客户端。

3. 小程序调用微信支付接口

在小程序客户端接收到后端返回的支付参数后，调用微信支付API wx.requestPayment 发起支付。

wx.requestPayment({
  timeStamp: payParams.timeStamp,
  nonceStr: payParams.nonceStr,
  package: payParams.package,
  signType: payParams.signType,
  paySign: payParams.paySign,
  success(res) {
    console.log('支付成功', res);
    // 可以在这里添加进一步的支付成功处理逻辑
  },
  fail(res) {
    console.log('支付失败', res);
    // 可以在这里添加支付失败处理逻辑
  }
});

4. 支付结果通知

支付成功后，微信支付会异步通知后端服务器的通知URL，后端服务器需要处理这个通知，并更新订单状态。

5. 支付结果通知

在前端支付成功的回调中去调用后端接口验证是否支付成功有效。