Easy Credit Card Component For Vue.js

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')},
      ]
    },
});

Preview:

Easy Credit Card Component For Vue.js

Download Details:

Author: fracto-team

Live Demo: https://github.com/fracto-team/vue-credit-card

Download Link: https://github.com/fracto-team/vue-credit-card/archive/master.zip

Official Website: https://github.com/fracto-team/vue-credit-card

Install & Download:

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

You Might Be Interested In:

Add Comment