vue-ccard is a component of Vue.js that displays an interactive credit card preview of payment forms.

This is a Vue.js component that renders a beautiful virtual credit card that is interactive with user input. The purpose is to improve the user experience in the case of online purchases.

credit card payment form vuejs, credit card form using html css javascript, credit card checkout form ui design, free template for credit card payment

💳 Responsive Credit Card Component For Angular

How to make use of it:

Install and download:

# NPM 
$ npm i vue-ccard --save

1. Import the component.

import VueCCard from 'vue-ccard';

2. 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>

3. Register the component.

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

Payment Form With Credit Card Preview, vue-ccard Plugin/Github

See Demo And Download

Official Website(hildorjr): Click Here

This superior jQuery/javascript plugin is developed by hildorjr. For extra advanced usage, please go to the official website.