解决 vue-paypal-checkout 导致 PayPal 按钮未正常显示

问题

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));
}

···