v-credit-card

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