@pablinho/vue-paycard

Vue Paycard de los pibes

Credit card component made with Vue.js (Vue 3)

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

Fork of the original vue-paycard to just use Visa and Mastercard, modified so it can be used in Vue3 and added isCardFlipped as a prop so it can be controlled from outside the component.

How to install

npm

$ npm install @pablinho/vue-paycard --save

yarn

$ yarn add @pablinho/vue-paycard

Quick start

Vue.js

You can import in your main.js file

Vue.js

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

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

app.use(VuePaycard);

app.mount("#app");

Or locally in any component

import { VuePaycard } from "@pablinho/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 @pablinho/vue-paycard.js

import Vue from "vue";
import VuePaycard from "@pablinho/vue-paycard";

Vue.use(VuePaycard);

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

plugins: [{ src: "~/plugins/@pablinho/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

Events

Supported card types

• MasterCard
• Visa

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/@pablinho/vue-paycard.git
$ cd @pablinho/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