# v-credit-card

> Beautiful credit card form component for vueJS

Latest version **1.2.4** (published 2019-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-credit-card
pnpm add v-credit-card
yarn add v-credit-card
bun add v-credit-card
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2019-12-14 |
| First published | 2019-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 66 |
| Author | Afik Deri |
| Maintainers | afikderi |
| Keywords | vue, credit, card, v-credit-card, vue-card, credit, card, component |

## Links

- npm: https://www.npmjs.com/package/v-credit-card
- Repository: https://github.com/AfikDeri/v-credit-card
- Homepage: https://github.com/AfikDeri/v-credit-card#readme
- Issues: https://github.com/AfikDeri/v-credit-card/issues
- npm.io page: https://npm.io/package/v-credit-card

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [imask](https://npm.io/package/imask.md) ^4.1.5

## Recent versions

- 1.2.4 (latest) — 2019-12-14
- 1.2.3 — 2019-12-03
- 1.2.2 — 2019-12-03
- 1.2.1 — 2019-11-19
- 1.2.0 — 2019-10-26
- 1.1.4 — 2019-04-17
- 1.1.3 — 2019-04-16
- 1.1.2 — 2019-04-16
- 1.1.1 — 2019-04-16
- 1.1.0 — 2019-04-16
- 1.0.3 — 2019-04-14
- 1.0.2 — 2019-04-14
- 1.0.1 — 2019-04-14
- 1.0.0 — 2019-04-14

## README

## v-credit-card

Beautiful card form component for VueJS inspired by Adam Quinlan https://codepen.io/quinlo/pen/YONMEa

<img src="./card.gif">

#### Installation

```
npm install --save v-credit-card
```

#### usage

Register the component as a plugin and use it globally


```js
import Vue from 'vue';
import VCreditCard from 'v-credit-card';

Vue.component('v-credit-card', VCreditCard);

// usage
<v-credit-card/>
```

Or, import inside a component


```html
<template>
    <VCreditCard/>
</template>

<script>
import VCreditCard from 'v-credit-card';

export default {
    components: {
        VCreditCard
    }
}
</script>
```

#### Styles
You must import the CSS to get all the card styles
```js
import VCreditCard from 'v-credit-card';
import 'v-credit-card/dist/VCreditCard.css';
```

#### Available props

|  props     | required | options      | default        | explenation                                       |
|------------|----------|--------------|----------------|---------------------------------------------------|
| direction  | no       | column, row  |    row         | Card and form side-by-side or top to bottom       |
| className  | no       | any string   |    none        | For any custom design, add your own wrapper class |
| yearDigits | no       | 2,4 (number) |    2           | construct the expiration year (YY or YYYY)        |
| noCard     | no       | true, false  |    false       | Show only the form without the credit card image  |
| trans      | no       | Object       | default labels | Override the default labels with your own         |

#### Events

You can listen for the `@change` event to get an object of all the form fields with their current values

```html
<template>
    <VCreditCard @change="creditInfoChanged"/>
</template>

<script>
import VCreditCard from 'v-credit-card';

export default {
    // ...
    methods: {
        creditInfoChanged(values) {
            console.log('Credit card fields', values); 
        }
    },
    components: {
        VCreditCard
    }
}
</script>
```

#### Example: store the form data in your component

This example shows how to have your local data reflect the changes inside the card component.

```html
<template>
    <VCreditCard @change="creditInfoChanged"/>
</template>

<script>
import VCreditCard from 'v-credit-card';

export default {
    data() {
        return {
            name: '',
            cardNumber: '',
            expiration: '',
            security: ''
        };
    },
    methods: {
        creditInfoChanged(values) {
            for (const key in values) {
                this[key] = values[key];
            }
        }
    },
    components: {
        VCreditCard
    }
}
</script>
```

If you need the card type as well (Visa, Mastercard, etc) you can listen to the `@cardChanged` event.

```html
<template>
    <VCreditCard @cardChanged="cardChanged"/>
</template>

<script>
import VCreditCard from 'v-credit-card';

export default {
    data() {
        return {
            // ...
            cardName: null
        };
    },
    methods: {
        // ...
        cardChanged(cardName) {
            this.cardName = cardName;
        }
    },
    components: {
        VCreditCard
    }
}
</script>
```

#### Translations

If you wish to override the default field labels, you can accomplish that by passing a custom translation object.

```html
<template>
    <VCreditCard :trans="translations"/>
</template>

<script>
import VCreditCard from 'v-credit-card';

const translations = {
    name: {
        label: 'Nombre',
        placeholder: 'Nombre completo'
    },
    card: {
        label: 'Número de tarjeta',
        placeholder: 'Número de tarjeta'
    },
    expiration: {
        label: 'Expiration'
    },
    security: {
        label: 'Código de seguridad',
        placeholder: 'Código'
    }
};

export default {
    data() {
        return {
            translations
        };
    },
    components: {
        VCreditCard
    }
}
</script>
```


## License

MIT © 2018-present

---
_Source: https://npm.io/package/v-credit-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._