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

Answer 1

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.

2. 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
    }
  }
}

Answer 2

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>