How to redirect to React Native Expo app from Webview after Stripe payment?

Question

I'm currently developing a mobile application using React Native Expo. In order to avoid detaching I'm using the Stripe client-only checkout page in a WebView.

My question is how do I redirect a successful/cancelled payment back to a specific screen in my application from the WebView?

The Green Tick of Approval is the standard way of indicating a question has been resolved for the asker; no need to add "[SOLVED]" or anything like that. You could have known because no other questions have that (unless they do; then it'll be removed). — Jongware

user1230795 user1230795 · Accepted Answer · 2020-04-20T23:31:57

I had a similar issue - if you know what the redirect url will look like ahead of time... This is what I did... so in my case lets call my url http://google.com

   render() {
      return (
      
       <WebView
         onNavigationStateChange={ 
             (e) => { 
               if(e.url == "https://www.google.com/") this.props.navigation.navigate("NewsFeed")
             }
          }
       source={{ uri: 'https://a-url-to-load' }} style={styles.WebView} />
      )
   };
  }

Of course you should extract that function out to do more complex stuff... etc

How to redirect to React Native Expo app from Webview after Stripe payment?

2 Answers