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.

@Jerodev Error in mounted hook: "ReferenceError: paypal is not defined" — charles
– charles, Commented Sep 19, 2019 at 9:19
You import a script (checkout.js) which will create a paypal object/class on your window object. So if you want to access it simply do window.paypal. (Make sure you check if it's defined before) — tsnkff
– tsnkff, Commented Oct 8, 2019 at 15:42

belvederef · Accepted Answer · 2021-05-27 17:58:54Z

7

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>

answered May 27, 2021 at 17:58

belvederef

2,29321 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Collin Thomas Over a year ago

This is the way

NaturalDevCR Over a year ago

And where would you attatch the amount and items to the rendered button?

tempra · Accepted Answer · 2019-09-21 23:35:49Z

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

Avtandil Zenaishvili · Accepted Answer · 2019-09-19 09:50:06Z

0

because your paypal variable is not described.

use this

install

npm i vue-paypal-checkout

import

import PayPal from 'vue-paypal-checkout'

and now PayPal is your variable and it is described

answered Sep 19, 2019 at 9:50

Avtandil Zenaishvili

498 bronze badges

1 Comment

charles Over a year ago

still button does not showing, and error still display Error in mounted hook: "ReferenceError: paypal is not defined". Thanks for your reply Sir

Lariicsa · Accepted Answer · 2020-08-19 19:40:57Z

Also you can use vue-head it loads the script only in the component or view you need it:

install

npm install vue-head

Configure globally main.js

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

and then call it in your component:

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

The paypal button file looks like this:

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

Collectives™ on Stack Overflow

How to display the paypal button using vuejs?

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related