[Bug] Infinite loading screen on safari when setting up a subscription

[craigharvi3]

🐞 Describe the Bug

I'm getting an infinite loading spinner using the createSubscription action in the paypal buttons js sdk

[Error] TypeError: undefined is not an object (evaluating 'document.getElementsByClassName("captchaRefresh")[0].addEventListener')
	render (ngrlCaptcha.min.js:1:13456)
	(anonymous function) (ngrlCaptcha.min.js:1:17100)
	dispatchEvent
	notifyInterceptor (authchallenge.js:227)
	(anonymous function) (authchallenge.js:760)
	Global Code (authchallenge.js:762)
[Error] TypeError: "" cannot be parsed as a URL.
	getTargetOrigin (recaptcha_v3.html:67)
	sendMessageToParent (recaptcha_v3.html:117)
	(anonymous function) (recaptcha_v3.html:151)
[Error] Unable to post message to https://www.paypalobjects.com. Recipient has origin https://www.paypal.com.

[Error] TypeError: "" cannot be parsed as a URL.
	getTargetOrigin (recaptcha_v3.html:67)
	(anonymous function) (recaptcha_v3.html:168)
[Error] Unable to post message to https://www.paypalobjects.com. Recipient has origin https://www.paypal.com.

The error looks to only happen on iOS browsers and macOS safari. Chrome on macOS seems to work fine.

🔬 Minimal Reproduction

Include script in page:

<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=buttons&vault=true&intent=subscription"></script>

In react component, initialise button:

useEffect(() => {
    window.paypal
      .Buttons({
        style: BUTTONS_STYLE,
        createSubscription: (data, actions) => {
          return actions.subscription.create({
            plan_id: PLAN_ID
          });
        },
        onApprove: data => {
          if (data && data.subscriptionID) {
            // do something
          } else {
            // alert error
          }
        },
        onError(err) {
          // alert error
        }
      })
      .render(`#${elementId}`);
  });

On browsers mentioned above, error will occur.

😕 Actual Behavior

Please see screenshot attached above, with error messages provided

🤔 Expected Behavior

The paypal window should finish loading and show the correct payment screen for setting up a subscription.

🌍 Environment

• Node.js/npm: - v14.18.3 / 6.14.15
• OS: - MacOS / iPhone
• Browser: - Safari / iPhone Safair and iPhone Chrome

➕ Additional Context

Add any other context about the problem here.