Question

如何在vuejs中显示Paypal按钮？我已经在下面尝试过这些，它显示 build successl ，但是按钮没有显示。 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：“未定义贝宝”

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

Answer 1

在 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>

Answer 2

它向您显示了这些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

Answer 3

因为未描述您的paypal变量。

使用this

安装

npm i vue-paypal-checkout

导入

import PayPal from 'vue-paypal-checkout'

现在PayPal是您的变量，它已得到描述

Answer 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>

如何使用Vue.js显示Paypal按钮？

4 个答案: