如何使用vuejs显示paypal按钮？

Question

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

我的控制台出错：

参考错误：“paypal 未定义”

---

我也尝试了其他功能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');
    }
});

完整的文档