{"id":16949486,"url":"https://github.com/guastallaigor/vue-paycard","last_synced_at":"2025-04-08T03:13:32.081Z","repository":{"id":39010555,"uuid":"279740841","full_name":"guastallaigor/vue-paycard","owner":"guastallaigor","description":"Credit card component made with Vue.js (works with Vue 2 \u0026 3)","archived":false,"fork":false,"pushed_at":"2023-08-14T12:26:25.000Z","size":6300,"stargazers_count":106,"open_issues_count":21,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-24T12:27:06.537Z","etag":null,"topics":["card","credit","credit-card","hacktoberfest","paycard","vue","vue-credit-card","vue-paycard","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-paycard.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guastallaigor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"ko_fi":"guastallaigor"}},"created_at":"2020-07-15T02:22:05.000Z","updated_at":"2024-04-24T12:27:06.538Z","dependencies_parsed_at":"2024-01-07T13:04:54.622Z","dependency_job_id":"eb42dd6c-4ef3-4522-abf9-f397b374851f","html_url":"https://github.com/guastallaigor/vue-paycard","commit_stats":{"total_commits":110,"total_committers":7,"mean_commits":"15.714285714285714","dds":0.4727272727272728,"last_synced_commit":"20b207f7717e39834fb15d569f8ce098d54c50c2"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fvue-paycard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fvue-paycard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fvue-paycard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fvue-paycard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guastallaigor","download_url":"https://codeload.github.com/guastallaigor/vue-paycard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767236,"owners_count":20992548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card","credit","credit-card","hacktoberfest","paycard","vue","vue-credit-card","vue-paycard","vue3","vuejs"],"created_at":"2024-10-13T21:54:55.881Z","updated_at":"2025-04-08T03:13:32.053Z","avatar_url":"https://github.com/guastallaigor.png","language":"JavaScript","funding_links":["https://ko-fi.com/guastallaigor","https://ko-fi.com/C1C63QCB8"],"categories":["UI Components [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./.github/logo.png\" width=\"200px\"\u003e\n  \u003ch1\u003eVue Paycard\u003c/h1\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n  Credit card component made with Vue.js (works with Vue 2 \u0026 3)\n\u003c/p\u003e\n\n[![Version](https://img.shields.io/npm/v/vue-paycard.svg)](https://www.npmjs.com/package/vue-paycard)\n[![GithubActions](https://github.com/guastallaigor/vue-paycard/workflows/vue-paycard/badge.svg)](https://github.com/guastallaigor/vue-paycard/actions)\n[![Coverage Status](https://coveralls.io/repos/github/guastallaigor/vue-paycard/badge.svg?branch=master)](https://coveralls.io/github/guastallaigor/vue-paycard?branch=master)\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n[![Downloads](https://img.shields.io/npm/dt/vue-paycard.svg)](https://www.npmjs.com/package/vue-paycard)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/a87b7690-b534-4c67-b4a6-60e586bd79b5/deploy-status)](https://app.netlify.com/sites/vue-paycard/deploys)\n\n\u003e This component is based on \u003ca href=\"https://github.com/muhammederdem/vue-interactive-paycard\" target=\"_blank\"\u003eVue Interactive Paycard\u003c/a\u003e. All the credits for the component (idea, design, images, core code) goes to it \u003c/br\u003e\u003c/br\u003e\n\u003e This project only exports the Card component, **you** will need to create your own form\n\n## Reason\n\nThere are a few reasons for creating this project\n\nFirst 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\n\nAlso, 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\n\nSo this project is the Card component from there, but with some differences:\n\n1. This component is in npm, so you can simply install and start using it right away, with only Vue.js as a dependency;\n2. All the images were optimized and have their width exactly as they need;\n3. The name of some of the props were changed and some of the code was refactored;\n4. The prop `labels` was added, so we don't need any i18n library;\n5. This project has a development environment using [Storybook](https://storybook.js.org/docs/guides/guide-vue/), [Github Actions](https://github.com/features/actions), etc.\n\n## Storybook\n\nGo to https://vue-paycard.netlify.app\n\n\u003e **Note**: The form inside is just an example, **you** will need to create yours or copy it from `tests/unit/form.vue`\n\n## How to install\n\n### npm\n\n```bash\n$ npm install vue-paycard --save\n```\n\n### yarn\n\n```bash\n$ yarn add vue-paycard\n```\n\n## Quick start\n\n### Vue.js\n\nYou can import in your `main.js` file\n\n```js\nimport Vue from \"vue\";\nimport VuePaycard from \"vue-paycard\";\n\nVue.use(VuePaycard);\n```\n\nFor Vue 3\n\n```js\nimport { createApp, h } from \"vue\";\nimport VuePaycard from \"vue-paycard\";\n\nconst app = createApp({\n  render: () =\u003e h(App),\n});\n\napp.use(VuePaycard);\n\napp.mount(\"#app\");\n```\n\nOr locally in any component\n\n```js\nimport { VuePaycard } from \"vue-paycard\";\n// In v0.5+ you don't need the brackets above\n\nexport default {\n  components: {\n    VuePaycard,\n  },\n};\n```\n\n### Nuxt.js\n\nYou can create a Nuxt.js plugin `vue-paycard.js`\n\n```js\nimport Vue from \"vue\";\nimport VuePaycard from \"vue-paycard\";\n\nVue.use(VuePaycard);\n```\n\nand then import it in your `nuxt.config.js` file\n\n```js\nplugins: [{ src: \"~/plugins/vue-paycard.js\", mode: \"client\" }];\n```\n\n## \u003ca name=\"usage\"\u003eBasic usage\u003c/a\u003e\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-paycard :value-fields=\"valueFields\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data: () =\u003e ({\n      valueFields: {\n        cardName: \"\",\n        cardNumber: \"\",\n        cardMonth: \"\",\n        cardYear: \"\",\n        cardCvv: \"\",\n      },\n    }),\n  };\n\u003c/script\u003e\n```\n\n## Props\n\n| Property name          | Type             | Default                                                                                                                             | Description                                                                                                                                                                                                                                                                                                                                                                          |\n| ---------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| 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](#usage)). The `cardNumber` attribute value **must** be stored as it's shown: **#### #### #### ####**. The `cardYear` attribute value **must** be stored as **YYYY** |\n| 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                          |\n| 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\"                                                                                                                                                                                                                        |\n| is-card-number-masked  | Boolean          | true                                                                                                                                | Hides the numbers provided and changes to \"\\*\". Only shows the last four digits                                                                                                                                                                                                                                                                                                      |\n| has-random-backgrounds | Boolean          | true                                                                                                                                | Set a random background image to the card. You can check all the images in `src/assets/images`                                                                                                                                                                                                                                                                                       |\n| 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`                                                                                                                                                                                                 |\n| 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                                                                                        |\n\n## Events\n\n| Event name | Type   | Default | Description                               |\n| ---------- | ------ | ------- | ----------------------------------------- |\n| get-type   | String | null    | Emits the type generated from card number |\n\n## Supported card types\n\n- American Express\n- Aura\n- Dankort\n- Diners Club\n- Discover\n- Elo\n- Hipercard\n- JCB\n- Laser\n- Maestro\n- MasterCard\n- MIR\n- Troy\n- UATP\n- UnionPay\n- Visa\n- Visa Electron\n\n## Development\n\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/guastallaigor/vue-paycard/issues)\n\n\u003e **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\n\nFork the project and enter this commands in your terminal\n\n```sh\n$ git clone https://github.com/YOUR_GITHUB_USERNAME/vue-paycard.git\n$ cd vue-paycard\n$ yarn\n```\n\n### Storybook\n\nFor visual testing, this project contains storybook which you can run by running the command\n\n```sh\n$ yarn storybook\n```\n\n### Jest\n\nBefore making the PR, if you changed something that needs to be tested, please make the tests inside the `tests/unit` folder\n\nTo run the tests, you can use the command\n\n```sh\n$ yarn test:watch\n```\n\n### CSS\n\nAll the CSS is at `src/assets/css/style.css`\n\nIf 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`\n\n### Commitlint\n\nThis project follows the [commitlint](https://github.com/conventional-changelog/commitlint) guidelines, with minor changes\n\nYou can commit using `yarn commit` to help you with that\n\nThere's a `pre-push` hook that runs all the unit tests before you can push it\n\nIf an error occurs, you can use the `yarn commit:retry` command that runs the previous `yarn commit` that you already filled\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C1C63QCB8)\n\n## License\n\n[MIT](https://github.com/guastallaigor/vue-paycard/blob/master/LICENSE) © 2020\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguastallaigor%2Fvue-paycard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguastallaigor%2Fvue-paycard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguastallaigor%2Fvue-paycard/lists"}