Paypal API Question posted in
The official documentation to get you started can be found here.

Paypal api – How to display the paypal button using vuejs?

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.

Tags:

4

Answers


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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search