Awesome Open Source
Awesome Open Source

Vue Paycard

Credit card component made with Vue.js (works with Vue 2 & 3)

Version GithubActions Coverage Status js-standard-style Downloads Netlify Status

This component is based on Vue Interactive Paycard. All the credits for the component (idea, design, images, core code) goes to it This project only exports the Card component, you will need to create your own form


There are a few reasons for creating this project

First of all, a few of us developers needed a good and well designed Vue.js lightweight zero dependencies credit card component with only the card, no form attached

Also, Vue Interactive Paycard isn't a Vue.js npm component that you can simply add it to your project, and it doesn't seem to be maintained

So this project is the Card component from there, but with some differences:

  1. This component is in npm, so you can simply install and start using it right away, with only Vue.js as a dependency;
  2. All the images were optimized and have their width exactly as they need;
  3. The name of some of the props were changed and some of the code was refactored;
  4. The prop labels was added, so we don't need any i18n library;
  5. This project has a development environment using Storybook, Github Actions, etc.


Go to

Note: The form inside is just an example, you will need to create yours or copy it from tests/unit/form.vue

How to install


$ npm install vue-paycard --save


$ yarn add vue-paycard

Quick start


You can import in your main.js file

import Vue from "vue";
import VuePaycard from "vue-paycard";


For Vue 3

import { createApp, h } from "vue";
import VuePaycard from "vue-paycard";

const app = createApp({
  render: () => h(App),



Or locally in any component

import { VuePaycard } from "vue-paycard";
// In v0.5+ you don't need the brackets above

export default {
  components: {


You can create a Nuxt.js plugin vue-paycard.js

import Vue from "vue";
import VuePaycard from "vue-paycard";


and then import it in your nuxt.config.js file

plugins: [{ src: "~/plugins/vue-paycard.js", mode: "client" }];

Basic usage

  <vue-paycard :value-fields="valueFields" />

  export default {
    data: () => ({
      valueFields: {
        cardName: "",
        cardNumber: "",
        cardMonth: "",
        cardYear: "",
        cardCvv: "",


Property name Type Default Description
value-fields* Object null A required object that let you set the credit card holders name, number, month, year and cvv. Note that is required that all the attributes name must be exactly as the example above (see Basic usage). The cardNumber attribute value must be stored as it's shown: #### #### #### ####. The cardYear attribute value must be stored as YYYY
input-fields Object { cardNumber: 'v-card-number', cardName: 'v-card-name', cardMonth: 'v-card-month', cardYear: 'v-card-year', cardCvv: 'v-card-cvv' } An object that contains all your input fields id from your form. Each input field must have a valid and unique id to bind focus/blur listeners that this component provides. Note that is required that all the attributes name must be exactly as the ones in "Default". You need to also add a data-card-field attribute for each of those inputs
labels Object { cardName: 'Full Name', cardHolder: 'Card Holder', cardMonth: 'MM', cardYear: 'YY', cardExpires: 'Expires', cardCvv: 'CVV' } Set custom labels for the card if needed. English by default. Note that is required that all the attributes name must be exactly as the ones in "Default"
is-card-number-masked Boolean true Hides the numbers provided and changes to "*". Only shows the last four digits
has-random-backgrounds Boolean true Set a random background image to the card. You can check all the images in src/assets/images
background-image [String, Number] '' Set a background image link to the card (overrides has-random-backgrounds prop), or you can pass a single valid number that matches the images name we have in src/assets/images
set-type String '' Set a card type from the supported card types ['visaelectron', 'visa', 'elo', 'amex', 'mastercard', 'discover', 'unionpay', 'troy', 'dinersclub', 'jcb', 'laser', 'dankort', 'uatp', 'mir', 'hipercard', 'aura', 'maestro']. Note that this will override the type generated from card number


Event name Type Default Description
get-type String null Emits the type generated from card number

Supported card types

  • American Express
  • Aura
  • Dankort
  • Diners Club
  • Discover
  • Elo
  • Hipercard
  • JCB
  • Laser
  • Maestro
  • MasterCard
  • MIR
  • Troy
  • UATP
  • UnionPay
  • Visa
  • Visa Electron


contributions welcome

Note: Contributions are very welcomed, however is very important to open a new issue using the issue template before you start working on anything, so we can discuss it before hand

Fork the project and enter this commands in your terminal

$ git clone
$ cd vue-paycard
$ yarn


For visual testing, this project contains storybook which you can run by running the command

$ yarn storybook


Before making the PR, if you changed something that needs to be tested, please make the tests inside the tests/unit folder

To run the tests, you can use the command

$ yarn test:watch


All the CSS is at src/assets/css/style.css

If you make any changes in that file, you will need to run yarn build to build it, because the component uses the minified version at src/assets/css/style.min.css


This project follows the commitlint guidelines, with minor changes

You can commit using yarn commit to help you with that

There's a pre-push hook that runs all the unit tests before you can push it

If an error occurs, you can use the yarn commit:retry command that runs the previous yarn commit that you already filled



MIT © 2020

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,060,209
Vue (66,023
Card (18,842
Storybook (3,094
Vue3 (1,625
Credit Card (878
Credit (82
Paycard (4