支付宝内嵌H5支付成功后如何跳转到自定义页面或支付宝主页?
支付阿杰
结论
支付完成后的跳转应由承载 H5 的页面处理,不要依赖支付结果页上的「支付成功」按钮:
- 跳转到自定义页面:在支付 API 的回调中获取支付结果,再通过
location.replace()或location.href跳转。 - 返回支付宝主页:可以尝试打开支付宝首页 Scheme。如果只需要关闭当前 H5,也可以调用
AlipayJSBridge.call('exitApp')。 - 前端回调不能作为支付成功的最终依据。订单状态应以服务端异步通知或主动查询结果为准。
支付宝收银台的页面和按钮通常由支付宝客户端控制,商户无法直接修改按钮的点击行为。
跳转到自定义页面
如果页面通过 AlipayJSBridge.call('tradePay') 发起支付,可以在回调中处理结果:
<script>
function ready(callback) {
if (window.AlipayJSBridge) {
callback();
} else {
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
function startPay(tradeNo) {
ready(function () {
AlipayJSBridge.call(
'tradePay',
{
tradeNO: tradeNo
},
function (result) {
if (result.resultCode === '9000') {
// 前端结果仅表示客户端认为支付完成,
// 跳转后的页面仍应向服务端查询订单状态。
location.replace(
'/pay/result?orderNo=' +
encodeURIComponent('YOUR_ORDER_NO')
);
return;
}
if (result.resultCode === '8000') {
// 支付结果处理中,可跳转到订单查询页。
location.replace(
'/pay/result?orderNo=' +
encodeURIComponent('YOUR_ORDER_NO')
);
return;
}
if (result.resultCode === '6001') {
console.log('用户取消支付');
return;
}
console.log('支付未完成:', result);
}
);
});
}
</script>
建议使用 location.replace()。这样用户点击返回时不会再次进入支付发起页,可以降低重复提交订单的风险。
自定义结果页加载后,应向业务服务端查询订单状态:
async function loadPaymentResult(orderNo) {
const response = await fetch(
'/api/orders/' + encodeURIComponent(orderNo) + '/payment-status',
{
credentials: 'include'
}
);
const data = await response.json();
if (data.status === 'PAID') {
showPaymentSuccess();
} else if (data.status === 'PENDING') {
showPaymentPending();
} else {
showPaymentFailed();
}
}
返回支付宝主页
如果需要从 H5 打开支付宝主页,可以尝试使用支付宝客户端 Scheme:
location.href = 'alipays://platformapi/startapp?appId=20000001';
这种方式依赖支付宝客户端对 Scheme 和目标 appId 的支持,并非在所有客户端版本中都表现一致的 Web 标准能力。上线前应分别在目标支付宝版本以及 Android、iOS 真机环境中验证。
如果只需要退出当前内嵌 H5,可以调用:
function closeCurrentPage() {
if (window.AlipayJSBridge) {
AlipayJSBridge.call('exitApp');
}
}
exitApp 的实际落点取决于页面的打开方式、页面栈和支付宝客户端行为。它通常会关闭当前小程序或 H5 容器,但不一定会跳转到支付宝首页。
如果使用手机网站支付接口
使用 alipay.trade.wap.pay 时,可以在创建支付请求时配置同步返回地址 return_url。用户从支付宝收银台返回商户页面时,支付宝会尝试打开该地址。
需要注意:
return_url必须是公网可访问的完整 URL。- 不要仅根据
return_url携带的参数将订单标记为支付成功。 - 用户可能直接关闭收银台、不点击返回按钮,跳转过程也可能中断。
- 订单状态仍应以支付宝服务端异步通知的验签结果或服务端查单结果为准。
服务端确认支付状态
建议按以下流程处理:
- H5 发起支付。
- 收到支付回调后进入自定义结果页。
- 结果页请求商户服务端查询订单状态。
- 服务端根据已验签的支付宝异步通知,或调用支付宝订单查询接口确认结果。
- 确认交易成功后,再展示成功页面并交付业务权益。
前端收到 resultCode === '9000' 时,可以先显示「正在确认支付」,但不能只凭该值执行发货、充值或开通会员等操作。
注意事项
- 不要尝试修改支付宝收银台自带的「支付成功」按钮,该页面不属于商户 H5。
- 支付按钮需要防止重复点击,服务端创建订单接口也应保证幂等。
- 自定义跳转地址不要直接接受未经校验的外部 URL,以免形成开放重定向漏洞。
AlipayJSBridge只能在支付宝客户端提供的容器环境中使用,普通浏览器中可能不存在。- Scheme 跳转、
exitApp和页面栈的行为可能受客户端版本及打开入口影响,需要进行真机验证。 - 如果前端回调、异步通知与查单结果不一致,应以服务端验签后的可靠结果为准。
备注:内容仅供参考。
