Easy Credit Card Component For Vue.js

Install & Download:

# NPM
$ npm install @fracto/vue-credit-card --save

Description:

Just another credit card component that features input mask, card preview, multi-language, sensitive information hiding, etc.

How to use it:

1. Install and import the component.

import VueCreditCard from '@fracto/vue-credit-card';

2. Register the component.

Vue.use(VueCreditCard);
// or 
export default {
  components: {VueCreditCard}
}

3. Create a credit card form in the app template.

<vue-credit-card 
  :preview-enabled="true" 
  v-model="creditCardForm" 
  :card-types="myCustomCardTypes">
</vue-credit-card>

var app = new Vue({
    el: '#app',
    data: {
      myCustomCardTypes: [
        {regEx: /^4[0-9]{5}/ig, name: 'visa', icon: require('visa_icon.png')},
        {regEx: /^5[1-5][0-9]{4}/ig, name: 'mastercard', icon: require('master_icon.png')},
      ]
    },
});