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.

[chiragsalian]

So from slack it looks like we reached a resolution. @rushatgabhane, are you still interested in working on this task? 🙂

[rushatgabhane]

yeah, but I think someone else should work on this task because my wrapper doesn't work :(

anyway, really curious to see the implemetation!

[chiragsalian]

@marklouisdeshaun, for context I asked CarlosM if he could work on this issue. So mark could you remove this job posting from Upwork?

[marklouisdeshaun]

The posting has been removed.

[luacmartins]

Closing issue since PR has already been deployed to production.

[esh-g]

Hey @luacmartins,

I can repro on chrome with the latest staging version v1.2.70-1
I have made a bug report on slack, please see the video there:

https://expensify.slack.com/archives/C049HHMV9SM/p1676127541250869

[luacmartins]

@esh-g it seems like our QA team can't reproduce it. I'd suggest that we keep this discussion in Slack to see if more people come across this issue.