Web - Safari - Request money - Not redirected to paypal.me when clicking pay with paypal CTA

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

Prerequisite- Send a payment request to any account

1. Launch the URL and login
2. Click the Pay button
3. Verify that Pay with Paypal.me is visible as an option in the pay selector dropdown to select
4. Select Pay with PayPal.me to confirm

Expected Result:

Verify that you are redirected to Paypal.me and the handle is that of the user you owe and amount matches

Actual Result:

Not redirected to paypal.me and amount settled right away

Workaround:

Unknown

Platform:

Where is this issue occurring?

Web ✔️
iOS
Android
Desktop App
Mobile Web ✔️

Version Number: 1.0.69-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:
Issue occurs only in Mac Safari and iphone Safari
https://user-images.githubusercontent.com/43996225/122263277-3e4b1b00-cea4-11eb-950d-291efd9d1624.mp4

Recording.912.mp4

Upwork job post: Link

[MelvinBot]

Triggered auto assignment to @AndrewGable (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @marklouisdeshaun (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

Triggered auto assignment to @chiragsalian (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rushatgabhane]

Hi! After some digging, I understood what the problem is. Will need your input for the proposal.

The problem

Safari blocks any call to Linking.openURL() (or any way to open new tab)
made inside an async.

I think it's for blocking popups.

https://github.com/Expensify/Expensify.cash/blob/d9fb50e12efcd3bf74909d69accc2308b0f8e999/src/libs/actions/IOU.js#L215-L216

Proposal

Here is a workaround that I found to be working.

If browser is Safari, open a new empty tab using window.open() and store it's reference.
As shown here.
https://github.com/rushatgabhane/Expensify.cash/blob/1fff2aa967b88ec099e8df459e36945b302c28b0/src/libs/actions/IOU.js#L186-L189

On status 200, set the empty tab's url to paypal url.
https://github.com/rushatgabhane/Expensify.cash/blob/1fff2aa967b88ec099e8df459e36945b302c28b0/src/libs/actions/IOU.js#L211-L216

On error, close the empty tab.
https://github.com/rushatgabhane/Expensify.cash/blob/1fff2aa967b88ec099e8df459e36945b302c28b0/src/libs/actions/IOU.js#L221-L225

I tested this on iOS Safari, and it works.

I need help with detecting if the browser is Safari.

[chiragsalian]

Hmm, it's really weird that Linking.openURL is not working as expected on safari. If that's the case is there any chance you can investigate and fix this upstream in react-native-web. Then we wouldn't need a hacky fix in e.cash.

[rushatgabhane]

@chiragsalian It isn't an issue with Linking.openURL()
Safari blocks any popup opened in an async call.

More info here
https://expensify.slack.com/archives/C01GTK53T8Q/p1623955103415500?thread_ts=1623955103.415500&cid=C01GTK53T8Q

[chiragsalian]

Discussing on slack.