PayPal checkout button not working on iOS (WKWebView)

ivangoremykin
Contributor
Contributor
Hello,

I am adding PayPal checkout to an iOS app.
I know about native mobile SDKs but my customer wants it to be a web-view integration.
I follow this tutorial.

I create a WKWebView instance, add it to my view controller and set the HTML:
 

 

webView.loadHTMLString(htmlString, baseURL: nil)

 

The htmlString is loaded from a PayPal.html file stored on a disk. See its contents at the end of the post.

The PayPal button is displayed in the middle of the screen:
WKWebView.png
However when I tap on the button nothing happens.
It works on Safari and Chrome though.

If I open a simulator WKWebView log (Safari > Develop > Simulator > My PayPal HTML), I see several errors:
Console.png

There are 2 particular lines:
  1. Failed to load resource: the server responded with a status of 404 (Not Found): https://www.sandbox.paypal.com/smart/smart-payment-buttons.min.js.map
  2. XMLHttpRequest cannot load https://www.sandbox.paypal.com/xoplatform/logger/api/logger due to access control checks.

I guess some of JS code can't be loaded due to security concerns — may be the content security policy (CSP) rules.
I've seen this note regarding CSP but I don't understand what should I do.

 

Modify WKWebView configuration? Or a project configuration?

Or maybe my issues is not related to CSP?

 
Thanks.
 
PayPal.html:
 

 

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>PayPal</title>
    <style type='text/css'>
        html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;text-align: center;}
    </style>
    <script type="text/javascript">
        function onApprove() {
          // Swift interop
        }
    
        function onTransactionCompleted() {
          // Swift interop
        }
    </script>
</head>

<body>
<script src="<a href="https://www.paypal.com/sdk/js?client-id=sb&disable-card=amex,visa,mastercard&currency=USD" target="_blank">https://www.paypal.com/sdk/js?client-id=sb&disable-card=amex,visa,mastercard&currency=USD</a>">
</script>

<div id="paypal-button-container"></div>

<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [{
          amount: {
            value: '0.1'
          },
          invoice_id: 'INVOICE_ID'
        }]
      });
    },
    onApprove: function(data, actions) {
      onApprove();

      return actions.order.capture().then(function(details) {
        onTransactionCompleted();
      });
    }
  }).render('#paypal-button-container');
</script>
</body>
</html>

 

Login to Me Too
1 ACCEPTED SOLUTION

Accepted Solutions
Solved

ivangoremykin
Contributor
Contributor

I have found the solution myself.

Instead of loading HTML from a string (webView.loadHTMLString) load an HTML file directly from the disk (webView.loadFileURL), as described here.

View solution in original post

Login to Me Too
3 REPLIES 3
Solved

ivangoremykin
Contributor
Contributor

I have found the solution myself.

Instead of loading HTML from a string (webView.loadHTMLString) load an HTML file directly from the disk (webView.loadFileURL), as described here.

Login to Me Too

ivangoremykin
Contributor
Contributor

It has broken again.

This time WKWebView blocks a PayPal pop-up window:

pop up blocked.jpg

 

In order to fix this issue you need to handle popup/new window inside your web view.

 

Please, refer to the article "Handling Popup/New Window Inside Web View".

The Solution #2 "Adding subview" worked for me.

They also have a source code example.

Login to Me Too

rafalz
Contributor
Contributor

Hello @ivangoremykin ,

 

I have two questions.

 

Did you get any problem with currency? When I'm changing currency from default USD to any other then Checkout button not responding.

 

Second question is how are you catching in mobile app transaction result, how you know, that transaction pass correctly?

 

Thank you for any help.

Login to Me Too

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.