Unable to focus on input field in 3d secure authentication stripe 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>

Went through documentation everything is fine only at the time of 3d secure authentication the issue happening

Answer 1

Issue causing by some frame blocking but we are unable to find it after lot of debugging also So we used custom iframe for otp screen

  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" /></>}