https://github.com/avto-dev/bank-card-vue-component
Vue.js component with bank card
https://github.com/avto-dev/bank-card-vue-component
bank card component vue
Last synced: 3 months ago
JSON representation
Vue.js component with bank card
- Host: GitHub
- URL: https://github.com/avto-dev/bank-card-vue-component
- Owner: avto-dev
- License: mit
- Created: 2019-07-03T06:15:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-05T09:21:04.000Z (7 months ago)
- Last Synced: 2025-06-28T05:17:15.875Z (3 months ago)
- Topics: bank, card, component, vue
- Language: JavaScript
- Homepage:
- Size: 4.69 MB
- Stars: 14
- Watchers: 4
- Forks: 11
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Bank Card (component)
[![Version (npm)][badge_npm_version]][link_npm]
![Vue.js version][badge_vue_version]
[![Build Status][badge_build_status]][link_build_status]
[![Coverage][badge_coverage]][link_coverage]
[![License][badge_license]][link_license]
> Vue Component for user data entry of the bank card
**Demonstration is [available here](https://avto-dev.github.io/bank-card-vue-component/).**
## Installation
```bash
npm i --save @avto-dev/bank-card-vue-component
```
or
```bash
yarn add @avto-dev/bank-card-vue-component
```
You can import the library and styles, then use it as a Vue plugin to enable the functionality globally on all components.
```js
import Vue from "vue"
import VueBankCard from "@avto-dev/bank-card-vue-component"
import "@avto-dev/bank-card-vue-component/dist/bank-card-vue-component.css"
Vue.component("VueBankCard", VueBankCard)
```
## Basic usage
```vue
```
## Properties
Name | Required | Type | Default | Description
:--- | :--- | :--- | :--- | :---
`number` | no | String, Object | `""` | Number of card
`isSmall` | no | Boolean | `false` | View card controller: base or small
`isNew` | no | Boolean | `false` | View card controller: saved or new
`disableDelete` | no | Boolean | `false` | Disable delete option on small card
`errors` | no | Object | `{}` | Errors from outside the component. From server etc.
`isReset` | no | Boolean | `false` | Trigger for reset form
`isFocus` | no | Boolean | `false` | Card number field focus when component mounted (available if `isNew` is true)
`imagesBasePath` | no | String | [default](`https://cdn.jsdelivr.net/gh/avto-dev/bank-card-vue-component@master/public/images/`) | Base path and banks or payment systems logotypes
## Events
Name | Type | Parameters | Description
:--- | :--- | :--- | :---
`enter` | Function | `event` - Event of keydown | Handler of keydown on enter event
`clear-errors` | Function | `errors` - Object of errors | Clearing errors from outside
`reset` | Function | `isReset` - State of isReset property, type Boolean | Turn off isReset property
`delete-card` | Function | `event` - Event of click | Handler of click on trash button
## Example
```vue
export default {
data() {
return {
errors: {
cardNumber: "Недостаточно средств на карте",
expDateMonth: "Карта просрочена",
cvv: "Неверный код cvv"
},
resetForm: false
}
},
methods: {
onEnter(event) {
event.preventDefault();
console.log(event);
},
clearErrors(errors) {
this.errors = { ...errors };
}
}
}
```
## Use your own logotypes
By default banks logos provided from CDN: `https://cdn.jsdelivr.net/gh/avto-dev/bank-card-vue-component@%package_version%/public/images/%image_path%`.
If you want to use your own logotypes you can pass base images path by prop `images-base-path`. For example:
```vue
export default {
data() {
return {
imagesPath: "//your-own-cdn-or-host.com/path/to/assets/"
}
},
}
```
Now path to logotype would be `//your-own-cdn-or-host.com/path/to/assets/banks-logos/ru-sberbank.png`.
So you must have two folders in your defined path:
- `banks-logos` - Must contain bank logos;
- `brands-logos` - Must contain payment systems (VISA, Master Card, etc) logos.
Name of files with logotypes should be the same that come with this package.
## Testing
For package testing we use `jest` framework and `docker-ce` + `docker-compose` as develop environment. So, just write into your terminal after repository cloning:
```shell
$ make install
$ make test
```
## Changes log
[![Release date][badge_release_date]][link_releases]
[![Commits since latest release][badge_commits_since_release]][link_commits]
Changes log can be [found here][link_changes_log].
## Support
[![Issues][badge_issues]][link_issues]
[![Issues][badge_pulls]][link_pulls]
If you will find any package errors, please, [make an issue][link_create_issue] in current repository.
## License
This is open-sourced software licensed under the [MIT License][link_license].
[badge_npm_version]:https://img.shields.io/npm/v/@avto-dev/bank-card-vue-component.svg?maxAge=180
[badge_vue_version]:https://img.shields.io/github/package-json/dependency-version/avto-dev/bank-card-vue-component/vue.svg
[badge_build_status]:https://img.shields.io/github/actions/workflow/status/avto-dev/bank-card-vue-component/tests.yml
[badge_coverage]:https://img.shields.io/codecov/c/github/avto-dev/bank-card-vue-component/master.svg?maxAge=60
[badge_release_date]:https://img.shields.io/github/release-date/avto-dev/bank-card-vue-component.svg?style=flat-square&maxAge=180
[badge_commits_since_release]:https://img.shields.io/github/commits-since/avto-dev/bank-card-vue-component/latest.svg?style=flat-square&maxAge=180
[badge_issues]:https://img.shields.io/github/issues/avto-dev/bank-card-vue-component.svg?style=flat-square&maxAge=180
[badge_pulls]:https://img.shields.io/github/issues-pr/avto-dev/bank-card-vue-component.svg?style=flat-square&maxAge=180
[badge_license]:https://img.shields.io/github/license/avto-dev/bank-card-vue-component.svg?longCache=true
[link_releases]:https://github.com/avto-dev/bank-card-vue-component/releases
[link_commits]:https://github.com/avto-dev/bank-card-vue-component/commits
[link_changes_log]:https://github.com/avto-dev/bank-card-vue-component/blob/master/CHANGELOG.md
[link_issues]:https://github.com/avto-dev/bank-card-vue-component/issues
[link_pulls]:https://github.com/avto-dev/bank-card-vue-component/pulls
[link_build_status]:https://travis-ci.org/avto-dev/bank-card-vue-component
[link_coverage]:https://codecov.io/gh/avto-dev/bank-card-vue-component/
[link_npm]:https://www.npmjs.com/package/@avto-dev/bank-card-vue-component
[link_create_issue]:https://github.com/avto-dev/bank-card-vue-component/issues/new/choose
[link_license]:https://github.com/avto-dev/bank-card-vue-component/blob/master/LICENSE