How to integrate paypal Payment Button Vuejs3 Composition API (setup function)

Question

I'm trying to integrate PayPal buttons with my Vuejs3 project using Composition API (setup ) but all what i get is errors i try to integrate it without using setup and its working fine i leave the working script down the esseu is i couldent pass data from data to methodes

<script>
import { inject, onMounted, ref } from "vue";
export default {
 
  data() {
    return {
      loaded: false,
      paidFor: false,
      product: {
        price: 15.22,
        description: "leg lamp from that one movie",
        img: "./assets/lamp.jpg",
      },
    };
  },
   setup() {
    const store = inject("store");
    console.log(store.state.prodects_in_cart);
    return { store };
  },methods:{
     setLoaded: function() {
      this.loaded = true;
     paypal_sdk
        .Buttons({
          createOrder: (data, actions) => {
            return actions.order.create({
              purchase_units: [
                {
                  description: this.product.description,
                  amount: {
                    currency_code: "USD",
                    value: this.product.price
                  }
                }
              ]
            });
          },
          onApprove: async (data, actions) => {
            const order = await actions.order.capture();
            this.data;
            this.paidFor = true;
            console.log(order);
          },
          onError: err => {
            console.log(err);
          }
        })
        .render(this.$refs.paypal);
    }
    
  },
  mounted: function() {
    const script = document.createElement("script");
     script.setAttribute('data-namespace',"paypal_sdk");
    script.src ="https://www.paypal.com/sdk/js?client-id=Here i pute my Client Id";
    script.addEventListener("load", this.setLoaded);
   
    document.body.appendChild(script);
  },
};
</script>

the error i get when i use setup() is The error image

my script using setup()

 setup() {
    const store = inject("store");
    const paypal = ref(null);
    let loaded = ref(false);
    let paidFor = ref(false);

    const product = {
      price: 15.22,
      description: "leg lamp from that one movie",
      img: "./assets/lamp.jpg",
    };

    onMounted: {
      const script = document.createElement("script");
      script.setAttribute("data-namespace", "paypal_sdk");
      script.src =
        "https://www.paypal.com/sdk/js?client-id=AXDJPmFjXpXm9HMXK4uZcW3l9XrCL36AxEeWBa4rhV2-xFcVYJrGKvNowY-xf2PitTSkStVNjabZaihe";
      script.addEventListener("load",  ()=>{
          loaded = true;
       console.log('hello adil');
      paypal_sdk
        .Buttons({
          createOrder: (data, actions) => { 
            return actions.order.create({
              purchase_units: [
                {
                  description: 'this is product description',
                  amount: {
                    currency_code: "USD",
                    value: 120.00,
                  },
                },
              ],
            });
          },
          onApprove: async (data, actions) => {
            const order = await actions.order.capture();
            this.data;
            this.paidFor = true;
            console.log(order);
          },
          onError: (err) => {
            console.log(err);
          },
        })
        .render(paypal);
      });
      document.body.appendChild(script);
    }
    return { store ,paypal};
  }

tony19 · Accepted Answer · 2021-04-25 23:14:12Z

1

paypal is a ref. You're currently passing to paypal_sdk the ref itself and not the inner value, which would be the template ref's element. To fix this, pass the ref's .value.
Your onMounted code is not properly invoked, as it must be passed a callback.

import { onMounted, ref }  from 'vue'

export default {
  setup() {
    const paypal = ref(null)

    onMounted(/* 2 */ () => {
      const script = document.createElement('script')
      //...
      script.addEventListener('load', () => {
        paypal_sdk
          .Buttons(/*...*/)
          .render(paypal.value) /* 1 */
      })
    })

    return {
      paypal
    }
  }
}

answered Apr 25, 2021 at 23:14

tony19

140k24 gold badges281 silver badges354 bronze badges

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

Comments

Eric Aya · Accepted Answer · 2022-04-19 13:52:56Z

0

The reason why you are getting that error is because you are using option Api onMounted life cycle hook, instead of doing that use the vue 3 life cycle hooks for onMounted.

First you will have to import it from vue like this.

<script>
import {onMounted} from 'vue'

then you are going to use it like this.
return it as a call back function

onMounted(() => {
    //all your code should placed inside here and it will work
})
</script>

edited Apr 19, 2022 at 13:52

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Apr 19, 2022 at 12:51

Emmy britt

1

Comments

Luis · Accepted Answer · 2022-08-24 14:09:44Z

0

Here is my answer using the paypal-js npm package

<template>
  <div ref="paypalBtn"></div>
</template>

<script>
import { onMounted, ref } from 'vue';
import { loadScript } from '@paypal/paypal-js';

const paypalBtn = ref(null);

onMounted(async () => {
  let paypal;

  try {
    paypal = await loadScript({
      'client-id': 'you_client_id_goes_here',
    });
  } catch (error) {
    console.error('failed to load the PayPal JS SDK script', error);
  }

  if (paypal) {
    try {
      await paypal.Buttons().render(paypalBtn.value);
    } catch (error) {
      console.error('failed to render the PayPal Buttons', error);
    }
  }
});
</script>

answered Aug 24, 2022 at 14:09

Luis

1,00110 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to integrate paypal Payment Button Vuejs3 Composition API (setup function)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related