PAYATHON 2026

H5网页现在还支持通过AlipayJSBridge调用支付吗?

支付阿杰

结论

可以调用,但有前提。AlipayJSBridge.call('tradePay', ...) 只能在支持支付宝 JSBridge 的容器中使用,通常是支付宝客户端的内置 WebView。普通手机浏览器、微信内置浏览器以及其他 App 的 WebView 无法直接通过该接口发起支付。

如果页面不在支付宝客户端内运行,应接入支付宝手机网站支付(WAP 支付)等对应产品。支付请求由服务端生成,页面再跳转到支付宝收银台,不应直接调用 AlipayJSBridge。

支付流程

在支付宝客户端内使用 tradePay,一般按以下流程处理:

  1. 服务端调用支付宝交易创建接口创建交易。
  2. 服务端将支付宝返回的交易号传给 H5 页面。
  3. H5 页面等待 AlipayJSBridge 初始化完成。
  4. 调用 tradePay 发起支付。
  5. 前端收到调用结果后,请求业务服务端查询订单状态。
  6. 服务端根据支付宝异步通知或主动查询结果,确认最终支付状态。

tradeNO 应使用支付宝生成的交易号,不能直接用商户自己的订单号代替。具体采用哪个交易创建接口、需要传入哪些参数,取决于已经签约的支付产品,请以当前支付宝开放平台文档和应用权限为准。

调用示例

function ready(callback) {
  if (window.AlipayJSBridge) {
    callback();
  } else {
    document.addEventListener(
      'AlipayJSBridgeReady',
      callback,
      false
    );
  }
}

function pay(tradeNo) {
  if (!tradeNo) {
    throw new Error('tradeNo 不能为空');
  }

  ready(function () {
    AlipayJSBridge.call(
      'tradePay',
      {
        tradeNO: tradeNo
      },
      function (result) {
        console.log('tradePay result:', result);

        // 此处不要仅凭前端返回值确认订单支付成功。
        // 应请求业务服务端,由服务端查询并确认订单状态。
        queryOrderStatus();
      }
    );
  });
}

function queryOrderStatus() {
  fetch('/api/orders/current/status', {
    method: 'GET',
    credentials: 'include'
  })
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      console.log('server order status:', data);
    })
    .catch(function (error) {
      console.error('查询订单状态失败:', error);
    });
}

原示例缺少右括号和回调函数,完整的调用结构如下:

AlipayJSBridge.call(
  'tradePay',
  { tradeNO: tradeNo },
  function (result) {
    console.log(result);
  }
);

判断当前环境

调用前可以检查 JSBridge 是否存在。这个检查只能确认对象已经注入,不能说明当前应用具备支付权限。

function isAlipayBridgeAvailable() {
  return typeof window.AlipayJSBridge !== 'undefined';
}

不要只在页面加载时检查一次,因为此时 AlipayJSBridge 可能还没有完成初始化。更稳妥的做法是同时监听 AlipayJSBridgeReady 事件。

普通 H5 浏览器如何支付

页面需要在 Safari、Chrome 等普通浏览器中完成支付时,应使用手机网站支付流程:

  1. 浏览器向商户服务端提交订单。
  2. 商户服务端调用支付宝开放平台接口,生成支付表单或支付链接。
  3. 浏览器跳转到支付宝收银台。
  4. 用户完成支付后返回商户页面。
  5. 商户服务端通过异步通知或交易查询确认支付结果。

签名、应用私钥和支付宝公钥相关操作必须在服务端完成。不要把私钥、签名密钥或其他敏感配置写入 H5 页面。

注意事项

  • tradePay 不是所有浏览器都能使用的通用 Web API。
  • 页面必须在支付宝客户端提供的受支持容器中运行,同时满足对应产品的签约、应用权限和域名配置要求。
  • 不要通过伪造 User-Agent 来判断能否支付。应检查 JSBridge 是否就绪,并以接口的实际返回结果为准。
  • 前端回调可能表示成功、失败、取消或未知状态,不能作为记账依据。
  • 最终支付结果应由服务端结合支付宝异步通知或交易查询确认。服务端还需完成通知验签,并对重复通知进行幂等处理。
  • 交易号应由可信的业务服务端下发。服务端还要校验订单归属、金额和当前状态。
  • 不同支付宝产品或容器支持的参数可能存在差异。如果现有应用调用失败,应核对已签约产品的最新接入文档,不要只修改前端代码。

备注:内容仅供参考。