Как отобразить кнопку PayPal с помощью vuejs?

Question

Как я могу показать кнопку PayPal в Vuejs?Я уже попробовал это ниже, он показывает сборка успешна , но кнопка не появляется.И bdw поле ввода показывает, только кнопка не.

Это действительно невозможно, PayPal в vuejs?

<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 не определен»

---

Я также пробовал другие функции created() и init(), но все еще не показывает.

Answer 1

Это показывает вам ReferenceError: "paypal is not defined", потому что вы не можете импортировать js файл PayPal.

Итак, вот как вы это делаете, сначала установите npm:

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

И добавьте этот код в ваш app.js :

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

Vue.use(LoadScript);

И теперь вы можете импортировать JS-файл PayPal и выполнить коды 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');
    }
});

полная документация

Answer 2

потому что ваша переменная paypal не описана.

используйте this

install

npm i vue-paypal-checkout

import

import PayPal from 'vue-paypal-checkout'

и теперь PayPal - ваша переменная, и она описана