当我尝试使用 Google Pay 在移动设备上付款时，为什么我的 Vue 应用程序会出现错误：Blocked a frame with origin？

问题描述

在桌面版 Chrome 中通过 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

同时，如果您尝试在纯 JS 中实现 Google Pay 支付的示例，那么一切正常。

解决方法

你有你正在使用的代码示例吗？

我在 StackBlitz 上有一个示例 Vue 应用程序：https://stackblitz.com/edit/google-pay-vue

请注意，您需要点击在新窗口中打开链接，演示才能正常运行。

仅供参考，此代码示例使用 Google Pay 按钮网络组件：https://github.com/google-pay/google-pay-button/tree/main/src/button-element#example-usage-vue-website

google-pay javascript vue.js