Javascript 如何使用vue js将paypal集成到vue应用程序中？

我很难使用vue将paypal集成到我的网页中。我得到任何贝宝按钮。如果我在vue cli中使用相同的代码，则该代码正常工作，但当我在使用vue cdn的

index.html

中使用此代码时，则该代码无效。我需要它在

index.html

中工作，而不使用cli。有人能帮我吗

HTML代码

<div id="app">
        <payment-method></payment-method>
</div>

Vue js代码

<script>

// Define a new component called button-counter
Vue.component('payment-method', {
    template: '<div>'+
    '<div v-if="!paidFor">'+
    '<h1>Buy this Lamp - ${{ product.price }} OBO</h1>'+
    '<p>{{ product.description }}</p>'+
    '</div>'+
    '<div v-if="paidFor">'+
      '<h1>Noice, you bought a beautiful lamp!</h1>'+
    '</div>'+

 '<div ref="paypal"></div>'+
  '</div>',
    data: function() {
    return {
      loaded: false,
      paidFor: false,
      product: {
        price: 777.77,
        description: "leg lamp from that one movie",
        img: "./assets/lamp.jpg"
      }
    };
  },
  mounted: function() {
    const script = document.createElement("script");
    script.src ="https://www.paypal.com/sdk/js?client-id=client-id=YOUR-CLIENT-ID";
    script.addEventListener("load", this.setLoaded);
    document.body.appendChild(script);
  },
  methods: {
    setLoaded: function() {
      this.loaded = true;
      window.paypal
        .Buttons({
          createOrder: (data, actions) => {
            return actions.order.create({
              purchase_units: [
                {
                  description: this.product.description,
                  amount: {
                    currency_code: "USD",
                    value: this.product.price
                  }
                }
              ]
            });
          },
          onApprove: async (data, actions) => {
            const order = await actions.order.capture();
            this.paidFor = true;
            console.log(order);
          },
          onError: err => {
            console.log(err);
          }
        }).render(this.$refs.paypal);
    }
  }
  
})


var vue = new Vue({
    el: '#app',
    data: {
    }
})
</script>

//定义一个名为按钮计数器的新组件
Vue.组件（“付款方式”{
模板：“”+
''+
'购买此灯-${{product.price}}OBO'+
“{{product.description}}
”+
''+
''+
“诺伊斯，你买了一盏漂亮的灯！”+
''+
''+
'',
数据：函数（）{
返回{
加载：false，
对：错，
产品：{
价格：777.77，
描述：“一部电影中的脚灯”，
img:“./资产/lamp.jpg”
}
};
},
挂载：函数（）{
常量脚本=document.createElement（“脚本”）；
script.src=”https://www.paypal.com/sdk/js?client-id=客户id=您的客户id”；
script.addEventListener（“load”，this.setLoaded）；
document.body.appendChild（脚本）；
},
方法：{
setLoaded:function（）{
this.loaded=true；
贝宝
.按钮({
createOrder：（数据、操作）=>{
return actions.order.create({
购买单位：[
{
description:this.product.description，
金额：{
货币代码：“美元”，
价值：这个。产品。价格
}
}
]
});
},
onApprove:async（数据、操作）=>{
const order=wait actions.order.capture（）；
this.paidFor=true；
控制台日志（订单）；
},
onError:err=>{
控制台日志（err）；
}
}).render（此$refs.paypal）；
}
}
})
var vue=新的vue({
el:“#应用程序”，
数据：{
}
})

您应该能够像加载脚本一样加载paypal JavaScript，如

，然后在其下方加载

。这样您就可以摆脱组件中的挂载函数了，非常感谢。现在我明白了。我正在使用vue 1 cdn。。。。