Paypal-checkout-components: Checkout button is not rendered in Safari webview

Created on 28 Mar 2018 · 10Comments · Source: paypal/paypal-checkout-components

Hi,
I'm integrating PayPal client-side express checkout using REST. the PayPal button doesn't render anymore inside a Safari WebView. Tested also with https://developer.paypal.com/demo/checkout/ and get the same issue.
screen shot 2018-03-28 at 6 03 14 pm

here is code,

<!DOCTYPE html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>

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

    <script>
        paypal.Button.render({

            env: 'sandbox', // sandbox | production

            // PayPal Client IDs - replace with your own
            // Create a PayPal app: https://developer.paypal.com/developer/applications/create
            client: {
                sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
                production: '<insert production client id>'
            },

            // Show the buyer a 'Pay Now' button in the checkout flow
            commit: true,

            // payment() is called when the button is clicked
            payment: function(data, actions) {

                // Make a call to the REST api to create the payment
                return actions.payment.create({
                    payment: {
                        transactions: [
                            {
                                amount: { total: '0.01', currency: 'USD' }
                            }
                        ]
                    }
                });
            },

            // onAuthorize() is called when the buyer approves the payment
            onAuthorize: function(data, actions) {

                // Make a call to the REST api to execute the payment
                return actions.payment.execute().then(function() {
                    window.alert('Payment Complete!');
                });
            }

        }, '#paypal-button-container');

    </script>

outdated

Source

Kaushik0704

Most helpful comment

Hi @bluepnume We are facing the same issue in iOS application, but its working fine on the Android. We can see the PAYPAL related objects are successfully loaded in the site by debugging the "PAYPAL" window object, but the button is not rendered. We have also loaded the https://developer.paypal.com/docs/checkout/ site in the webview and checked the button issue. The same issue persists in the PayPal developer site. Please see the attached screenshot for reference.

princelonappan07 on 1 Mar 2019

👍10 👀2

All 10 comments

Do you see the same problem in production mode?

bluepnume on 28 Mar 2018

@bluepnume I See the Same Problem in both. I'm tired to implement paypal pattern checkout but still issue in both in safari webview. can you help me please..?

Kaushik0704 on 29 Mar 2018

Hmm. Any specific settings you're using when you set up the webview? I haven't heard any other reports of the button failing to render in webviews, so it would be good to narrow down what's unique in your case.

bluepnume on 29 Mar 2018

No. I'm not using any specific settings. I'm just putting above code. but don't know why button rendering fail.

Kaushik0704 on 29 Mar 2018

@bluepnume Different thing is I'm using cordova HTML page. above code putting in my index page and run my application and I'm facing this issue

Kaushik0704 on 29 Mar 2018

Please see https://github.com/paypal/paypal-checkout/issues/420 -- cordova is not something we're explicitly supporting for this javascript integration, at this time.

bluepnume on 30 Mar 2018

😕3

@bluepnume Hello, This Code is working for Cordova android completely. But when i Putting this code for IOS i'm getting error. Please Help Meee...?

Kaushik0704 on 30 Mar 2018

@Kaushik0704 You solve this problem？