jQuery Card.js eklentisi, e-ticaret veya alışveriş sitelerinin ödeme sayfası için oluşturulmuş, etkileşimli kredi kartı formu oluşturmayı sağlayan bir kütüphanedir.
Bu blog gönderimde sizlerle etkileşimli bir online ödeme formu oluşturacağız. Sanırım bir değişiklik olmadıysa bu sistemi türkiye’de n11 ve gittigidiyor kullanıyordu. Sektörün büyük oyuncularının sıklıkla kullandığı bu sistem sanal bir kart karşımıza çıkarıyor, ödeme bilgilerini forma girdikçe kartın üzerine eşzamanlı olarak işliyor.
Nasıl? – Demo
Özellikler:
Kart tipi algılama. (Visa – Mastercard vs)
Alan doğrulaması.(Boşluk – Özel Karakter)
Giriş maskelemesi.
Numara, isim, tarih ve CVC’ye özel yer alan alanlar
Nasıl Kullanılır?
1- Gerekli dosyaların sayfa içerisine entegre edilmesi
Öncelikle card.css ve card.js dosyalarımızın güncel versiyonlarını edinip, sayfa içerisine ekleyelim.
<!-- HEADER --> <link href="card.css" rel="stylesheet"> <!-- FOOTER --> <script src="//code.jquery.com/jquery.min.js"></script> <script src="dist/jquery.card.js"></script> <!-- VEYA --> <script src="dist/card.js"></script>
2- Kartın görüneceği alanı ve ödeme verisi giriş alanlarımızı oluşturalım.
<div class="card-wrapper"></div>
<div class="form-container active">
<form action="">
<input placeholder="Kredi Kartı Numarası" type="tel" name="number">
<input placeholder="Ad Soyad" type="text" name="name">
<input placeholder="AA/YY" type="tel" name="expiry">
<input placeholder="CVC" type="number" name="cvc">
</form>
</div>
3- card.js bilgilerini sayfamıza tanımlayalım
// jQuery
$('form').card({
container: '.card-wrapper'
});
// Vanilla JavaScript
new Card({
form: document.querySelector('form'),
container: '.card-wrapper'
});
// Class bilgilerine dikkat!
4- Kart özelliklerimizi belirtelim (İsteğe bağlı)
$('form').card({
// numara formatı
formatting: true,
// form seçicileri
formSelectors: {
numberInput: 'input[name="number"]',
expiryInput: 'input[name="expiry"]',
cvcInput: 'input[name="cvc"]',
nameInput: 'input[name="name"]'
},
cardSelectors: {
cardContainer: '.jp-card-container',
card: '.jp-card',
numberDisplay: '.jp-card-number',
expiryDisplay: '.jp-card-expiry',
cvcDisplay: '.jp-card-cvc',
nameDisplay: '.jp-card-name'
},
// mesajlar
messages: {
validDate: 'valid\nthru',
monthYear: 'month/year'
},
// placeholder alanları
placeholders: {
number: '•••• •••• •••• ••••',
cvc: '•••',
expiry: '••/••',
name: 'Full Name'
},
// input masking aktifle
masks: {
cardNumber: false
},
// valid/invalid CSS class bilgileri
classes: {
valid: 'jp-card-valid',
invalid: 'jp-card-invalid'
},
// debug mode
debug: false
});