Why does my Vue app get an error when I try to pay on a mobile device with Google Pay: Blocked a frame with origin?

Implementation of payment via Google Pay in Chrome on the desktop works fine, and when you try to pay via a smartphone, an error pops up (in the case of a smartphone, an additional modal window appears with a choice of a card):

vue.esm.js?a026:152 Uncaught (in promise) DOMException: Blocked a frame with origin "localhost:8080" from accessing a cross-origin frame.
at hasOwnProperty ()
at hasOwn (webpack-internal:///./node_modules/vue/dist/vue.es...)
at observe (webpack-internal:///./node_modules/vue/dist/vue.es...)
at Oc.reactiveSetter [as Ya] (webpack-internal:///./node_modules/vue/dist/vue.es...)
at Oc.show (https://pay.google.com/gp/p/js/pay.js:146:528)
at https://pay.google.com/gp/p/js/pay.js:223:374
hasOwn @ vue.esm.js?a026:152
observe @ vue.esm.js?a026:988
reactiveSetter @ vue.esm.js?a026:1063
Oc.show @ pay.js:146
(anonymous) @ pay.js:223
Promise.then (async)
W.V @ pay.js:223
k.V @ pay.js:241
(anonymous) @ pay.js:255
k.V @ pay.js:255
onGooglePaymentButtonClicked @ app.vue?1919:483

At the same time, if you try the example of implementing Google Pay payment in pure JS, then everything works out fine.

It is about accessing an iFrame from an origin that is not allowed to do so.

I recommend you to read Same-origin policy - Web security | MDN and maybe javascript - SecurityError: Blocked a frame with origin from accessing a cross-origin frame - Stack Overflow

At the same time, if you try the example of implementing Google Pay payment in pure JS, then everything works out fine.

Why?

@bombadile we are facing exactly the same issue vue.js-apple pay-smartphone, did you find any feasible solution?

Support of Google said that we used the wrong merchant. But we while didn’t check this solution.