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

Issue

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

Solution

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

Answered By - tony19

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)