I am attempting to create a PayPal checkout order on my Vue site. I am currently passing two props to the component as well as two data objects

  props: {
    price: Number,
    shipping: Number,
  },
  data() {
    return {quantity: 1, switches: 'red'}
  },

I am referencing these four variables in my code as this.price, this.shipping etc. I have confirmed these are all valid

I am attempting to access these inside a method but this is being over-ridden and all four of these are undefined.

I still don't quite understand this, but I was under the impression that using an arrow function as I have done should stop this from changing. Is this not the case?

Code

   await paypal.Buttons({
      style: {
        layout: 'vertical',
        color: 'black',
        shape: 'pill',
      },
      createOrder: (data, actions) => {
        return actions.order.create({
          purchase_units: [{
            amount: {
              currency_code: "USD",
              value: ((this.price + this.shipping) * this.quantity).toString(),
              breakdown: {
                item_total: {  /* Required when including the `items` array */
                  currency_code: "USD",
                  value: this.price.toString()
                },
                shipping: {
                  currency_code: "USD",
                  value: this.shipping.toString()
                }
              }
            },
            items: [
              {
                name: "First Product Name", /* Shows within upper-right dropdown during payment approval */
                description: "Optional descriptive text..", /* Item details will also be in the completed paypal.com transaction view */
                unit_amount: {
                  currency_code: "USD",
                  value: this.price.toString()
                },
                quantity: this.quantity.toString
              },
            ]
          }]
        });
      },
    }).render('#paypal-button-container')