无法聚焦于3D安全认证条带reactjs中的输入字段

Question

 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>

查看文档，仅在 3d 安全身份验证问题发生时一切正常

Answer 1

错误报告：

我无法复制此问题，但设法通过将

disableAutoFocus

、

disableEnforceFocus

和

disableRestoreFocus

属性添加到包装支付元素并劫持焦点事件的材质 UI 对话框来解决该问题。

Answer 2

3DS认证页面由不同的发卡机构开发。我认为没有一种标准方法可以在对话框中聚焦特定的输入字段。

Answer 3

由某些框架阻塞引起的问题，但经过大量调试后我们也无法找到它所以我们使用自定义 iframe 来进行 otp 屏幕

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

    },
    {handleActions:false}

    );
    
 {otpEnable && <><iframe src={otpScreen} title="3d-secure"   
  style={{ width: "800px", height: "700px", border: " 0" }} 
  scrolling="no" /></>}

Answer 4

您发布的代码中存在

DialogContent

表明使用了 Material-UI 的 Dialog 组件。

对话框组件具有辅助功能，可将浏览器的焦点移至模式并添加事件侦听器以将其保持在那里：

这会阻止将焦点放在 Stripe 打开的覆盖 iframe 上。为了防止这种情况，请在包含

disableEnforceFocus

的组件上使用

Dialog

属性：