H5调用支付宝微信支付SDK的核心逻辑与实战

1. H5页面调用支付宝/微信SDK的核心逻辑

在移动端H5开发中，直接调用原生支付SDK本质上是通过URL Scheme或Universal Link实现的桥接技术。支付宝和微信都提供了成熟的H5与原生应用交互方案，但两者的技术实现路径存在明显差异：

• 支付宝：采用「alipays://」协议头触发应用唤醒，配合trade_no等订单参数完成支付闭环
• 微信：依赖「weixin://」协议头唤起，但必须通过JS-SDK的getBrandWCPayRequest方法进行安全校验

关键限制：iOS 9+系统对URL Scheme调用有严格限制，必须通过用户主动点击行为触发，否则会被系统拦截

2. 支付宝SDK接入实战

2.1 基础环境配置

需要先在支付宝开放平台完成：

1. 创建网页应用（需企业认证）
2. 获取APPID和RSA密钥对
3. 配置应用网关与回调地址

javascript复制// 前端支付请求示例
function callAlipay(tradeNo) {
  const url = `alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(
    `https://mclient.alipay.com/h5/pppay.htm?trade_no=${tradeNo}`
  )}`
  window.location.href = url
}

2.2 常见问题处理

• 唤醒失败：检查手机是否安装支付宝客户端，沙箱环境需使用专门测试包
• 参数错误：订单号必须与后台预下单时保持一致，时间戳误差需在15分钟内
• iOS限制：建议在按钮点击事件中触发调用，避免异步操作导致拦截

3. 微信支付接入方案

3.1 JS-SDK必要配置

javascript复制wx.config({
  debug: false,
  appId: '', // 公众号APPID
  timestamp: , // 精确到秒
  nonceStr: '',
  signature: '', // 后端计算
  jsApiList: ['chooseWXPay']
})

wx.ready(function(){
  document.getElementById('payBtn').addEventListener('click', function(){
    wx.chooseWXPay({
      timestamp: , // 支付签名时间戳
      nonceStr: '', // 随机字符串
      package: '', // 统一下单接口返回的prepay_id
      signType: '', // 签名方式
      paySign: '', // 支付签名
      success: function(res){}
    })
  })
})

3.2 微信浏览器特殊处理

在微信内置浏览器中，需要额外处理：

1. 通过WeixinJSBridge.invoke判断环境
2. 支付完成后自动跳转的URL需加入防重复处理
3. Android端可能需额外处理返回按钮事件

4. 跨平台兼容方案

4.1 环境检测逻辑

javascript复制function detectPlatform() {
  const ua = navigator.userAgent
  return {
    isWechat: /MicroMessenger/i.test(ua),
    isAlipay: /AlipayClient/i.test(ua),
    isIOS: /iPhone|iPad|iPod/i.test(ua)
  }
}

4.2 降级方案设计

1. 原生调用失败时自动跳转对应应用商店
2. 提供二维码支付作为备用方案
3. 超时机制控制（建议8秒超时）

5. 安全防护要点

1. 参数签名：所有订单参数必须后端签名，前端仅做传递
2. 频率控制：同一订单号5分钟内不得重复发起
3. 金额校验：前端展示金额需与后台预下单金额二次确认
4. 域名白名单：在支付平台后台严格配置授权域名

6. 调试技巧实录

• 支付宝沙箱：使用官方提供的沙箱工具包
• 微信调试：开启微信web开发者工具的「调试模式」
• 抓包分析：推荐使用Charles抓取H5与原生应用的协议交互

我在实际项目中总结的经验是：Android端更容易出现唤起失败，建议在页面加载时就预埋唤醒协议链接，但不要自动触发。支付完成后处理返回按钮事件时，iOS通常需要手动调用history.back()，而Android可能需要关闭当前WebView。