问题

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-checkoutissues 发现问题多出自组件嵌套内.

综上找到了原因:因为组件嵌套,导致 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));
}

···
Logo

前往低代码交流专区

更多推荐