移动端WebView中Razorpay支付Authentication Failed问题求助

核心问题分析 #

部分移动端WebView用户触发Authentication Failed错误，且现有payment.failed事件无法捕获该场景，主要原因集中在WebView配置限制、SDK版本兼容、网络环境干扰三类。

具体解决步骤 #

1. 修复WebView安全与权限配置 #

• 开启第三方Cookie支持：Razorpay依赖会话Cookie完成认证，需在原生WebView设置中开启

  // Android 示例
  CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
  

  // iOS 示例
  webView.configuration.websiteDataStore = WKWebsiteDataStore.default()
  

• 确保JavaScript启用：WebView必须允许JS执行，否则Razorpay SDK无法正常初始化
• 放行Razorpay域名：检查WebView是否拦截了checkout.razorpay.com的HTTPS请求，避免证书校验或防火墙阻断

2. 升级Razorpay JS SDK #

当前使用的v1版本存在移动端WebView兼容缺陷，建议升级至最新稳定版，新版本优化了WebView环境下的认证逻辑，减少此类问题。

3. 扩展错误监听覆盖认证失败场景 #

由于payment.failed不触发初始化阶段的认证错误，可通过两种方式捕获：

• 全局JS错误监听：捕获页面级别的错误提示

  window.addEventListener('error', function(e) {
      if (e.message?.includes('Authentication Failed')) {
          alert('支付认证失败，请检查网络后重试');
      }
  });
  

• 尝试监听init.failed事件：部分Razorpay版本支持该事件捕获初始化错误

  rzp1.on('init.failed', function(response) {
      alert('支付初始化错误：' + (response.error?.description || '认证失败'));
  });
  

4. 用户侧临时排查方案 #

• 引导用户切换稳定网络，关闭代理/VPN
• 清除WebView缓存与Cookie后重新尝试

5. 终极兼容方案：改用原生SDK #

若WebView问题无法彻底解决，替换为Razorpay官方提供的Android/iOS原生SDK，原生集成的兼容性远高于WebView，可从根源避免此类问题。

修改后的代码示例 #

var options = {
    "key": "rzp_test_345345345",
    "amount": amount, // 2000 paise = INR 20
    "name": name,
    "description": description,
    "modal.backdropclose": false,
    "modal.escape": true,
    "handler": function(response) {
        $("div#contentContainer").show();
        var razorpay_payment_id = response.razorpay_payment_id;
        if (razorpay_payment_id != '') {
            alert(razorpay_payment_id);
        }
    },
    "prefill": {
        "email": 'test@gmail.com',
        "name": 'test',
        "contact": '8529631478'
    },
    "notes": {
        "order_id": "34343",
        "payment_type": "Test notes"
    },
    "theme": {
        "color": "#F37254"
    },
    "modal": {
        "ondismiss": function() {
            alert('Modal Closed');
        }
    }
};

// 全局监听认证失败错误
window.addEventListener('error', function(e) {
    if (e.message?.includes('Authentication Failed')) {
        alert('支付认证失败，请检查网络后重试');
    }
});

var rzp1 = new Razorpay(options);

// 监听初始化失败事件
rzp1.on('init.failed', function(response) {
    alert('支付初始化错误：' + (response.error?.description || '认证失败'));
});

rzp1.on('payment.failed', function (response){
    alert(response.error.description);
});

document.getElementById('pay_now').onclick = function(e) {
    rzp1.open();
    e.preventDefault();
}
$('#pay_now').trigger('click');

内容的提问来源于stack exchange，提问作者Vinay Kapoor