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

[rednalon]

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

[charliecruzan-stripe]

hey @rednalon , looking into this now. Definitely odd that this started happening without any changes from your side, I'm trying to figure out if there's anything that may have changed on our end to cause this

[charliecruzan-stripe]

Are you able to reproduce this locally with any of these 3ds test cards? (so far I haven't been able to)

[rednalon]

Hi Charlie, Good to know you're on it.

No, we have not been able to reproduce it yet on our own devices but will do some more testing soon.

[charliecruzan-stripe]

okay, good to know. If you can, email me ([email protected]) with your Stripe account ID

The actual error message is probably being swallowed somewhere, so looking at the Logs in your dashboard for some of the failed paymentIntents may be useful

[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.

[rednalon]

So, have updated the issue above after managing to narrow down the problem.

[littleski]

Any news on this. We have the exact same issue.

[charliecruzan-stripe]

@littleski are you also seeing the same behavior (it works when using a StackNavigator but not NativeStackNavigator)?

[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.

[charliecruzan-stripe]

I agree that the navigator likely has little to do with the issue, but I believe your issue is separate from the original.

It looks like this could be specifically for out-of-band challenge UIs. If you're experiencing this issue and would like to opt into our testing program, please email [email protected] with your account ID. Thanks!

[Djauron]

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.

any update ?