从 Vue 组件内部的 URL 导入 PayPal（或任何其他脚本）

Posted 2023-02-22

【中文标题】从 Vue 组件内部的 URL 导入 PayPal（或任何其他脚本）

【英文标题】：Importing PayPal (or any other script) from URL inside component in Vue

【发布时间】：2020-03-20 04:43:53

【问题描述】：

我有一个名为 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

【问题讨论】：

您需要等待脚本加载

怎么样？我熟悉 javascript 中的异步操作，但找不到任何适合我的例子。

paypalScript.onload = function() ... do the paypal thing here ... - 我会把那一行放在之前 document.head.appendChild(paypalScript)

明天试试，看起来很有希望。

@Bravo 我使用了 Omar 的完整示例，但您是对的，它需要一些在脚本加载时触发的事件监听器。非常感谢！

【参考方案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>

【讨论】：

非常感谢！所以我错过了事件监听器并通过窗口访问贝宝变量。它现在完美无缺。

经过小的修改后它对我有用。 “addEventListener”需要一个回调，所以应该是：script.addEventListener("load", () => this.setLoaded );

【参考方案2】：

当脚本希望直接包含在页面中时，可能值得寻找一个 vue 包装器来处理通过 vue 组件加载它的问题。 this 是你需要的吗？

【讨论】：

我以前发现过这个，但它似乎没有订阅我已经在 PayPal 上创建的产品。