Payment Form With Credit Card Preview – vue-ccard

Just another credit card input component created for payment forms on your Vue.js application.

How to use it:

1. Install the component with NPM.

$ npm i vue-ccard --save

2. Import the component.

import VueCCard from 'vue-ccard';

3. Add the credit card component to the template.

  <div id="app">
    <label for="number">Number</label>
    <input type="text" v-model="cc.number" id="number">
    <label for="holder">Holder</label>
    <input type="text" v-model="cc.holder" id="holder">
    <label for="exp">Expiration Date</label>
    <input type="text" v-model="cc.exp" id="exp">
    <label for="cvc">CVC</label>
    <input type="text" v-model="cc.cvc"
      @focus="isTypingCvc = true"
      @blur="isTypingCvc = false" id="cvc">

4. Register the component.

export default {
  name: 'app',
  components: {
  data() {
    return {
      isTypingCvc: false,
      cc: {
        number: '',
        holder: '',
        exp: '',
        cvc: '',


Payment Form With Credit Card Preview - vue-ccard

Download Details:

Author: hildorjr

Live Demo:

Download Link:

Official Website:

Install & Download:

# NPM 
$ npm i vue-ccard --save

Add Comment