How to display the paypal button using vuejs?

Question

How can I show up the button of paypal in vuejs? I already tried these below, it shows build successfull but the button does not show up. And bdw the input field shows, only the button not.

Is this really impossible to happen, paypal in 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>

Error in my console:

ReferenceError: "paypal is not defined"

---

I also tried other functions created(), and init() but still doesn't show.

Answer 1

In 2021, I recommend having a look at their new official npm package at https://github.com/paypal/paypal-js, so you can do:

<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

It shows you these ReferenceError: "paypal is not defined" because you fail to import the js file of paypal.

So here's how you do it, first install npm:

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

And add these code inside your app.js:

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

Vue.use(LoadScript);

And you can now import the js file of paypal and execute the paypal codes:

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