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
$ npm i vue-ccard --save

2. Import the component.

import VueCCard from 'vue-ccard';

3. Add the credit card component to the template.

<template>
  <div id="app">
    <vue-c-card
      :number="cc.number"
      :holder="cc.holder"
      :exp="cc.exp"
      :cvc="cc.cvc"
      :is-typing-cvc="isTypingCvc"/>
    <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">
  </div>
</template>

4. Register the component.

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

Preview:

Download Details:

Author: hildorjr

Live Demo: https://github.com/hildorjr/vue-ccard

Download Link: https://github.com/hildorjr/vue-ccard/archive/master.zip

Official Website: https://github.com/hildorjr/vue-ccard

Install & Download:

# NPM 
$ npm i vue-ccard --save