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

KEY

1384人浏览 · 2024-06-21 16:09:08

KEY · 2024-06-21 16:09:08 发布

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

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()
  });
});