如何使用 vuejs 显示 paypal 按钮？答案

【问题标题】：How to display the paypal button using vuejs?如何使用 vuejs 显示 paypal 按钮？
【发布时间】：2020-01-20 06:43:42
【问题描述】：

如何在 vuejs 中显示 paypal 的按钮？我已经在下面尝试了这些，它显示构建成功，但按钮没有显示。并且 bdw 输入字段显示，只有按钮没有。

这真的不可能发生吗，vuejs 中的 paypal？

<template>
    <div id="container">
        <input type="text" class="form-control">
        <div id="paypal-button"></div>
    </div>
</template>

<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script> 
    export default {
        mounted() {
            paypal.Button.render({
                env: 'sandbox',
                client: {
                    sandbox: 'ARQ-WKAkFn3g4C111Ud3lLaUAfzagvJ_pmkLKBVMASvv6nyjX3fv3j0gtBdJEDhRPznYP9sLtf9oiJfH',
                    production: 'EFNo9sAyqiOmnlRHsAdXiGBf6ULysEIfKUVsn58Pq6ilfGHVFn03iVvbWtfiht-irdJD_df1MECvmBC2'
                },

                locale: 'en_US',
                style: {
                    size: 'medium',
                    color: 'gold',
                    shape: 'pill',
                },

                commit: true,

                payment: function(data, actions) {
                    return actions.payment.create({
                        transactions: [{
                            amount: {
                                total: '11',
                                currency: 'USD'
                            }
                        }]
                    });
                },

                onAuthorize: function(data, actions) {
                    return actions.payment.execute().then(function() {
                        window.alert('Thank you for your purchase!');
                    });
                }
            }, '#paypal-button');

            console.log('notification mounted');
        }
    }
</script>

我的控制台出错：

ReferenceError: "paypal is not defined"

我还尝试了其他功能created() 和init()，但仍然没有显示。

【问题讨论】：

您的控制台有错误吗？
@Jerodev Error in mounted hook: "ReferenceError: paypal is not defined"
您导入一个脚本 (checkout.js)，它将在您的窗口对象上创建一个 paypal 对象/类。因此，如果您想访问它，只需执行window.paypal。（确保检查它是否之前定义过）

标签： laravel vue.js paypal

【解决方案1】：

显示这些ReferenceError: "paypal is not defined"是因为你没有导入paypal的js文件。

所以这是你的做法，首先安装 npm：

npm install --save-dev vue-plugin-load-script

并将这些代码添加到您的 app.js 中：

import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);

你现在可以导入paypal的js文件并执行paypal代码：

Vue.loadScript("https://www.paypalobjects.com/api/checkout.js").then(() => {
    mounted() {
        paypal.Button.render({
            env: 'sandbox',
            client: {
                sandbox: 'ARQ-WKAkFn3g4C111Ud3lLaUAfzagvJ_pmkLKBVMASvv6nyjX3fv3j0gtBdJEDhRPznYP9sLtf9oiJfH',
                production: 'EFNo9sAyqiOmnlRHsAdXiGBf6ULysEIfKUVsn58Pq6ilfGHVFn03iVvbWtfiht-irdJD_df1MECvmBC2'
            },

            locale: 'en_US',
            style: {
                size: 'medium',
                color: 'gold',
                shape: 'pill',
            },

            commit: true,

            payment: function(data, actions) {
                return actions.payment.create({
                    transactions: [{
                        amount: {
                            total: '11',
                            currency: 'USD'
                        }
                    }]
                });
            },

            onAuthorize: function(data, actions) {
                return actions.payment.execute().then(function() {
                    window.alert('Thank you for your purchase!');
                });
            }
        }, '#paypal-button');

        console.log('notification mounted');
    }
});

full documentation

【讨论】：

见@belvederef 答案

【解决方案2】：

在 2021 年，我建议在 https://github.com/paypal/paypal-js 看看他们新的官方 npm 包，所以你可以这样做：

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

<script>
import { loadScript } from '@paypal/paypal-js';

...
async mounted() {
  const paypalSdk = await loadScript({
    'client-id': 'YOUR_ID',
    currency: 'GBP',
  });
  paypalSdk.Buttons().render('#paypal-button-container');
}
</script>

【讨论】：

就是这样

【解决方案3】：

因为没有描述您的 paypal 变量。

使用this

安装

npm i vue-paypal-checkout

导入

import PayPal from 'vue-paypal-checkout'

现在PayPal 是你的变量，它被描述了

【讨论】：

静止按钮不显示，错误仍然显示Error in mounted hook: "ReferenceError: paypal is not defined"。感谢您的回复先生

【解决方案4】：

您也可以使用vue-head 它仅在您需要的组件或视图中加载脚本：

安装

npm install vue-head

全局配置 main.js

import VueHead from "vue-head";
Vue.use(VueHead);

然后在你的组件中调用它：

<template>
<paypalbutton :import="totalImport" />
</template>
<script>
name: "myComponent",
components: {
    paypalbutton,
  },
  data() {
    return {
      totalImport: "835"
    };
  },
  
  head: {
    script: [
      {
        type: "text/javascript",
        src: "https://www.paypalobjects.com/api/checkout.js",
      },
    ],
  },
</script>

paypal 按钮文件如下所示：

<template>
  <div id="paypal-button"></div>
</template>
<script>
export default {
  props: ["import"],

  mounted() {
    const totalImport = this.import;
    const ClientID =
      "WKAkFn3g4C111Ud3lLaUAfzagvJ_pmkLKBVMASvv6nyjX3fv3j0gtBdJEDhRPznYP9sLtf9oiJfH";
    paypal.Button.render(
      {
        env: "sandbox",
        client: {
          sandbox: ClientID,
        },

        locale: "en_US",
        style: {
          layout: "vertical",
          size: "responsive",
          color: "gold",
          shape: "pill",
          label: "pay",
        },

        commit: true,

        payment: function (data, actions) {
          return actions.payment.create({
            transactions: [
              {
                description: "My happy shipping",
                amount: {
                  total: totalImport,
                  currency: "USD",
                },
              },
            ],
          });
        },

        onAuthorize: function (data, actions) {
          return actions.payment.execute().then(function () {
            window.alert("Thank you for your purchase!");
          });
        },
      },
      "#paypal-button"
    );

    console.log("Paypal button loaded");
  },
};
</script>

【讨论】：