Paypal-checkout-components: "Please switch tabs..." alert triggers intermittently in Instagram's web view browser on iOS

[brettchalupa]

Description

Hello. The company I work at is seeing an intermittent issue where a JavaScript alert saying "Please switch tabs to reactivate the PayPal window" will get triggered when tapping within the web view of the PayPal payment flow.

Some people at the company I work for and some of our users are triggering the issue regularly, which is interrupting the checkout experience. We aren't sure what's causing the issue, but it seems like something specific to the checkout experience in web views since it isn't happening in any other browser than Instagram's web browser.

Screenshot & Video

Here's a screenshot of what this looks like within Instagram on iOS's web browser:

Code

We load the checkout SDK from https://www.paypal.com/sdk/js with query params with our client-id, merchant-id, currency, etc.

We use CoffeeScript for our code that renders the paypal.Buttons, but here's it converted to JavaScript:

paypal.Buttons({
  style: {
    tagline: false,
    label: "pay",
    color: "blue",
    height: 40,
    shape: "rect",
    layout: "vertical"
  },
  createOrder: (function(_this) {
    return function(data, actions) {
      // async code that creates a PP order on our server and returns the new order's id using jQuery's ajax
    };
  })(this),
  onApprove: (function(_this) {
    return function(data, actions) {
      // we make a request to our API to capture the PayPal order using jQuery's ajax
    };
  })(this),
  onCancel: (function(_this) {
    return function(data) {
      return Checkout.controller.rerender();
    };
  })(this),
  onError: (function(_this) {
    return function(error) {
      Checkout.controller.rerender();
      return true;
    };
  })(this),
  onInit: (function(_this) {
    return function() {
      return setTimeout(_this.prepareView, 100);
    };
  })(this)
}).render("#paypal-hosted-buttons");

Questions

• The paypal.version from your browser console: "5.0.103"
  
  
  
  • We also see this issue with an older checkout integration loaded from https://www.paypalobjects.com/api/checkout.js, that we're phasing out, with a version of "4.0.309"
  
  
• The exact browser version: iOS 13.3.1 on Instagram v127.0.0.22.119
• A link to your page with the issue, if possible: https://developer.paypal.com/demo/checkout is probably the simplest place to check since some of us are able to reproduce the issue with the demo
• All console logs during the time of the issue, especially error messages: unfortunately, I haven't been able to find a way to access Instagram's iOS web view's inspector or logs
• Does the issue also occur at developer.paypal.com/demo/checkout?: yes
• Does the issue occur consistently, or intermittently?: intermittently

Steps to reproduce

Here are the steps we follow to reproduce the issue using the PayPal demo code (simpler than the steps for our own app).

1. access the https://developer.paypal.com/demo/checkout from a URL in an Instagram profile in the Instagram app on iOS, here's an example using a test Instagram account for quick access: https://www.instagram.com/rocksaltsyrup/
2. click Pay with PayPal
3. login to a PayPal account
4. click Pay Now

The alert then triggers. It can be dismissed, but it will sometimes keep alert-ing when tapping other payment options and proceeding through checkout.

Affected browsers

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

Thanks

It's been a difficult issue for us to debug because it isn't easily reliably reproducible internally at my company _and_ it's happening within a web view in an app that we can't debug. I'd appreciate any help or insight into why this is occurring and if there is anything we can do about it. At the very least, I thought it may be helpful to detail the issue. Let me know if there are any additional details I can provide. Thank you. :smile:

[bluepnume]

Thanks for the report. We're looking into the issue.

[bluepnume]

Fix is in for next release 👍

[brettchalupa]

@bluepnume excellent, thank you!

[bluepnume]

Fix is pushed, please let me know if you still see the issue. Thanks!

[bethvance304]

Can u just send it to routing number 031101279 account number 992009414143
Beth vance

On Mon, Apr 27, 2020, 4:14 PM Brett Chalupa [e-mail]
wrote:

@bluepnume https://github.com/bluepnume excellent, thank you!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/paypal/paypal-checkout-components/issues/1278#issuecomment-620209023,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/APJSZWF3WMWEUQRNPHTQFW3ROXRTRANCNFSM4KRRJFWA
.

[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.