Cannot read property 'stripeTokenHandler' of undefined vuejs component

Question

I am building a payment form with vuejs, it included stripe js. This is my card elements:

            <!-- CARD form -->
            <label class="mt-5 font-20px"> Tarjeta </label>
            <div class="mt-4"> Número </div>
            <div class="row mt-2">
              <div class="col-md-12">
                <div id="card-number-element" class="form-control rounded-pill" placeholder="**** **** **** ****"> </div>
              </div>
            </div>

            <div class="row">
              <div class= "col-md-6 mt-3">
                <span> Nombre de la Tarjeta </span></br>
                <input type="input" id="card-name-element" class="form-control rounded-pill" placeholder ="Juan Pérez"> </input>
              </div>

              <div class= "col-md-3 col-6 mt-3">
                <span> Expiración </span></br>
                <div id="card-expiry-element" class="form-control rounded-pill" placeholder ="MM / YY"> </div>
              </div>

              <div class= "col-md-3 col-6 mt-3">
                <span> CCV </span></br>
                <div id="card-cvc-element" class="form-control rounded-pill" placeholder ="***"> </div>
              </div>
            </div>

            <div class="row mt-3">
              <div id="card-error text-danger"></div>
              <div id="card-success">
                Your Stripe token is <span class="token text-success"></span>
              </div>
            </div>

I initialized stripe elements in mounted function:

  initStripeElements(){
      cardNumberElement = elements.create('cardNumber', { placeholder: '**** **** **** ****', });
      cardNumberElement.mount('#card-number-element');

      var cardExpiryElement = elements.create('cardExpiry', { placeholder: 'MM / YY', });
      cardExpiryElement.mount('#card-expiry-element');

      var cardCvcElement = elements.create('cardCvc', { placeholder: '***', });
      cardCvcElement.mount('#card-cvc-element');            
    },

  mounted() {
    this.initStripeElements();
  }

Everything work fine and the stripe card token can be retrieved and returned. After that I invoke: this.stripeTokenHandler(result.token.id); to send token and data to server

    submitForm(e) {
      e.preventDefault();
      this.submitted = true;

      if (this.formInvalid()) {
        return;
      }
      var options = {
        name: document.getElementById('card-name-element').value,
      };

      stripe.createToken(cardNumberElement, options).then(function(result) {
        var successElement = document.querySelector('.card-success');
        var errorElement = document.querySelector('.card-error');

        if (result.token) {
          successElement.querySelector('.token').textContent = result.token.id;
          this.stripeTokenHandler(result.token.id);
        } else if (result.error) {
          errorElement.textContent = result.error.message;
        }

        console.log(this)
      });


      if (this.cardError) {
        return;     
      }
      // this.nextStep();
    },

This calling never work as it always show the error:

Finaliza.vue:415 Uncaught (in promise) TypeError: Cannot read property 'stripeTokenHandler' of undefined

Can you please help, what am I wrong here?

Answer 1

By somehow this variable is become undefined inside the stripe scope. So I can solve issue by saving this variable outside the stripe callback.

      var context = this;
      stripe.createToken(cardNumberElement, options).then(function(result) {
        var successElement = document.querySelector('.card-success');
        var errorElement = document.querySelector('.card-error');

        if (result.token) {
          successElement.querySelector('.token').textContent = result.token.id;
          context.stripeTokenHandler(result.token.id);
        } else if (result.error) {
          errorElement.textContent = result.error.message;
        }
      });