Credit card component for vue

import VueCreditCard from '@fracto/vue-credit-card';
/* Globally use */
Vue.use(VueCreditCard);
/* Local Component */
export default {
    components: {VueCreditCard}
}

<link rel="stylesheet" href="https://unpkg.com/@fracto/vue-credit-card/dist/VueCreditCard.css">
<div id="app">
    <vue-credit-card></vue-credit-card>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@fracto/vue-credit-card/dist/VueCreditCard.umd.js"></script>
<script>
    Vue.component('vue-credit-card', VueCreditCard);
    var app = new Vue({
        el: '#app',
    });
</script>

<vue-credit-card :preview-enabled="true" v-model="creditCardForm" :card-types="myCustomCardTypes">
</vue-credit-card>

<div id="app">
<vue-credit-card :preview-enabled="true" :card-types="cardTypes">
</vue-credit-card>
</div>
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/@fracto/vue-credit-card/dist/VueCreditCard.umd.js"></script>
<script>
    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')},
            ]
        },
    });
</script>

{
    "holder": "Orkun ÇAKILKAYA",
    "number": 9792030000000000,
    "month": 12,
    "year": 23,
    "cvv": 456
}

<div id="app">
<vue-credit-card :preview-enabled="true" :card-types="cardTypes">
</vue-credit-card>
</div>
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/@fracto/vue-credit-card/dist/VueCreditCard.umd.js"></script>
<script>
    VueCreditCard.i18n.locale = 'tr'; // Changes locale to Turkish (default is English)
    Vue.component('vue-credit-card', VueCreditCard);
    var app = new Vue({
        el: '#app',
    });
</script>