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!

Boiled

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!

Boiled

Can you please help me how can I integrate PayPal in the flutter, I have no idea about it or you can refer me to any tutorial. Thanks in advance – Boggess

I know there is no official SDK for flutter, in this case, how can I integrate Paypal? – Boggess

Hi @Toyed, I have not found a good enough tutorial yet, they all don't work as you would expect - hence why I asked the question myself here initially. I might be able to write a tutorial about this. In that case, I will post a link here in the comments or maybe as part of an update to my answer. However, for now, think of implementing webview_flutter - to go to a web page - and use uni_links to get some data passed and act accordingly (roughly indicated above) – Boiled

how are you detecting the paypal onApprove function? – Burnett

The Paypal button has a "onSuccess" function which you can use. When that JavaScript function gets executed, you do something like this: window.open("YOURHTTPSCHEME://example.com?action=onSuccess"); – Boiled

I have updated the dart code a bit to accommodate my previous comment – Boiled

Also @Burnett dont forget to DELETE the app from the phone/simulator, then let flutter install it again, fresh, for uni_links to work – Boiled

Answer 2

The request you are sending is comming from Origin null as stated by the logs. Meaning the origin of the request is coming from a local page, instead of a trusted origin that needs to be defined in your paypal account. Paypal's api should be implemented on a server that would serve this webpage you The endpoint on paypal does not accept that. Read more here: Paypal Access-Control-Allow-Origin

Entrammel

Thanks :). The errors are self-explanatory, as WebView, once it opens the Paypal Popup, does not show the same origin from were we opened it - I just wanted to find a workaround, and if possible, still use WebView - I got a workaround that works fine for me - check my answer if interested. – Boiled