javascript - 从 Vue 组件内的 URL 导入 PayPal(或任何其他脚本)

Question

我有一个名为 CallToAction 的组件，我想导入 PayPal，使用他们的按钮并使用脚本激活它，但我不确定如何从 Vue 组件内的 URL 正确导入脚本(我不想拥有它在每个页面上都是全局的，只在呈现 CallToAction 组件的页面上导入它。

我已经尝试了以下操作，但我无法从该脚本访问变量，即使我可以在 html 中看到它也是如此。

<template>
    <div class="paypal-button" id="paypal-plan-container"></div>
</template>

<script>
export default {
    mounted: function() {
        let paypalScript = document.createElement('script')
        paypalScript.setAttribute('src', 'https://www.paypal.com/sdk/js?client-id=sb&vault=true')
        document.head.appendChild(paypalScript)
        paypal.Buttons({
            createSubscription: function(data, actions) {
            return actions.subscription.create({
                'plan_id': 'sb'
            });
            },
            onApprove: function(data, actions) {
            alert(data.subscriptionID);
            }
        }).render('#paypal-plan-container');
    }
}
</script>

出现此错误ReferenceError: paypal is not defined

Answer 1

这是我使用的组件

<template>
  <div ref="paypal"></div>
</template>

<script>
export default {
  data() {
    return {
      order: {
        description: "Buy thing",
        amount: {
          currency_code: "USD",
          value: 1000
        }
      }
    };
  },
  mounted: function() {
    const script = document.createElement("script");
    const ClientID = "";
    script.src = `https://www.paypal.com/sdk/js?client-id=${ClientID}`;
    script.addEventListener("load", this.setLoaded);
    document.body.appendChild(script);
  },
  methods: {
    setLoaded: function() {
      window.paypal
        .Buttons({
          createOrder: (data, actions) => {
            return actions.order.create({
              purchase_units: [this.order]
            });
          },
          onApprove: async (data, actions) => {
            const order = await actions.order.capture();
            // ajax request
          },
          onError: err => {
            console.log(err);
          }
        })
        .render(this.$refs.paypal);
    }
  }
};
</script>