Vue Paycard

Credit card component made with Vue.js

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

Reason

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.

Storybook

Go to https://vue-paycard.netlify.app

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

$ npm install vue-paycard --save

yarn

$ yarn add vue-paycard

Quick start

Vue.js

You can import in your main.js file

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

Vue.use(VuePaycard);

Or locally in any component

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

export default {
  components: {
    VuePaycard,
  },
};

Nuxt.js

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

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

Vue.use(VuePaycard);

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

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

Basic usage

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

<script>
  export default {
    data: () => ({
      valueFields: {
        cardName: "",
        cardNumber: "",
        cardMonth: "",
        cardYear: "",
        cardCvv: "",
      },
    }),
  };
</script>

Props

Supported card types

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

Development

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 https://github.com/YOUR_GITHUB_USERNAME/vue-paycard.git
$ cd vue-paycard
$ yarn

Storybook

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

$ yarn storybook

Jest

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

CSS

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

Commitlint

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

License

MIT © 2020