Issue redirecting to 3d-secure web view while using native stack navigation

Describe the bug When trying to process a payments requiring 3d-secure authentication we receive the following generic error:

{ 
  "stripeErrorCode": null, 
  "declineCode": null, 
  "localizedMessage": "There was an unexpected error -- try again in a few seconds", 
  "message": "There was an unexpected error -- try again in a few seconds", 
  "type": null, 
  "code": "Failed" 
}

if we nest our checkout screen like this:

<NativeStackNavigator>
    <ModalScreen>
        <NativeStackNavigator>
       	    <CheckoutScreen />
	</ NativeStackNavigator>
    </ ModalScreen>
</ NativeStackNavigator>

We managed to get 3d-secure authentication to work again by just changing the outer most native stack navigator to a normal stack navigator:

<StackNavigator>
    <ModalScreen>
	<NativeStackNavigator>
	    <CheckoutScreen />
	</ NativeStackNavigator>
    </ ModalScreen>
</ StackNavigator>

To Reproduce Steps to reproduce the behavior: Using the dependencies listed below and the project navigation structure above:

1. Successfully initialize payment sheet with customerId, customerEphemeralKeySecret and paymentIntentClientSecret
2. Successfully add payment option using the payment sheet
3. Attempt to confirm payment by calling confirmPaymentSheetPayment()

Expected behavior Calls to confirm payments requiring 3d-secure authentication should trigger the authentication flow within native stack navigation

Smartphone (please complete the following information):

• Device: any iPhone
• OS: iOS
• Version: seemingly any version of iOS

Additional context Dependencies: @react-navigation/native 6.0.8 @react-navigation/native-stack 6.5.0 @react-navigation/stack 6.1.1 @stripe/stripe-react-native 0.2.3 react-native-screens 3.10.2

[lbinscheck]

@rednalon We also had quite a few users reporting issues with the 3ds authentication. In our case many users experience the 3DS2 flow to be difficult to understand. The UI shows a big button that says “complete” once the 3ds2 sheet opens. And they click it right away. What they actually need to do is to authenticate the payment still, with an app or similar.

TLDR: Check if the paymentIntents use 3DS2 to authenticate the user.

[littleski]

We use createStackNavigator from @react-navigation. It would be quite painful to try to swtich to something else. I am not sure this is related to the navigator tho. 3d secure works for most banks, the issue is mainly that the “complete” button is often available for the user to click on it, BEFORE any validation has been performed via the bank app. Thus. If the user “click” on the complete button without having switch to his bank app to do the validation, the 3D secure payment failed. If the user first go to his bank app to validate, and then click complete, it works fine.