Почему в приложении на Vue при попытке оплаты на моб. устройстве через Google Pay происходит ошибка: Blocked a frame with origin?

Question

[Bombadile]

Реализация оплаты через Google Pay в Хроме на десктопе отрабатывает нормально, а при попытке оплаты через смартфон выскакивает ошибка (в случае смарфтона появляется дополнительное модальное окно с выбором карты):

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

При этом если попробовать пример реализации оплаты Google Pay на чистом JS, то все отрабатывает нормально.

Answer 1

[Rsa97]

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

Comments

[Bombadile]

У меня не доходит даже до запроса на сервер.

[Rsa97]

Bombadile, Тогда, возможно, вы пытаетесь через JS обратиться к элементам внутри iframe, который загружен с другого домена. Такой доступ блокируется браузером.
https://javascript.info/cross-window-communication

[Bombadile]

Rsa97, передается калбэк, который должен выполниться после того как во фрэйме произодет оплата - в момент передачи калбэка происходит ошибка. На чистом JS без Vue этот калбэк не блокируется почему-то.