Paypal-checkout-components: Can not go to chechout on mobile Safari (iOS 11.3)

[bormanEcwid]

Description

Merchants of our ecommerce platform complain to us that sometimes buyers can not go to paypal checkout when using iOS devices version 11.3

Please provide a short description of the issue here, along with:

• Screenshots or videos that show the issue

Screencast: https://drive.google.com/file/d/1_Ee6-834gXRmFSxMMCl5pjXHEv09-Rq-/view?usp=sharing

The paypal.version from your browser console

"4.0.187"

• The exact browser version

Mobile Safari on iOS 11.3 (15E217)

• A link to your page with the issue, if possible
• Does the issue also occur at developer.paypal.com/demo/checkout?

I copied code from https://developer.paypal.com/demo/checkout/#/pattern/client and pasted it to my sample: https://lamps.ecwid.com/~borman/paypal_safari.html

• Does the issue occur consistently, or intermittently?

consistently

Steps to reproduce

• open page https://lamps.ecwid.com/~borman/paypal_safari.html on mobile safari (iOS 11.3)
• tap on textbox
• tap on PayPal button - no reaction, PayPal checkout does not start
• if tap on button "Click me" and then tap on PayPal button, checkout will start

Affected browsers

• [ ] Chrome
• [ ] Safari
• [ ] Firefox
• [ ] Edge
• [ ] IE
• [ ] Chrome Mobile/Tablet
• [+] Safari Mobile/Tablet
• [ ] Web View / Safari ViewController
• [ ] Other

P.S. By the way if add onTouchStart-listener to "button div" into "Paypal button iframe" it will fix this issue.

var ppBtn = document.getElementsByClassName("paypal-button")[0];
ppBtn.addEventListener("touchstart", function(){});

But we can not use this WA since the iframe is loaded from your url

[bluepnume]

@khanghoang can you take a look into this? The fact that touchstart hack work makes me wonder if we need to do the same inside the button frame to listen for clicks, maybe.

[khanghoang]

@bluepnume that's interesting. I will take a look.

[khanghoang]

@bormanEcwid sorry, I couldn't reproduce this bug on both simulator or real device. I was using 4.0.195 to test.

Do you mind to test it again using the latest version of PayPal Checkout?

[bormanEcwid]

@khanghoang I still reproduce it. I was using 4.0.195 to test.
screencast: https://drive.google.com/file/d/1xecS7bf6YTdVSN6s7jIPxwCUSm0ZKSPx/view?usp=sharing
This bug reproduces only on Mobile Safari on iOS 11.3 - it is important.
On older version (< 11.3) I can not reproduce it

On real iPhone(iPhone 6 Plus, iOS 11.3(15E216) ) I also reproduce it:

• refresh page
• tap on textbox
• tap "Click me" button
• tap on texbox
• tap on PayPal button

[khanghoang]

@bormanEcwid thanks, ~I'm able to reproduce the bug now. We'll work on the fix for this.~

Even I managed to reproduce the issue a few times, it still seems like the issue doesn't occur consistently (at least on my mac). I will give it another shot. In the meantime, I will take a look at the touchstart event that you suggested.

[snelson]

We've had customers on our platform report a similar issue with PayPal buttons not working on iOS. After a day of debugging, we were able to reliably reproduce the issue on iOS 11.3 and 11.3.1.

paypal.version in these tests is 4.0.202

Example and steps to reproduce:

Note, this example page has an empty touchstart event handler defined.

• Visit http://scotty.is/tests/paypal3/index.html on iOS 11.3 or 11.3.1
• Fast tap the PayPal button, checkout should be triggered.
• Go back to http://scotty.is/tests/paypal3/index.html and refresh.
• Swipe to scroll to the bottom of the page so the button is off screen, then swipe back up so the button is on screen again.
• Fast tap the button, only a hover is triggered on the modal, PayPal checkout is not triggered.
• Long tap the button and PayPal checkout will be triggered.

Here’s a video that shows this in action: https://www.dropbox.com/s/0mbvgmv84lj5nq5/paypal-fasttap-issue.mov?dl=0

Example without the issue:

It seems that this issue only occurs when there are any touch event handlers defined on the same page as the PayPal button.

If there are no touch event handlers defined, the issue does not occur.
Here’s an example of that:

• Visit http://scotty.is/tests/paypal2/index.html on iOS 11.3 or 11.3.1
• Fast tap the PayPal button, checkout should be triggered.
• Go back to http://scotty.is/tests/paypal2/index.html and refresh.
• Swipe to scroll to the bottom of the page so the button is off screen, then swipe back up so the button is on screen again.
• Fast tap the button, checkout will be triggered.

And here’s a video without the issue: https://www.dropbox.com/s/mz5pgavezls98ay/paypal-without-fasttap-issue.mov?dl=0

Even though the steps to reproduce are a bit different, it seems like this is related to @bormanEcwid's original issue. I'd be happy to create a separate issue ticket though if you feel this is not related.

Thanks!
Scotty

[khanghoang]

@snelson thank you for spending all of your day trying to give us in details how to reproduce the bug, we really appreciate that.
I will test it on my end and update you guys here about this issue.

