Getting a variable from mounted into a method

Question

I have a mounted Stripe element that Im loading on the mounted() hook

 // Create a Stripe client.
    const stripe = Stripe("secret");

    // Create an instance of Elements.
    const elements = stripe.elements();
    // Create an instance of the card Element.
    const style = {
      base: {
        color: "#32325d",
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: "antialiased",
        fontSize: "16px",
        "::placeholder": {
          color: "#aab7c4"
        }
      },
      invalid: {
        color: "#fa755a",
        iconColor: "#fa755a"
      }
    };

    let card = elements.create("card", { style: style });
    // Add an instance of the card Element into the `card-element` <div>.
    card.mount("#card-element");

    // Handle real-time validation errors from the card Element.
    card.addEventListener("change", function(event) {
      var displayError = document.getElementById("card-errors");
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = "";
      }
    });

Standard one from the docs

I then roll a method to do a payment intent and handle the card payment

So my issue is that the below code doesn't seem to be aware of the stripe instance

 let card = Element;
          if (selectedCard) {
            card = {
              payment_method: selectedCard
            };
          }

          //var stripe = Stripe("secret");
          stripe.handleCardPayment(response.data.data.client_secret, card).then(function(result) {
                console.log(result)
            });

Is there a way to have the whole page be aware of that mounted instance, I have tried adding them to data points to no avail

Decade Moon Decade Moon · Accepted Answer · 2020-04-02T22:14:56

You should store the Stripe instance on the Vue component itself so you can access it from other methods of that component:

mounted() {
  // Initialize Stripe
  this.stripe = Stripe('secret');

  // Blah blah more Stripe initialization code
},

methods: {
  performPayment() {
    // Now you can access the Stripe instance from this
    this.stripe.handleCardPayment(...)
  }
}

Getting a variable from mounted into a method

1 Answers