A Simple Credit Card Validation Component for VueJS

vue-credit-card-component

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

Features

  • 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
$ npm install @fracto/vue-credit-card --save

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

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.

Share