CODEWITHSUNDEEP
javascriptiosiphonefacebookpaypal
Jamie Peters
Jamie Peters

Reputation: 1

Strange PayPal Express Checkout Issue only affecting users on iPhone/iPad using Facebook in-app browser

I've got a very strange issue with Paypal Express Checkout, its only an issue in certain conditons, otherwise it works perfectly fine.

Basically, if a user tries to purchase from our shop from an Apple mobile device (ipad or iphone) through Facebooks in-app browser and attempts to pay with Paypal (Other payment options are available) all they'll get is a blank white screen, and if they press the back button in the browser they go back to the product detail page, rather than the basket page they pressed the button on.

Unfortunately, our analytics show that at least 75% of our the monthly visitors to the entire website (Not just including the shop) use an iPhone or iPad, and probably at least 50%-60% of those are coming from Facebook.

The shop is custom built and I've got lots of logging set up to track the Paypal API calls, and the API calls are all running succesfully with no errors, and my logs show that the PayPal log in box should be appearing in the lightbox window, but it doesn't, when a user clicks the yellow 'Pay with Paypal' button through Facebook browser on an ipad/iphone it appears to open a new tab, but its just a blank page, and if I go to share the URL its just about:blank.

However, if a user uses the Safari app to purchase everything is fine, and everything is fine on Android devices, and on Windows computers and Apple computers.

I've spent the weekend trying to fix this issue, we even went out and bought an old second hand iPhone just to test on, rather than relying on friends, but I can't find anyone else with the same issue, or any way to fix it, as I said at the start, it works fine for everyone else except those on Apple and using Facebook's browser.

Below is the Javascript code that sets up the Paypal payment, pretty much all of it is from Paypal themselves from the examples in their Docs, and works in 90% of cases.

paypal.Button.render({

    env: 'production', 
    commit: true,

    payment: function (resolve, reject) {

        var CREATE_PAYMENT_URL = 'genPaypal.php';

        paypal.request.post(CREATE_PAYMENT_URL) 
            .then(function (data) {
                resolve(data.id);
            })
            .catch(function (err) {
                reject(err);
            });            
    },

    onAuthorize: function (data) {
        // code here is executed when the user logs in to paypal and authorizes the purchase.
    }

}, '#paypal-button');

The paypal.request.post(CREATE_PAYMENT_URL) line sends a request to my PHP file which generates the API call, and as previously mentioned, the logs show this running as expected.

When the call is complete the user should be shown the PayPal log in box in a lightbox window, but just a blank page is loading.

As I said, it is only an issue if certain conditions are met, but it is loosing us business, and our logs show that we've easily lost £100-£200 of sales due to this issue in just a couple of weeks.

Upvotes: 0

Views: 2094

Answers (1)

bluepnume
bluepnume

Reputation: 17128

Thanks for the very detailed report! We're aware of this issue -- it's to do with the fact that opening a popup window inside a web-view inside an app is not possible.

We have this issue to track this: https://github.com/paypal/paypal-checkout/issues/217 -- I'm hoping to get a fix out for this at some point this week.

For future issues, please feel free to raise github issues over at https://github.com/paypal/paypal-checkout/issues -- we're more likely to see them there.

Thanks again!

Upvotes: 0

Related Questions