https://github.com/fracto-team/vue-credit-card
Another Credit Card Component for VueJS
https://github.com/fracto-team/vue-credit-card
component credit-card creditcard creditcardform vue vue2 vue2js vuejs vuejs2
Last synced: about 18 hours ago
JSON representation
Another Credit Card Component for VueJS
- Host: GitHub
- URL: https://github.com/fracto-team/vue-credit-card
- Owner: fracto-team
- License: mit
- Created: 2019-12-26T15:10:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T18:28:41.000Z (almost 3 years ago)
- Last Synced: 2025-07-05T03:28:16.993Z (3 months ago)
- Topics: component, credit-card, creditcard, creditcardform, vue, vue2, vue2js, vuejs, vuejs2
- Language: Vue
- Size: 1.27 MB
- Stars: 27
- Watchers: 1
- Forks: 5
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @fracto/vue-credit-card
Credit card component for vue
## Features
Note: Localization supports only `Turkish` & `German` & `English` for now.
- [x] Localization (i18n) (All translations are welcome)
- [x] Card Preview
- [x] Hide sensitive information
- [x] Card input mask
- [x] Easily customizable
- [ ] Validator
## Getting Started
### Import
#### Common
```javascript
import VueCreditCard from '@fracto/vue-credit-card';
/* Globally use */
Vue.use(VueCreditCard);
/* Local Component */
export default {
components: {VueCreditCard}
}
```
#### Browser
```html
Vue.component('vue-credit-card', VueCreditCard);
var app = new Vue({
el: '#app',
});
```
### Usage
```html
```
Prop `preview-enabled` enables or disabled Card preview.
Prop `card-types` allows you to change or add new card types. Example usage:
```html
Vue.component('vue-credit-card', VueCreditCard);
var app = new Vue({
el: '#app',
data: {
cardTypes: [
{regEx: /^4[0-9]{5}/ig, name: 'visa', icon: require('../assets/visa_icon.png')},
{regEx: /^5[1-5][0-9]{4}/ig, name: 'mastercard', icon: require('../assets/master_icon.png')},
]
},
});
```
The variable `creditCardForm` is a `model` which formatted like this:
```json
{
"holder": "Orkun ÇAKILKAYA",
"number": 9792030000000000,
"month": 12,
"year": 23,
"cvv": 456
}
```
#### Localization
Available locales are `de`, `en` & `tr`
```html
VueCreditCard.i18n.locale = 'tr'; // Changes locale to Turkish (default is English)
Vue.component('vue-credit-card', VueCreditCard);
var app = new Vue({
el: '#app',
});
```
### Preview
