Flutter Integrate Paypal Buttons with WebView

Question

I am having a weird issue with my PayPal integration into webview_flutter. This seems to be something with WebView, as when I open this in iOS Safari or Chrome then it works fine.

My issue is that at a certain stage in the PayPal subscription process, (the last step to be precise), the PayPal window just keeps on "Processing".

First off, let me show my WebView piece:

    WebView(
      initialUrl: builtURL,
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
      },
      javascriptChannels: Set.from(
        [
          JavascriptChannel(
              name: 'OnApprove',
              onMessageReceived: (JavascriptMessage message) async {

              }),
          JavascriptChannel(
              name: 'OnSuccess',
              onMessageReceived: (JavascriptMessage message) {

              }),
          JavascriptChannel(
              name: 'OnCancel',
              onMessageReceived: (JavascriptMessage message) {

              }),
          JavascriptChannel(
              name: 'OnError',
              onMessageReceived: (JavascriptMessage message) {

              }),
        ],
      ),
    )

I use Javascript Channels to be able to call functions in my Dart code from JavaScript.

This is all working fine, and I can see my PayPal buttons, as indicated here:

I can also click (press) on them.

I can log in on Paypal, and all those steps are working fine.

That is wonderful, but let me show you what happens, in succession, after I press "Agree and Subscribe" (just this last step is behaving strange):

Is starts processing...

This is where it get's stuck on iOS (just saying...):

And on Android it proceeds to a blank screen:

Now, I can wait into infinity, and nothing will happen - it just stays on the respective screens per platform.

As mentioned earlier, if I open this in a browser on these devices, it does load fine and finishes off the PayPal processes properly, and returns to the main WebView screen.

Have anyone seen this before? Does it have anything to do with the "popup" that PayPal opens?

Something to note, is that if I press the "X" top-right to close the PayPal popup, it still fires the "onCancel" event - so it's not like it is stuck - perhaps it just failed to load the page or something...

Any help will be greatly appreciated!

Edit 1: I managed to debug the WebView in Safari and this is the error messages I am getting. These error messages makes sense. Especially the SAMEORIGIN issue. Perhaps that is why it fails most probably. Here is the output:

Does anyone perhaps know how to get around this with WebView? Thanks in advance!

Answer 1

So after many, many hours of googling and looking at alternatives, I got the idea to NOT use a WebView at all. Rather than using the webview_flutter plugin, which is limited in this case, I am now using url_launcher and uni_links.

I first call url_launcher to open a browser, with an HTML page that is hosted somewhere on our domains. This html page was built to show only from the mobile app.

With uni_links, when the component didChangeDependencies (of course after configuring the links in Info.plist and AndroidManifest.xml), I initialise them like this:

Future<Null> initUniLinks() async {
    _sub = getUriLinksStream().listen((Uri uri) async {
        //Do something with uri... for example...
        
        Map<String, String> queryParameters = uri.queryParameters;
        String action = queryParameters["action"];

        switch (action) {
            case "onSuccess":
                //Do something...
            break;
        });
}

So essentially what is happening, is I am opening a proper browser window. Then using normal HTML and Javascript, I still detect the PayPal onApprove() function etc. However, then the functions execute, I open the uni link, which results in opening the application where we left off.

This is a good alternative if WebView is giving you issues. Much more config, but it works just fine for my case.

I'm still open to any other proposals :) - even though I have moved on from this - will be interesting to find out more!