H5网页现在还支持通过AlipayJSBridge调用支付吗?
支付阿杰
结论
可以调用,但有前提。AlipayJSBridge.call('tradePay', ...) 只能在支持支付宝 JSBridge 的容器中使用,通常是支付宝客户端的内置 WebView。普通手机浏览器、微信内置浏览器以及其他 App 的 WebView 无法直接通过该接口发起支付。
如果页面不在支付宝客户端内运行,应接入支付宝手机网站支付(WAP 支付)等对应产品。支付请求由服务端生成,页面再跳转到支付宝收银台,不应直接调用 AlipayJSBridge。
支付流程
在支付宝客户端内使用 tradePay,一般按以下流程处理:
- 服务端调用支付宝交易创建接口创建交易。
- 服务端将支付宝返回的交易号传给 H5 页面。
- H5 页面等待
AlipayJSBridge初始化完成。 - 调用
tradePay发起支付。 - 前端收到调用结果后,请求业务服务端查询订单状态。
- 服务端根据支付宝异步通知或主动查询结果,确认最终支付状态。
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 等普通浏览器中完成支付时,应使用手机网站支付流程:
- 浏览器向商户服务端提交订单。
- 商户服务端调用支付宝开放平台接口,生成支付表单或支付链接。
- 浏览器跳转到支付宝收银台。
- 用户完成支付后返回商户页面。
- 商户服务端通过异步通知或交易查询确认支付结果。
签名、应用私钥和支付宝公钥相关操作必须在服务端完成。不要把私钥、签名密钥或其他敏感配置写入 H5 页面。
注意事项
tradePay不是所有浏览器都能使用的通用 Web API。- 页面必须在支付宝客户端提供的受支持容器中运行,同时满足对应产品的签约、应用权限和域名配置要求。
- 不要通过伪造 User-Agent 来判断能否支付。应检查 JSBridge 是否就绪,并以接口的实际返回结果为准。
- 前端回调可能表示成功、失败、取消或未知状态,不能作为记账依据。
- 最终支付结果应由服务端结合支付宝异步通知或交易查询确认。服务端还需完成通知验签,并对重复通知进行幂等处理。
- 交易号应由可信的业务服务端下发。服务端还要校验订单归属、金额和当前状态。
- 不同支付宝产品或容器支持的参数可能存在差异。如果现有应用调用失败,应核对已签约产品的最新接入文档,不要只修改前端代码。
备注:内容仅供参考。
