微信小程序支付详解 (前端/node.js)

小程序支付流程涉及多个步骤和不同的参与方，包括用户、小程序、微信支付平台和商户服务器。以下是一个详细的微信小程序支付流程：

1. 用户发起支付请求

用户在小程序中选择商品或服务，并点击支付按钮。

2. 小程序调用统一下单接口

小程序通过调用微信支付的统一下单接口来生成预支付交易会话。具体步骤如下：

2.1 小程序发送请求到商户服务器

小程序将支付相关的信息（如商品描述、总金额等）发送到商户服务器。

2.2 商户服务器调用微信支付统一下单接口

商户服务器接收到小程序的请求后，调用微信支付的统一下单接口，生成预支付交易会话。请求参数包括：

• appid: 小程序ID
• mch_id: 商户号
• nonce_str: 随机字符串
• sign: 签名
• body: 商品描述
• out_trade_no: 商户订单号
• total_fee: 总金额（单位为分）
• spbill_create_ip: 终端IP
• notify_url: 回调通知地址
• trade_type: 交易类型（小程序支付为 JSAPI）
• openid: 用户的OpenID

2.3 微信支付平台返回预支付交易会话标识

微信支付平台处理商户服务器的请求，并返回一个预支付交易会话标识（prepay_id）。

3. 商户服务器返回支付参数给小程序

商户服务器将微信支付平台返回的 prepay_id 和其他必要的支付参数（如时间戳、随机字符串、签名等）返回给小程序。

4. 小程序调用微信支付API

小程序接收到商户服务器返回的支付参数后，调用微信支付API发起支付请求。具体步骤如下：

4.1 调用 wx.requestPayment 接口

小程序调用 wx.requestPayment 接口，并传入支付参数：

• timeStamp: 时间戳
• nonceStr: 随机字符串
• package: 订单详情扩展字符串（格式为 prepay_id=***）
• signType: 签名方式（通常为 MD5）
• paySign: 签名

4.2 用户确认支付

微信支付界面弹出，用户在微信支付界面确认支付。

5. 微信支付平台处理支付请求

微信支付平台处理用户的支付请求，并返回支付结果。

6. 微信支付平台通知商户服务器

支付成功后，微信支付平台会通过回调通知地址（notify_url）通知商户服务器支付结果。商户服务器需要验证通知的真实性，并更新订单状态。

7. 商户服务器返回处理结果

商户服务器处理完支付结果通知后，返回处理结果给微信支付平台。

8. 小程序更新支付状态

小程序根据支付结果更新支付状态，并向用户展示支付结果。

示例代码

以下是一个简单的示例代码，展示了小程序和商户服务器之间的交互：

小程序代码

wx.request({
  url: 'https://your-server.com/pay', // 商户服务器地址
  method: 'POST',
  data: {
    // 支付相关信息
  },
  success(res) {
    const paymentData = res.data;
    wx.requestPayment({
      timeStamp: paymentData.timeStamp,
      nonceStr: paymentData.nonceStr,
      package: paymentData.package,
      signType: paymentData.signType,
      paySign: paymentData.paySign,
      success(res) {
        console.log('支付成功', res);
      },
      fail(err) {
        console.log('支付失败', err);
      }
    });
  }
});

商户服务器代码（Node.js 示例）

const axios = require('axios');
const crypto = require('crypto');

app.post('/pay', async (req, res) => {
  const { body, total_fee, openid } = req.body;

  const params = {
    appid: 'your-appid',
    mch_id: 'your-mch_id',
    nonce_str: crypto.randomBytes(16).toString('hex'),
    body,
    out_trade_no: 'your-out-trade-no',
    total_fee,
    spbill_create_ip: req.ip,
    notify_url: 'https://your-server.com/notify',
    trade_type: 'JSAPI',
    openid
  };

  // 签名生成
  const stringSignTemp = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&') + '&key=your-key';
  params.sign = crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();

  // 调用微信支付统一下单接口
  const result = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', params, {
    headers: { 'Content-Type': 'application/xml' }
  });

  // 解析微信支付平台返回的结果
  const prepay_id = result.data.prepay_id;

  // 返回支付参数给小程序
  res.json({
    timeStamp: Math.floor(Date.now() / 1000).toString(),
    nonceStr: params.nonce_str,
    package: `prepay_id=${prepay_id}`,
    signType: 'MD5',
    paySign: crypto.createHash('md5').update(`appId=your-appid&nonceStr=${params.nonce_str}&package=prepay_id=${prepay_id}&signType=MD5&timeStamp=${Math.floor(Date.now() / 1000)}&key=your-key`).digest('hex').toUpperCase()
  });
});

总结

微信小程序支付流程涉及多个步骤和多个参与方的交互。理解每个步骤的细节和参与方的角色，对于成功实现微信小程序支付功能至关重要。希望以上详细的流程和示例代码能帮助你更好地理解和实现微信小程序支付功能。