Format & Validate Credit Card Numbers In Vue.js - credit-card-validation

Install & Download:

# Yarn
$ yarn add vue-credit-card-validation
# NPM
$ npm install vue-credit-card-validation --save

Description:

A credit card validation plugin to format, mask, validate credit card number, expiration, CVC, card brand in your Vue.js app.

How to use it:

1. Install and import the credit-card-validation.

import VueCardFormat from 'vue-credit-card-validation';

2. Register the plugin.

Vue.use(VueCardFormat);
new Vue({
  el: '#app',
});

3. Format & validate credit card form fields using the v-cardformat directive as follows:

<form>
  <div class="number">
    <label>Number</label>
    <input v-cardformat:formatCardNumber>
  </div>
  <div class="expiration">
    <label>Expiry</label>
    <input v-cardformat:formatCardExpiry>
  </div>
  <div class="cvc">
    <label>Card CVC</label>
    <input v-cardformat:formatCardCVC>
  </div>
  <div class="restrictNumeric">
    <label>Numeric input</label>
    <input v-cardformat:restrictNumeric>
  </div>
  <button>Submit</button>
</form>