【微信支付】支付流程详解

微信小程序支付是一种便捷的支付方式，常用于电商、服务类小程序的交易场景。本文将详细解析小程序支付的核心流程，包括接口交互、业务逻辑以及注意事项，帮助开发者快速掌握小程序支付的开发要点。参考官方：小程序支付

一、小程序支付概述

1. 小程序支付的特点

微信小程序支付是基于微信支付体系的一种轻量化支付方案，具有以下特点：

• 便捷性：用户无需跳转微信外部，直接在小程序内完成支付。
• 安全性：支付过程通过微信支付系统保障交易安全。
• 灵活性：支持多种支付场景，如扫码支付、代金券支付等。

2. 小程序支付的应用场景

小程序支付广泛应用于以下场景：

• 电商平台：支持商品下单后的快速支付。
• 服务预订：如在线订餐、打车预约等。
• 数字商品：如虚拟会员、在线课 程购买。

---

二、小程序支付的时序流程

以下是微信官方提供的小程序支付时序图的核心解读：

1. 用户在小程序中选择商品并下单。
2. 小程序通过商户后台调用统一下单接口，向微信支付系统请求生成支付订单。
3. 微信支付系统返回订单数据，包括预支付交易会话标识（prepay_id）。
4. 商户后台再次签名订单数据并将其返回给小程序。
5. 小程序通过微信提供的支付API（wx.requestPayment）调起支付界面。
6. 用户完成支付，输入支付密码，确认支付。
7. 微信支付系统回调商户后台通知支付结果。
8. 商户后台处理通知，更新订单状态，必要时可主动查询支付结果。

---

三、小程序支付流程详解

1. 获取用户 openid

小程序支付的基础是用户的 openid，它是用户在商户小程序下的唯一标识。获取 openid 的过程如下：

wx.login({
  success: function(res) {
    if (res.code) {
      // 调用商户后端接口获取 openid
      wx.request({
        url: 'https://your-backend-server/get_openid',
        method: 'POST',
        data: {
          code: res.code
        },
        success: function(response) {
          console.log('openid:', response.data.openid);
        }
      });
    } else {
      console.log('登录失败！' + res.errMsg);
    }
  }
});

商户后台根据微信提供的登录凭证（code）调用小程序登录API，获取用户 openid，用于后续支付订单的生成。

---

2. 调用统一下单接口

商户后台通过调用微信支付的统一下单接口生成支付订单。接口请求示例如下：

{
  "appid": "wx8888888888888888",
  "mch_id": "1900000109",
  "nonce_str": "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
  "sign": "C380BEC2BFD727A4B6845133519F3AD6",
  "body": "商品描述",
  "out_trade_no": "1217752501201407033233368018",
  "total_fee": 1,
  "spbill_create_ip": "123.12.12.123",
  "notify_url": "https://your-backend-server/notify",
  "trade_type": "JSAPI",
  "openid": "wxd930ea5d5a258f4f"
}

关键参数说明：

• appid：小程序的AppID。
• mch_id：商户号。
• out_trade_no：商户订单号，需保持唯一性。
• total_fee：支付金额，单位为分。
• notify_url：支付结果通知地址。

成功调用后，微信支付系统返回预支付交易会话标识 prepay_id。

---

3. 再次签名并调起支付

商户后台对微信返回的数据进行再次签名，返回给小程序。小程序通过 wx.requestPayment 调起支付界面：

wx.requestPayment({
  timeStamp: '1414561699',
  nonceStr: '5K8264ILTKCH16CQ2502SI8ZNMTM67VS',
  package: 'prepay_id=wx201410272009395522657a690389285100',
  signType: 'MD5',
  paySign: 'C380BEC2BFD727A4B6845133519F3AD6',
  success: function(res) {
    console.log('支付成功');
  },
  fail: function(res) {
    console.log('支付失败', res.errMsg);
  }
});

---

4. 接收支付结果通知

支付完成后，微信通过商户配置的 notify_url 向商户后台发送支付结果通知。商户需要处理以下内容：

• 验证通知签名的正确性。
• 校验通知金额与订单金额是否一致。
• 更新订单状态，确保支付结果准确记录。

回调通知示例如下：

<xml>
  <return_code><![CDATA[SUCCESS]]></return_code>
  <appid><![CDATA[wx8888888888888888]]></appid>
  <mch_id><![CDATA[1900000109]]></mch_id>
  <nonce_str><![CDATA[5d2b6c2a8db53831f7eda20af46e531c]]></nonce_str>
  <sign><![CDATA[C380BEC2BFD727A4B6845133519F3AD6]]></sign>
  <result_code><![CDATA[SUCCESS]]></result_code>
  <openid><![CDATA[oUpF8uMEb4qRXf22hE3X68TekukE]]></openid>
  <out_trade_no><![CDATA[1217752501201407033233368018]]></out_trade_no>
  <total_fee>1</total_fee>
  <transaction_id><![CDATA[1217752501201407033233368018]]></transaction_id>
</xml>

商户需返回以下应答，告知微信通知已成功处理：

<xml>
  <return_code><![CDATA[SUCCESS]]></return_code>
  <return_msg><![CDATA[OK]]></return_msg>
</xml>

---

四、注意事项

1. 重复通知的处理

支付通知可能会多次发送，商户应确保处理逻辑具备幂等性。例如：

• 通过订单号 out_trade_no 检查订单是否已更新状态。
• 若订单状态已为成功，则直接返回应答。

2. 主动查询订单状态

在网络异常或未收到通知的情况下，商户可调用 查询订单API 主动确认订单状态，避免遗漏支付信息。

推荐：

• JavaScript
• react
• vue

---