React Native Web端集成Stripe时出现hCaptcha 401未授权错误

问题详情 #

• 仅Web端出现异常：打开卡片输入模态框时，控制台抛出POST https://api.hcaptcha.com/authenticate 401 (Unauthorized)错误，响应内容为{"pass":false,"error-codes":["pat-missing-auth"]}
• 原生端无此问题，且支付流程可正常完成
• 升级Stripe相关SDK后触发该问题，回退旧版本也无法解决
• 未直接使用hCaptcha，该功能是Stripe内置的高级欺诈检测机制

SDK版本变更记录 #

"@stripe/react-stripe-js": "^1.10.0" --> "@stripe/react-stripe-js": "^2.7.0",
"@stripe/stripe-js": "^1.35.0" ---> "@stripe/stripe-js": "^3.3.0",
"@stripe/stripe-react-native": "~0.15.0" ---> "@stripe/stripe-react-native": "~0.35.1",

当前Stripe加载代码 #

import { loadStripe as loadStripeJs } from '@stripe/stripe-js/pure';

export const loadStripe = async (hotel: Hotel) => {
  const publicKey = __stripe_test_pk__;

  const stripeAccount = org.stripe?.accountId

  return loadStripeJs(publicKey, { stripeAccount });
};

解决方法 #

1. 检查Stripe账户欺诈检测配置 #

登录Stripe后台，进入「风险与合规」→「欺诈检测」页面：

• 确认高级欺诈检测功能的启用状态，若未启用，SDK升级后可能默认触发了hCaptcha请求导致权限不足，可尝试关闭Web端的自动欺诈检测规则
• 若使用了stripeAccount指定子账户，需确认子账户是否拥有欺诈检测功能的权限

2. 调整Stripe加载与Elements配置 #

• 在loadStripeJs中补充明确的配置参数，避免SDK自动触发未授权请求：

return loadStripeJs(publicKey, {
  stripeAccount,
  locale: 'zh' // 明确指定语言区域，减少自动检测逻辑
});

• 临时关闭Elements的欺诈检测功能（仅用于验证问题根源，生产环境谨慎使用）：

// 以CardElement为例
<CardElement
  options={{
    fraudDetection: false
  }}
/>

3. 排查环境与跨域配置 #

• 确认Web端的__stripe_test_pk__环境变量加载正确，公钥需匹配stripeAccount指定的子账户
• 检查Stripe后台「Webhook设置」中的域名允许列表，确保Web端域名已添加，避免跨域导致的权限验证失败

4. 联系Stripe官方支持 #

若以上方法无效，提交工单给Stripe支持团队，提供以下信息：

• 错误请求的完整日志（含请求头、公钥、子账户ID）
• 当前使用的所有Stripe SDK版本
• 问题仅出现在Web端的具体场景

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