Redirect existing website link to app expo react native

Question

I have an app that has some payment sandbox. I am using "expo-linking" Linking.openURL(sandboxURL) to open the unique payment link on a browser everytime user wants to buy the product.

If the payment is cancelled the sandbox redirects to "https://mywebsitedomain/payment/cancel" If the payment is successful the sandbox redirects to "https://mywebsitedomain/payment/successful"

What I want to achieve is I want to the browser to redirect to my app's payment cancel and payment successful page whenever "https://mywebsitedomain/payment/cancel" and "https://mywebsitedomain/payment/successful" links get triggered in the browser.

How do I do that? I got suggestions like using deeplinking. in such case I dont necessarily need to create any link, I just need the existing website link to be redirected to my app. In that case what would be the ideal configuration?

Thank you.

Answer 1

In this case I would recommend using WebView instead of Linking, because Linking doesn't really give you any kind of controls to the flow after user opens an URL in the browser, DeepLinking would theoretically work, but it would open the app from the splash screen and then you would have to navigate the user manually to the screen you want him to be, I don't think this is the proper solution though.. Instead I would suggest opening an URL in Webview and injecting the custom javascript code. In this way, you would keep the user in your app and maintain the control to the flow. react-native-webview which is deprecated module and should be added through package manager has onMessage and injectedJavaScript props, and using these could solve this issue. As an Example :

1. Create separate screen which contains only webview, stretched to the full screen.

2. Import the screen in your stacknavigator with appropriate name.

3. When navigating to it, pass webview props as navigation params.

Afterwards:

  const jsCode = `
   document.addEventListener("click", () => {
        window.ReactNativeWebView.postMessage(JSON.stringify({type: "click", message : "goBack"}))
    })`;


 const onMsg = (event) => {
    const res = JSON.parse(event.nativeEvent.data);
     if (res.message === "goBack") {
         navigation.goBack();
     }
}

             <WebView
                source={{ uri: params.uri, html: params?.html }}
                androidHardwareAccelerationDisabled
                javaScriptEnabled
                injectedJavaScript={jsCode}
                javaScriptCanOpenWindowsAutomatically
                collapsable
                onMessage={onMsg}
            />

this is an example code which closes the webview whenever the user clicks something in there, instead you could check window.location.href, post it as a message to your app and if it equals to https://mywebsitedomain/payment/cancel do something you want to do :)

UPDATE

as mentioned in the comments, for this concrete task webview offers onNavigationStateChange prop, which is meant to determine the navigation updates in the webview. This might be a better option, as some of the websites might not allow you to inject custom javascript code. But however, javascript injection is also possible and would also be one of the solutions here. As it's a bit hard for explaining here, I've set up an example app here, which uses both of the approaches described above: https://github.com/RocKer004/webview-example-app

App opens react native navigation docs, if you click on React Native Express (first option) it'll take you back and close the webview (this is handled using the onNavigationStateChange prop), if you click the last option there webview is also going to be closed, but this is handled by javscript injection this time. Otherwise, you're free to browse the web.

For more info, check : https://github.com/react-native-webview/react-native-webview