Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't redirect stripe 3DS to app on Expo file-based routing #1813

Open
damianoserpetta opened this issue Jan 22, 2025 · 0 comments
Open

Can't redirect stripe 3DS to app on Expo file-based routing #1813

damianoserpetta opened this issue Jan 22, 2025 · 0 comments

Comments

@damianoserpetta
Copy link

I've been searching for this type of issue for a long, I'm sorry if this issue has been already mentioned and I didn't find it.

Issue
When setting urlScheme and returnUrl on payment sheet and the event listener to handle deep links, the event listener doesn't handle correctly the url and Expo file-based router handles it navigating to the page.

The url scheme is set on app.json as described on the guide, and that's working fine.

What am I doing wrong?

Thanks!

Versions
react-native: 0.74.5
expo: 51.0.28
expo-router: 3.5.23
@stripe/stripe-react-native: 0.40.0

Code
Initialization:

initStripe({ publishableKey:'xxx', urlScheme: Constants.appOwnership === 'expo' ? Linking.createURL('/--/') : Linking.createURL('') })

Payment sheet init:

await initPaymentSheet({
      allowsDelayedPaymentMethods: true,
      merchantDisplayName: 'xxx',
      returnURL: Linking.createURL('stripe-redirect'),
      paymentIntentClientSecret: 'xxx'
    })

Hook to handle deep links: (tried in _layout.tsx expo entry point and directly on screen where the payment happens)

export function useDeepLinkHandler(): void {
  const { handleURLCallback } = useStripe()

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url)
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  )

  useEffect(() => {
    const getUrlAsync = async (): Promise<void> => {
      const initialUrl = await Linking.getInitialURL()
      await handleDeepLink(initialUrl)
    }

    void getUrlAsync()

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        void handleDeepLink(event.url)
      }
    )

    return () => { deepLinkListener.remove() }
  }, [handleDeepLink])
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant