Token is fetched on blur not when fields completed

[DLO33]

I've noticed for the card to retrieve the token, you must click off the card component (i.e. another field) and only then the call is made to stripe to get the token.

Is there a way you can do this so it does it on key-up? As this should be seamless to the users.
Or on the submit button can I make my own call to get the token rather than waiting for the card to do it?

[DLO33]

I was planning to use the okToSubmit Boolean however it's not updating when using backspace and only gets set the first time.

Is there a better way to achieve this?

<v-stripe-card
        ref="stripeCard"
        v-model="stripeData"
        :api-key="stripeKey"
        :customStyle="stripeStyle"
        :hidePostalCode="true"
        clearable
      ></v-stripe-card>

mounted() {
    this.$watch(
      () => this.$refs.stripeCard.okToSubmit,
      value => {
        this.$refs.stripeCard.processCard();
      }
    );
  }

[adamkdean]

This was really useful, thanks @DLO33. Unfortunately, I had an issue with the ref not being populated at time of mounting, but I was able to find a better way to do this is to using the focus and input events.

The focus event can only fire when the element has loaded, which means the ref will be populated. When this happens, we set a watch. Just be sure to only set one watch!

<v-stripe-card
  ref="stripeCard"
  v-model="cardSource"
  @focus="onFocus"
  @input="onProcessed"
  ...
></v-stripe-card>

onFocus: function () {
  if (!this.stripeCardInitialized) {
    this.stripeCardInitialized = true
    this.$watch(
      () => this.$refs.stripeCard.okToSubmit,
      value => { this.$refs.stripeCard.processCard() }
    )
  }
},
onProcessed: function () {
  console.log('cardSource', this.cardSource)
}

This is working perfectly now.