SecurityError: Blocked Frame with origin ... from accessing a cross-origin frame

[mckhames]

What version of React are you using?

17.0.2

What version of Node.js are you using?

16.4.1

What browser are you using?

Safari

What operating system are you using?

iOS

How are you deploying your application?

Vercel / Next Start

Describe the Bug

Only on iOS does this error occur, but it is absolutely breaking my application. Upon sending the user to the payment form, on iOS (safari & duck-duck-go only, NOT chrome, oddly enough) the user receives the following client-side exception/error:

SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

Uncaught (in promise) DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
    at JSON.stringify (<anonymous>)
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:2545
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:2560
    at j (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:8923)
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:16494
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:2588
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:16116
    at X (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:16738)
    at Y (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:17187)
    at ee (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:17319)
  ERROR -----> at Module../node_modules/react-square-web-payments-sdk/dist/react-square-web-payments-sdk.esm.js (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:79342:85) 
    at Module.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:677:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:29:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:346:21)
    at Module../pages/test/pay2.js (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:77894:88)
    at Module.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:677:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:29:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:346:21)
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:111848:16
    at http://localhost:3000/_next/static/chunks/main.js?ts=1631819421155:10782:16```

### Expected Behavior

I expect the payment form to render as it does on the desktop. Instead, a client-side exception is received on iOS (v 14.7.1)

### To Reproduce

My repo is private as it is for a square client.