v-credit-card3
v2.0.0
Published
Beautiful card form component for VueJS inspired by Adam Quinlan https://codepen.io/quinlo/pen/YONMEa
Downloads
35
Maintainers
Readme
v-credit-card
Beautiful card form component for VueJS inspired by Adam Quinlan https://codepen.io/quinlo/pen/YONMEa
Installation
npm install --save v-credit-card
usage
Register the component as a plugin and use it globally
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
<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
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
<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.
<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.
<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.
<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