react-paypal-js: [BUG]: The Venmo button that is supposed to be rendered as part of the PayPal SDK is not visible on iPhones when rendered inside of an iframe

Is there an existing issue for this?

• I have searched the existing issues.

🐞 Describe the Bug

There is an issue with the Venmo button that is part of the PayPal SDK is not rendering when viewed on an iPhone using Safari if the PayPal SDK is presented within an <iframe/>.

As part of our integration with the new PayPal API, we have added functionality for our clients to make payments using both PayPal and Venmo across our suite of products using the react-paypal-js library. However one of the issues that we have run into is that the Venmo button that is part of the PayPal SDK is not rendering as expected when the webpage with the Venmo button is viewed on iOS device that has the Venmo app installed using Safari. We have since spoken to contacts within PayPal who let us know that this is because our product renders the Venmo button inside of an <iframe/>. However, our product is a web application that enables non-profits to raise funds by allowing them to embed our donation form on their own websites. This means that the ability for the Venmo button to render within an <iframe/> on iOS devices is critical to our ability to accept payments using Venmo.

From what I can tell from the official Pay with Venmo documentation, in order for the Venmo button to be displayed by the PayPal SDK the following requirements must be met:

1. It must be used for a one time payment. (Not an ongoing/recurring transaction)
2. In order to see the Venmo button while on a mobile device:

• Users must have the Venmo app installed on their device.
• iOS users must use Safari as their browser.
• Android users must use Chrome as their browser.

1. The payment that is being made must be thorough a US merchant.
2. The user who is viewing the interface where the Venmo button is displayed must be located within the US.

I wanted to bring this up this as there is no mention here about restrictions related to the Venmo when it is rendered within an <iframe/>.

😕 Current Behavior

1. Use Safari to visit the following URL https://secure.qgiv.com/for/safnes on an iPhone that has Venmo installed.
2. Select a one time donation amount and scroll down to the bottom of the Choose Gift step.

Current Behaviour: At this point only the PayPal button is visible. Screenshot: https://d.pr/i/zALoiM

Note: If you visit the URL of the <iframe/> that is embedded on this page directly (https://secure.qgiv.com/for/safnes/embed) you will see that the Venmo button is now rendered. You can see the screenshot for what this looks like here: https://d.pr/i/xGKSwq

🤔 Expected Behavior

1. Use Safari to visit the following URL https://secure.qgiv.com/for/safnes on an iPhone that has Venmo installed.
2. Select a one time donation amount and scroll down to the bottom of the Choose Gift step.

Expected Behaviour: The PayPal and the Venmo buttons should be present. Screenshot: https://d.pr/i/xGKSwq (Taken when the <iframe/> is viewed directly)

🔬 Minimal Reproduction

1. Use Safari to visit the following URL https://secure.qgiv.com/for/safnes on an iPhone that has Venmo installed.
2. Select a one time donation amount and scroll down to the bottom of the Choose Gift step.

**Actual Behaviour: Only the PayPal button is visible.**

🌍 Environment

| Software         | Version(s)                   |
| ---------------- | -----------------------------|
| react-paypal-js  | ^7.8.1                       |
| Browser          | Safari 16.3.1. (Tied to iOS) |
| Operating System | iOS 16.3.1                   |

Relevant log output

No relevant logs were noted in the output of the device.

Code of Conduct

• I agree to follow this project’s Code of Conduct

➕ Anything else?

I think it is worth noting that up until this point we have found the “smart logic” that is responsible for whether or not the Venmo button appears to be extremely unreliable up until this point. There were a couple days last week when the Venmo button simply disappeared on the same webpage that I linked to up above in spite of the fact that the PayPal merchant account information had not changed and no code changes had been pushed to production (it was between pushes that we noticed that it disappeared before suddenly reappearing a couple days later) when viewed on the same browser using the same device in the same location. In addition to that we noticed that the button suddenly disappeared when we were experimenting with the onShippingChange handler that is part of the PayPal SDK in spite of the documentation never mentioning that implementing this handler will suddenly disable the Venmo button completely.

All of this has been extremely frustrating as we have clients who would love to make use of Venmo when processing payments, however we have been unable to give them accurate information on when & how they can expect the Venmo button display because of the general flakiness of the Venmo API.