Home Form Plugins A Simple Credit Card Validation Component for VueJS

A Simple Credit Card Validation Component for VueJS

Form Plugins webcodeflow · October 2, 2022 · 0 Comment

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