reactjsreact-nativewebviewpayment-processingreact-native-webview

React Native: How do you get a Moneris transaction to return to app?


I'm processing a transaction with Moneris in my React Native app in a WebView. The URL in my WebView contains the credentials of my Hosted PayPage Configuration as URI parameters. When creating that configuration on the Moneris site, I need to provide the URL for the hosted paypage to redirect to once the transaction is complete. When I enter something like https://www.google.ca/ as the callback, it works fine, but I don't know what callback URL I'd need to enter to return to my app.

What I Want To Know:

What is the callback URL I'd need to use in order to return to a React Native app?


Solution

  • WebView is just a component inside your app, so you are never leaving your app. First, confirm that page is rendered in a WebView as opposed to launching browser as a separate app and opening a page there (in this case you can't go back to your app programmatically). Then, if you are actually using a WebView component, you could, for example, do the following: add NavigationState listener to your WebView, and read the url the WebView navigates to and take action accordingly

    class MyComponent extends React.Component{
    
      onNavigationStateChange = (navState) => {
        if (navState.url === 'https://www.yoursite.com') {
          // user just got redirected to requested site
          // do something in react-native app now, for example
          // close this component and show another one
        }
      }
    
      render(){
        return <View>
          <WebView
          ...
          onNavigationStateChange={this.onNavigationStateChange}
        />
        </View>
      }
    }