Awesome Credit Card Form - VueJs snippet

Loading…

Awesome Credit Card Form - VueJs snippet | GoSnippets

Source Code

1<div class="wrapper" id="app">
2    <div class="card-form">
3      <div class="card-list">
4        <div class="card-item" v-bind:class="{ '-active' : isCardFlipped }">
5          <div class="card-item__side -front">
6            <div class="card-item__focus" v-bind:class="{'-active' : focusElementStyle }" v-bind:style="focusElementStyle" ref="focusElement"></div>
7            <div class="card-item__cover">
8              <img
9              v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + currentCardBackground + '.jpeg'" class="card-item__bg">
10            </div>
11            
12            <div class="card-item__wrapper">
13              <div class="card-item__top">
14                <img src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png" class="card-item__chip">
15                <div class="card-item__type">
16                  <transition name="slide-fade-up">
17                    <img v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + getCardType + '.png'" v-if="getCardType" v-bind:key="getCardType" alt="" class="card-item__typeImg">
18                  </transition>
19                </div>
20              </div>
21              <label for="cardNumber" class="card-item__number" ref="cardNumber">
22                <template v-if="getCardType === 'amex'">
23                 <span v-for="(n, $index) in amexCardMask" :key="$index">
24                  <transition name="slide-fade-up">
25                    <div
26                      class="card-item__numberItem"
27                      v-if="$index > 4 && $index < 14 && cardNumber.length > $index && n.trim() !== ''"
28                    >*</div>
29                    <div class="card-item__numberItem"
30                      :class="{ '-active' : n.trim() === '' }"
31                      :key="$index" v-else-if="cardNumber.length > $index">
32                      {{cardNumber[$index]}}
33                    </div>
34                    <div
35                      class="card-item__numberItem"
36                      :class="{ '-active' : n.trim() === '' }"
37                      v-else
38                      :key="$index + 1"
39                    >{{n}}</div>
40                  </transition>
41                </span>
42                </template>
43
44                <template v-else>
45                  <span v-for="(n, $index) in otherCardMask" :key="$index">
46                    <transition name="slide-fade-up">
47                      <div
48                        class="card-item__numberItem"
49                        v-if="$index > 4 && $index < 15 && cardNumber.length > $index && n.trim() !== ''"
50                      >*</div>
51                      <div class="card-item__numberItem"
52                        :class="{ '-active' : n.trim() === '' }"
53                        :key="$index" v-else-if="cardNumber.length > $index">
54                        {{cardNumber[$index]}}
55                      </div>
56                      <div
57                        class="card-item__numberItem"
58                        :class="{ '-active' : n.trim() === '' }"
59                        v-else
60                        :key="$index + 1"
61                      >{{n}}</div>
62                    </transition>
63                  </span>
64                </template>
65              </label>
66              <div class="card-item__content">
67                <label for="cardName" class="card-item__info" ref="cardName">
68                  <div class="card-item__holder">Card Holder</div>
69                  <transition name="slide-fade-up">
70                    <div class="card-item__name" v-if="cardName.length" key="1">
71                      <transition-group name="slide-fade-right">
72                        <span class="card-item__nameItem" v-for="(n, $index) in cardName.replace(/\s\s+/g, ' ')" v-if="$index === $index" v-bind:key="$index + 1">{{n}}</span>
73                      </transition-group>
74                    </div>
75                    <div class="card-item__name" v-else key="2">Full Name</div>
76                  </transition>
77                </label>
78                <div class="card-item__date" ref="cardDate">
79                  <label for="cardMonth" class="card-item__dateTitle">Expires</label>
80                  <label for="cardMonth" class="card-item__dateItem">
81                    <transition name="slide-fade-up">
82                      <span v-if="cardMonth" v-bind:key="cardMonth">{{cardMonth}}</span>
83                      <span v-else key="2">MM</span>
84                    </transition>
85                  </label>
86                  /
87                  <label for="cardYear" class="card-item__dateItem">
88                    <transition name="slide-fade-up">
89                      <span v-if="cardYear" v-bind:key="cardYear">{{String(cardYear).slice(2,4)}}</span>
90                      <span v-else key="2">YY</span>
91                    </transition>
92                  </label>
93                </div>
94              </div>
95            </div>
96          </div>
97          <div class="card-item__side -back">
98            <div class="card-item__cover">
99              <img
100              v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + currentCardBackground + '.jpeg'" class="card-item__bg">
101            </div>
102            <div class="card-item__band"></div>
103            <div class="card-item__cvv">
104                <div class="card-item__cvvTitle">CVV</div>
105                <div class="card-item__cvvBand">
106                  <span v-for="(n, $index) in cardCvv" :key="$index">
107                    *
108                  </span>
109
110              </div>
111                <div class="card-item__type">
112                    <img v-bind:src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + getCardType + '.png'" v-if="getCardType" class="card-item__typeImg">
113                </div>
114            </div>
115          </div>
116        </div>
117      </div>
118      <div class="card-form__inner">
119        <div class="card-input">
120          <label for="cardNumber" class="card-input__label">Card Number</label>
121          <input type="text" id="cardNumber" class="card-input__input" v-mask="generateCardNumberMask" v-model="cardNumber" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardNumber" autocomplete="off">
122        </div>
123        <div class="card-input">
124          <label for="cardName" class="card-input__label">Card Holders</label>
125          <input type="text" id="cardName" class="card-input__input" v-model="cardName" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardName" autocomplete="off">
126        </div>
127        <div class="card-form__row">
128          <div class="card-form__col">
129            <div class="card-form__group">
130              <label for="cardMonth" class="card-input__label">Expiration Date</label>
131              <select class="card-input__input -select" id="cardMonth" v-model="cardMonth" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
132                <option value="" disabled selected>Month</option>
133                <option v-bind:value="n < 10 ? '0' + n : n" v-for="n in 12" v-bind:disabled="n < minCardMonth" v-bind:key="n">
134                    {{n < 10 ? '0' + n : n}}
135                </option>
136              </select>
137              <select class="card-input__input -select" id="cardYear" v-model="cardYear" v-on:focus="focusInput" v-on:blur="blurInput" data-ref="cardDate">
138                <option value="" disabled selected>Year</option>
139                <option v-bind:value="$index + minCardYear" v-for="(n, $index) in 12" v-bind:key="n">
140                    {{$index + minCardYear}}
141                </option>
142              </select>
143            </div>
144          </div>
145          <div class="card-form__col -cvv">
146            <div class="card-input">
147              <label for="cardCvv" class="card-input__label">CVV</label>
148              <input type="text" class="card-input__input" id="cardCvv" v-mask="'####'" maxlength="4" v-model="cardCvv" v-on:focus="flipCard(true)" v-on:blur="flipCard(false)" autocomplete="off">
149            </div>
150          </div>
151        </div>
152
153        <button class="card-form__button">
154          Submit
155        </button>
156      </div>
157    </div>
158     
159  </div>
160  
161  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
162<script src='https://unpkg.com/vue-the-mask@0.11.1/dist/vue-the-mask.js'></script>

Awesome Credit Card Form - VueJs snippet

Source Code

More Cards snippets

Comments(0)