如何在 NuxtJs 中集成 PayPal 智能支付按钮？答案

【问题标题】：How to integrate PayPal Smart Payment buttons in NuxtJs?如何在 NuxtJs 中集成 PayPal 智能支付按钮？
【发布时间】：2021-07-14 12:15:30
【问题描述】：

我目前的工作解决方案。

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

<script>
export default {
  mounted: function () {
    const script = document.createElement("script");
    script.src = "https://www.paypal.com/sdk/js?client-id=SECRET";
    script.addEventListener("load", this.setLoaded);
    document.body.appendChild(script);
  },

  methods: {
    openPaymentAmountModal() {
      this.isPaymentAmountModalVisible = true;
    },
    closePaymentAmountModal() {
      this.isPaymentAmountModalVisible = false;
    },
    setLoaded: function () {
      window.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(this.$refs.paypal);
    }
  }
}
</script>

在模态中，我不得不再次加载脚本。

如何在组件或页面级别的 NuxtJs 应用程序中全局加载此 Paypal 脚本？

【问题讨论】：

标签： paypal nuxt.js

【解决方案1】：

我在我的项目中进行了相同的集成，并在我的页面中导入脚本：

head() {
    return {
        script: [{
            src: 'https://www.paypal.com/sdk/js?client-id=<CLIENT_ID>'
        }],
    }
},

然后将PayPal的.render()方法放到mounted()中。

【讨论】：

【解决方案2】：

您始终可以将脚本添加到头部，在 SPA index.htm 中 - 这意味着它始终可用，您无需等待加载。

这意味着您可以随时针对已知的 div 元素调用按钮创建。如果它在模态中，则同样适用，尽管您可能希望调整渲染目标。

【讨论】：

【解决方案3】：

您还可以将脚本放在 nuxt.config.js 中的脚本数组中，这样脚本就可以在您的应用程序中全局使用。像这样：

script: [
      {
        src: 'ttps://www.paypal.com/sdk/js?client-id=<CLIENT_ID>',
        async: true
      }
    ]

【讨论】：