- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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 PayPal button is displayed in the middle of the screen:
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:
There are 2 particular lines:
- 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
- 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?
<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¤cy=USD" target="_blank">https://www.paypal.com/sdk/js?client-id=sb&disable-card=amex,visa,mastercard¤cy=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>
Solved! Go to Solution.
- Labels:
-
Mobile SDKs
-
REST SDK
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
It has broken again.
This time WKWebView blocks a PayPal pop-up window:
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.