时间戳

首页 > 解决方案 > 如何使用 Vue.js 类组件设置 PayPal 智能按钮

javascript - 如何使用 Vue.js 类组件设置 PayPal 智能按钮

问题描述

我正在尝试将 PayPal 按钮添加到现有的结帐页面。但是，我遇到了很多麻烦，因为我们的项目使用了 Vue.js 类组件，而我遇到的示例却没有（官方 PayPal 文档不使用类组件：https://developer.paypal .com/docs/business/checkout/configure-payments/single-page-app/）。

我遇到了使用mounted()钩子将 PayPal SDK 脚本注入 DOM 的解决方法，并且在使按钮出现方面取得了成功，但存在无法使付款详细信息动态化的问题（订单信息如总金额、项目描述等都存储在 Vue 组件的状态中，我还没有找到一种方法将该状态传递给 DOM 中的静态 JS 脚本）。

我目前正在尝试调整官方 PayPal 文档以使用类组件，我的代码如下（去掉了与 PayPal 无关的部分）：

索引.html：

<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
    <head>
        <script defer src="https://www.paypal.com/sdk/js?client-id=abc123&disable-funding=credit,card"></script>
    </head>
    <body>
        <div id="app">
        <!-- The shop component is put inside here -->
        </div>
    </body>
</html>

商店.vue：

<template>
    <paypal-buttons :on-approve="onApprove" :create-order="createOrder" />
</template>
<script lang="ts" src="./shop.component.ts"></script>

shop.component.ts：

const PayPalButton = paypal.Buttons.driver("vue", window.Vue);

@Component({
  components: {
    PayPalButton,
  },
})
export default class Shop extends Vue {

  public total = '10.0'; // Will be dynamic

  public mounted(): void {
    ...
  }

  public createOrder(data, actions) {
    return actions.order.create({
        purchase_units : [{
            amount: {
              value: total
            }
        }]
    });
  }
  public onApprove(data, actions) {
    return actions.order.capture().then(function (details) {
        console.log(details)
    })
  }
}

此代码将成功构建，但由于出现错误，我无法实际打开页面。在浏览器控制台中，我看到以下错误：

TypeError：无法读取未定义的属性“组件”

经过进一步调试，我发现该行paypal.Buttons.driver("vue", window.Vue);导致错误，这是因为paypal未定义。我相当肯定 index.html 中的 PayPal 脚本已正确加载，而且我也不认为这是由于缺少 npm 包或导入。我在网上找到的少数资源之一是：Vue PayPal implementation with vue-head, paypal not defined

不幸的是，这个链接的解决方案使用了mounted()钩子，这是我之前尝试过的，它不能解决提供我想要的动态总数的问题。

有人有使用 PayPal SDK 和 Vue.js 类组件的经验吗？任何帮助将不胜感激！

标签： javascriptvue.jspaypalvue-class-components

解决方案

经过更多测试，我得出了这个结论：显然，即使您使用挂钩将 SDK 脚本注入 DOM ，也可以将动态订单发送到 PayPal。mounted()事实证明，当我第一次尝试这样做时，我对 Vue 类组件的理解存在缺陷，因此错误地引用了组件状态。

<script>在我的最终代码中，我从 index.html 中取出了 PayPal SDK标记。我来自其他 2 个文件的代码修改如下：

商店.vue：

<template>
    <div id="paypal-button"></div>
</template>
<script lang="ts" src="./shop.component.ts"></script>

shop.component.ts：

export default class Shop extends Vue {

  public total = '10.0'; // Will be dynamic

  public mounted(): void {
    const script = document.createElement('script');
    const clientId = 'abc123';
    script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&disable-funding=credit,card`;
    script.addEventListener('load', this.paypalSetLoaded);
    document.body.appendChild(script);
  }

  public paypalSetLoaded() {
    window.paypal
      .Buttons({
        style: {
          color: 'blue',
          shape: 'pill',
        },
        createOrder: this.paypalCreateOrder,
        onApprove: this.paypalOnApprove,
      })
      .render('#paypal-button');
  }

  public paypalCreateOrder(data, actions) {
    return actions.order.create({
      purchase_units: [{
        amount: {
          currency_code: 'USD',
          value: this.total,
        }
      }],
    });
  }

  public paypalOnApprove(data, actions) {
    return actions.order.capture().then(details => {
      console.log(details);
    });
  }
}

即使total在程序执行期间价值发生变化（由于用户交互），正确金额的订单将始终发送到 PayPal。

我不确定这是否是最佳实践，但代码有效并且基于我可以预见的既高效又可扩展。希望这可以帮助遇到类似问题的其他人

推荐阅读