[khanghoang]

@snelson @bormanEcwid I created a PR for this issue and it's probably on production late this week or early next week. I'll update you again here once it's on live.

[snelson]

That's great news @khanghoang, thanks for the update!

[khanghoang]

@snelson it couldn't be done without you and @bormanEcwid. Thanks, guys.

[cmoiccool]

@khanghoang Did your PR go to production? I am still facing this issue with clients on iOS 11.3 and 11.4 in production.

[khanghoang]

@cmoiccool It's will be on production today or tomorrow. I'll keep you guys updated.

[khanghoang]

@bormanEcwid @cmoiccool @snelson the fix is on production just now. I just tested it and it worked well. It'd be great if you can help me double it again on your end. Thanks.

[snelson]

It appears to be fixed for me as well. I'll follow-up here if we see any further issues. Thanks for pushing this through @khanghoang, much appreciated.

[macfiss]

@khanghoang If the events are set to document.body (or window), after scrolling first tap is blocked on the button.

Note, this example page has an empty touchstart event handler defined.

• Visit http://scotty.is/tests/paypal3/index.html on iOS 11.3 or 11.3.1
• Fast tap the PayPal button, checkout should be triggered.
• Go back to http://scotty.is/tests/paypal3/index.html and refresh.
• Swipe to scroll to the bottom of the page so the button is off screen, then swipe back up so the button is on screen again.
• Fast tap the button, only a hover is triggered on the modal, PayPal checkout is not triggered.
• Long tap the button and PayPal checkout will be triggered.
  Here’s a video that shows this in action: https://www.dropbox.com/s/0mbvgmv84lj5nq5/paypal-fasttap-issue.mov?dl=0

The problem is relevant...

[tristanry]

Hello @snelson @khanghoang @bluepnume,

The issue still appears after a scrolling, see the following scenario:

Visit http://scotty.is/tests/paypal3/index.html on iOS 11.3 or 11.3.1
Fast tap the PayPal button, checkout should be triggered.
Go back to http://scotty.is/tests/paypal3/index.html and refresh.
Swipe to scroll to the bottom of the page so the button is off screen, then swipe back up so the button is on screen again.
Fast tap the button, only a hover is triggered on the modal, PayPal checkout is not triggered.
Long tap the button and PayPal checkout will be triggered.
Here’s a video that shows this in action: https://www.dropbox.com/s/0mbvgmv84lj5nq5/paypal-fasttap-issue.mov?dl=0

If the events are set to document.body (or window), after scrolling first tap is blocked on the button.

Can you please reopen this issue?
Thanks

[bluepnume]

@khanghoang can you take a look?

[khanghoang]

@MacFiss @tristanry hi guys, sorry for late reply. We've rolled back the fix for this issue since ios doesn't allow us to open the popup base on the touchstart event.

We consider this issue is the edge case so when it occurs, we're gonna display an alert to let the users know that they have to long press on the buttons (instead of tapping on it).

Does it make sense?

[macfiss]

Does it make sense?

@khanghoang not a very good proposal, the button should work the fast tap

[tristanry]

Hello @khanghoang,
Thank for your feedback,

I can see that the issue is still open, when do you plan to deploy your workaround?

As @MacFiss mentioned, is it possible to make it work with the fast tap event?
At the moment this issue is a blocker to deploy in production.

Thanks

[wasimkham]

Thought I'd just thank you guys for this post. I've been trying to figure out the exactly same problem for ages but with a project that I'm developing. Stumbled across this post and adding an empty touchstart event to the entire container inside the <iframe> solved it for me.

var container = document.getElementsById("wrapper");
container.addEventListener("touchstart", function(){});

So thanks!

[macfiss]

@wasimkham How you got the iframe contentWindow, if it is prohibited by paypal?

[wasimkham]

@MacFiss Sorry for the confusion, what I meant is that this was the solution for me for an unrelated project, not PayPal. I just wanted to say thanks!

[bluepnume]

@khanghoang would that ^ work for us? Listening for touchstart with a noop?

[tristanry]

Hello @khanghoang ,
What will be the better solution for that?
I don't understand how we can have it working with the fast tap event.
Thanks

[khanghoang]

@tristanry I follow the @wasimkham's suggestion above and it worked.

[gmcquistin]

I'm seeing this problem in production as well, exclusive to iOS 11. Is there an ETA for this bugfix?

[khanghoang]

@gmcquistin The issue was fixed 2 weeks ago. Are you sure they're the same issue?
Plus, I just tested on iOS 11.3 simulator and it worked fine.

[gmcquistin]

Thanks @khanghoang, I'm not sure if this is the same issue. Here is a screencast of the observed behaviour, it seems like the PayPal window opens then immediately closes

Thank you for your time & effort :)

[khanghoang]

@gmcquistin I took a look at your video file. It's a different issue, can you create another issue instead? Also, provide us the link to the page. Thanks.

[r0stig]

I just encountered the same issue and we're using the xcomponent library, since this library is also using xcomponent I was thinking if it's an idea to include this fix (hack?) in the xcomponent library? cc @bluepnume

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.