guastallaigor / vue-paycard

Credit card component made with Vue.js (works with Vue 2 & 3)
https://vue-paycard.netlify.app
MIT License
106 stars 23 forks source link

Get Card Type #26

Closed christianmls closed 3 years ago

christianmls commented 3 years ago

How can I get card type?

guastallaigor commented 3 years ago

You can get it using refs. See this example below:


<template>
  <div>
    <vue-paycard ref="card" :value-fields="valueFields" />
    <button @click="getCardType">Card Type</button>
  </div>

</template>

<script>
  export default {
    data: () => ({
      valueFields: {
        cardName: "",
        cardNumber: "4444 4444 4444 4444",
        cardMonth: "",
        cardYear: "",
        cardCvv: "",
      },
    }),
    methods: {
      getCardType() {
        console.log(this.$refs.card.cardType)
      }
    }
  };
</script>

That console.log will print visa once you clicked that button. Hope that helps.