A Simple Credit Card Validation Component for VueJS


Vue credit card component which features input mask, card preview, multiple languages, hiding sensitive information, etc.


  • Localization (i18n) (all translations welcome)
  • Card preview
  • Hide sensitive information
  • Card insertion mask
  • Easy to customize
  • Checker

Note: The localization only supports Turkish, German, and English languages at the moment.

How to make use of it:

Install and download:

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

1. Install and import the component.

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

2. Register the component.

// or 
export default {
  components: {VueCreditCard}

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

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

Easy Credit Card Component, vue credit card Plugin/Github, card validation with demo, jquery validate credit card

See Demo And Download

Official Website(fracto-team): Click Here

This superior jQuery/javascript plugin is developed by fracto-team. For extra Advanced usage, please go to the official website.