Why in the application on Vue when trying to pay for mob. device through Google Pay, an error occurs: Blocked a frame with origin?

Question

G Pay

The implementation of payment via Google Pay in Chrome on the desktop works fine, but when you try to pay via 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)
WV @ pay.js:223
kV @ pay.js:241
(anonymous) @ pay.js:255
kV @ pay.js:255
onGooglePaymentButtonClicked @ app.vue?1919:483

However, if you try the implementation example Google Pay payment on pure JS, then everything works fine.

Answer 1

https://developer.mozilla.org/en-US/docs/Web/HTTP/...