解决 vue-paypal-checkout 导致 PayPal 按钮未正常显示
No handler found for post message: zoid_init from https://www.sandbox.paypal.com in http://localhost:9080/
问题
No handler found for post message: zoid_init from https://www.sandbox.paypal.com in http://localhost:9080/
以前在页面上使用 vue-paypal-checkout
封装后的 PayPal 是真方便,现在产品更新后,把 PayPal 按钮放到了弹窗内,就出问题了.
每次打开弹窗控制台都会报 No handler found for post message: zoid_init from https://www.sandbox.paypal.com in http://localhost:9080/
PayPal 按钮也没能正常显示出来.
stack overflow 上的大佬回答道,是 PayPal 脚本加载未完成前就显示了PayPal 按钮导致的,搜索 vue-paypal-checkout
的 issues 发现问题多出自组件嵌套内.
综上找到了原因:因为组件嵌套,导致 paypal 无法准确知道何时 dom 变化来获取 sdk ,在更改组件状态显示 PayPal 按钮时,PayPal 的 sdk 脚本还未完成加载,导致报错。
解决
找到了原因就方便解决问题了,既然不知道何时加载 PayPal 的 sdk ,那就直接在 HTML 上加载呗,使用原生 PayPal sdk 自己封装,简单粗暴,问题解决,撒花。
开个玩笑,都使用 vue-paypal-checkout
了还不是想 偷懒 提高效率嘛!
既然知道是因为 dom 变化引发的问题,那就在 dom 变化上解决问题,手动控制 PayPal 按钮的显示:
<template>
<paypal v-if="paypalBtnShow"></paypal>
</template>
···
data(){
return{
paypalBtnShow: false
}
}
mounted(){
this.$nextTick(() => (this.paypalBtnShow = true));
}
···
更多推荐
所有评论(0)