如何集成paypal Payment Button Vuejs3 Composition API（设置函数）

Question

我正在尝试使用 Composition API（设置）将 PayPal 按钮与我的 Vuejs3 项目集成，但我得到的只是错误我尝试在不使用设置的情况下集成它并且它工作正常我离开了工作写下来结果是我无法将数据从数据传递到方法

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

我在使用 setup() 时遇到的错误是 The error image

我的脚本使用 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

paypal 是一个 ref。您当前传递给 paypal_sdk 的是 ref 本身，而不是内部值，后者将是模板引用的元素。要解决此问题，请传递 ref 的 .value.
您的 onMounted 代码未正确调用，因为它必须传递回调。

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

您收到该错误的原因是因为您正在使用选项 Api onMounted 生命周期挂钩，而不是使用 vue 3 生命周期挂钩 onMounted。

首先你必须像这样从 vue 导入它。

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

如何集成paypal Payment Button Vuejs3 Composition API（设置函数）

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

paypal

vue.js

vuejs3

vue-composition-api