如何实现用户点击UPI支付按钮后自动跳转至指定页面？

核心思路 #

通过用户主动点击事件，同时触发UPI支付应用的唤起和页面跳转至支付状态查询页。关键是要避免浏览器的弹出/跳转拦截，确保操作由用户交互触发，并给UPI唤起预留足够时间。

代码实现 #

1. 基础HTML+JavaScript方案

<button id="upi-pay-btn">发起UPI支付</button>

<script>
document.getElementById('upi-pay-btn').addEventListener('click', function() {
  // 构造UPI支付链接（替换为你的商户参数）
  const upiPaymentUrl = 'upi://pay?pa=merchant@bank&pn=YourMerchantName&am=25.00&cu=INR&tn=Order#456_Payment';
  
  // 优先唤起UPI支付应用
  window.location.href = upiPaymentUrl;

  // 延迟跳转至支付状态查询页（避免覆盖UPI唤起请求）
  setTimeout(() => {
    window.location.href = '/payment-status?orderId=456';
  }, 500);
});
</script>

2. 简化的a标签方案

如果不需要复杂逻辑，也可以用a标签结合 onclick 事件实现：

<a href="/payment-status?orderId=456" onclick="window.location.href='upi://pay?pa=merchant@bank&am=25.00'; return true;">
  发起UPI支付
</a>

关键注意事项 #

• 必须绑定用户主动点击：浏览器会拦截非用户交互触发的自定义协议唤起和页面跳转，所有逻辑必须在click事件内执行。
• 调整延迟时间：setTimeout的延迟时间可根据设备和浏览器情况调整（300-1000ms均可），确保UPI应用有足够时间被唤起。
• UPI参数合规：upi://pay链接的参数必须符合UPI规范，核心参数包括：
  • pa：商户VPA地址（必填）
  • am：支付金额（必填）
  • pn：商户名称（必填）
  • cu：货币代码（默认INR）
  • tn：交易备注
• 兼容性降级：部分老设备或浏览器可能不支持upi://协议，可添加兜底逻辑：如果唤起失败，提示用户手动打开UPI应用并输入商户VPA。
• 状态页同步：支付状态查询页需通过订单ID与后端交互，实时获取支付结果，确保用户能看到最新状态。

内容的提问来源于stack exchange，提问作者h.op.e Store