React中Stripe 3D Secure认证时无法聚焦输入框问题

问题现象 #

• 3D Secure验证弹窗中的OTP输入框无法输入内容，已测试多张不同银行卡
• 已确认Stripe相关配置均符合官方文档要求

截图说明：显示3D Secure验证界面，OTP输入框无响应，无法输入字符

相关代码 #

支付确认逻辑 #

const payload = await stripe!.confirmCardPayment(clientSecret, {
    payment_method: {
        card: elements!.getElement(
            CardNumberElement
        ) as StripeCardNumberElement,
    },
});

组件嵌套结构 #

<DialogContent className='popup-check'>
    <Elements stripe={stripePromise}>
        <NFTCheckout
            {...props}
            setShowCountDown={setShowCountDown}
        />
    </Elements>
</DialogContent>

解决建议 #

1. 调整Elements组件层级：将<Elements>移到Dialog组件外部，避免弹窗的portal渲染或容器样式（如overflow: hidden、pointer-events）拦截3DS验证弹窗的输入事件。
2. 升级Stripe依赖：更新@stripe/react-stripe-js和@stripe/stripe-js到最新稳定版，旧版本可能存在3DS交互的兼容问题：

   npm update @stripe/react-stripe-js @stripe/stripe-js
   

3. 明确3DS请求配置：在支付确认时添加payment_method_options配置，强制触发标准3DS流程：

   const payload = await stripe!.confirmCardPayment(clientSecret, {
       payment_method: {
           card: elements!.getElement(CardNumberElement) as StripeCardNumberElement,
       },
       payment_method_options: {
           card: {
               request_three_d_secure: 'automatic'
           }
       }
   });
   

4. 排查弹窗样式冲突：检查popup-check类是否包含禁用输入的样式（如user-select: none、pointer-events: none），或调整z-index确保3DS弹窗处于最上层。
5. 测试浏览器兼容性：部分浏览器的隐私保护设置可能影响3DS弹窗交互，尝试在Chrome、Firefox等主流浏览器中验证，同时关闭浏览器的广告拦截或隐私插件。

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