ReferenceError：当我使用 vuejs 设置 PayPal Checkout 时，未定义 paypal

Posted 2023-02-22

【中文标题】ReferenceError：当我使用 vuejs 设置 PayPal Checkout 时，未定义 paypal

【英文标题】：ReferenceError: paypal is not defined when i setup PayPal Checkout using vuejs

【发布时间】：2020-07-31 08:21:06

【问题描述】：

我有一个组件 PaypalButton.vue，当我按照以下说明实现按钮时：https://developer.paypal.com/docs/checkout/integrate/#

<template>
  <div>
    <div id="paypal-button-container"></div>
  </div>
</template>
    <script src="https://www.paypal.com/sdk/js?client-id=AZy2xQtNMcibA3BneS56WHoq1oqLhWdM7nsP3pwS02lr_1TOpC9Lnpp-IGbZQDS8K_xvMH5ssRmNPoDT" >
      // Required. Replace SB_CLIENT_ID with your sandbox client ID.
    </script>


<script>
import JQuery from 'jquery'
let $ = JQuery

var checkExist = setInterval(function() 
   if ($('#paypal-button-container').length) 
      console.log("Exists!");
      paypal
  .Buttons(
    createOrder: function(data, actions) 
      // This function sets up the details of the transaction, including the amount and line item details.
      return actions.order.create(
        purchase_units: [
          
            amount: 
              value: "0.01"
            
          
        ]
      );
    ,
    onApprove: function(data, actions) 
      // This function captures the funds from the transaction.
      return actions.order.capture().then(function(details) 
        // This function shows a transaction success message to your buyer.
        alert("Transaction completed by " + details.payer.name.given_name);
      );
    
  )
  .render("#paypal-button-container");
//This function displays Smart Payment Buttons on your web page.

      clearInterval(checkExist);
   
, 100); // check every 100ms


export default 
  data: () => (
    //
  )
;
</script>

我收到此错误..有人知道发生了什么吗？我试图在 index.html 中导入 paypal 脚本，但同样的事情发生了

【问题讨论】：

您使用的是实际的客户端 ID 吗？这不是秘密信息，因此您可以将其包含在您的帖子中，以便我们测试问题所在。如果您的代码在独立运行时可以正常工作，那么您的 vue 环境可能会阻止 PayPal 脚本正确加载，因此我们需要一种方法对其进行测试。

我更新了我的代码。我尝试实现一个函数，在执行脚本之前等待我的组件加载，这样我就可以解决另一个错误：文档已准备好，元素 #paypal-button-container 不存在。

对于 paypal 未定义的错误，我在 files..index 和 playbutton 组件中都添加了脚本

不知道它是否正确，但它有效，哈哈

对 vue 不太熟悉，但我认为索引是它需要的地方。我不确定您是否需要 checkExist 间隔，尽管它肯定会起作用。如果需要类似的东西，你可以试试$(document).ready(function(...

【参考方案1】：

在我的例子中，我遇到了类似的“'script' is not defined”问题。所以这是我出于类似目的使用脚本的解决方案。我希望它可以帮助某人。首先，我需要使用“窗口”范围。此外，如果您需要访问“onload”函数中的任何 Vue 元素，则需要为“this”实例创建一个新变量。

<template>
  <div>
    <h2>PayWay Payment</h2>
    <div id="payway-credit-card"></div>
    <br />
    <button id="pay" disabled>Add credit card</button>
  </div>
</template>
<script>
import  mapActions  from "vuex";
export default 
  name: "Payment",
  methods: 
    ...mapActions(["aVueAction"])
  ,
  created() 
    let paywayScript = document.createElement("script");
    let self = this;
    paywayScript.onload = () => 
      // call to Vuex action.
      self.aVueAction();
      // call to script function
      window.payway.aScriptFunction();
    ;
    // paywayScript.async = true;
    paywayScript.setAttribute(
      "src",
     "https://api.payway.com.au/rest/v1/payway.js"
    );
    document.body.appendChild(paywayScript);
  
;
</script>

我在 Vue 2.6 上使用过这个。