小白需要知道的移动端的微信/支付宝支付

移动端支付全流程解析

一、支付方式选择流程

移动端支付通常需要用户先选择支付方式（微信或支付宝），然后根据选择调用不同的支付接口。以下是典型实现方式：

// 支付方式选择示例
function selectPayment(method) {
  if (method === 'wechat') {
    startWechatPayment()
  } else if (method === 'alipay') {
    startAlipayPayment()
  }
}

二、微信支付唤起流程

1. 参数准备阶段

前端需要从后端获取以下核心参数：

• timeStamp：当前时间戳（秒级）
• nonceStr：随机字符串（32位以内）
• package：预支付交易会话标识（格式为prepay_id=xxx）
• signType：签名类型（通常为MD5或HMAC-SHA256）
• paySign：签名值（后端生成）

2. 支付唤起代码

// 微信小程序支付示例
wx.requestPayment({
  timeStamp: '1622455888',
  nonceStr: '5K8264ILTKCH16CQ2502SI8ZNMTM67VS',
  package: 'prepay_id=wx2017033010242291fcfe0db70013231072',
  signType: 'MD5',
  paySign: 'C380BEC2BFD727A4B6845133519F3AD6',
  success(res) {
    // 支付成功回调（不可靠，需后端验证）
  },
  fail(err) {
    // 支付失败处理
  }
})

3. 微信公众号JSAPI支付

function onBridgeReady() {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', 
    {
      "appId": "wx2421b1c4370ec43b",
      "timeStamp": "1395712654",
      "nonceStr": "e61463f8efa94090b1f366cccfbbb444",
      "package": "prepay_id=wx2017033010242291fcfe0db70013231072",
      "signType": "MD5",
      "paySign": "C380BEC2BFD727A4B6845133519F3AD6"
    },
    function(res) {
      if(res.err_msg == "get_brand_wcpay_request:ok") {
        // 支付成功处理
      }
    }
  )
}

三、支付宝支付唤起流程

1. 参数准备阶段

支付宝支付需要以下核心参数：

• tradeNO：支付宝交易号（从后端获取）
• orderInfo：订单信息（H5支付时使用）

2. 支付唤起代码

// 支付宝小程序支付示例
my.tradePay({
  tradeNO: '2025010122001288888888888888',
  success: (res) => {
    if(res.resultCode === '9000') {
      // 支付成功处理
    }
  }
}):ml-citation{ref="2" data="citationList"}

// 支付宝H5支付示例（需后端返回form表单）
const form = `
  <form id="alipay" action="https://openapi.alipay.com/gateway.do" method="POST">
    <input type="hidden" name="app_id" value="2021000123456789">
    <input type="hidden" name="method" value="alipay.trade.wap.pay">
    <input type="hidden" name="charset" value="utf-8">
    <input type="hidden" name="sign_type" value="RSA2">
    <input type="hidden" name="timestamp" value="2025-05-01 12:00:00">
    <input type="hidden" name="version" value="1.0">
    <input type="hidden" name="notify_url" value="https://yourdomain.com/notify">
    <input type="hidden" name="return_url" value="https://yourdomain.com/return">
    <input type="hidden" name="biz_content" value='{"out_trade_no":"2025010122001288888888888888","total_amount":"88.88","subject":"测试商品"}'>
    <input type="hidden" name="sign" value="generated_sign">
  </form>
`

四、支付结果判定机制

1. 前端即时回调（不可靠）

• 微信支付的success回调仅表示流程完成
• 支付宝的success回调需要检查resultCode

2. 后端异步通知（可靠）

• 微信/支付宝服务器会主动推送支付结果到商户配置的notify_url

• 包含关键参数：

  • 微信：transaction_id、out_trade_no、result_code
  • 支付宝：trade_no、out_trade_no、trade_status

3. 主动查询机制

// 支付完成后查询订单状态
function checkPaymentStatus(orderNo) {
  fetch('/api/checkPayment', {
    method: 'POST',
    body: JSON.stringify({ orderNo })
  })
  .then(res => res.json())
  .then(data => {
    if(data.status === 'SUCCESS') {
      // 确认支付成功
    }
  })
}

五、完整支付流程图解

1. 用户选择支付方式 → 
2. 前端调用后端接口获取支付参数 → 
3. 根据支付方式唤起对应支付界面 → 
4. 用户完成支付操作 → 
5. 支付平台异步通知商户服务器 → 
6. 前端轮询或接收推送确认最终支付结果