Kullanıcı Etkileşimli Ödeme Formu Oluşturmak (Kredi Kartı) - {Card.js

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>

12345678

<!--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>

12345678910

<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!

1234567891011

// jQuery$('form').card({container:'.card-wrapper'}); // Vanilla JavaScriptnewCard({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: '&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;', cvc: '&bull;&bull;&bull;', expiry: '&bull;&bull;/&bull;&bull;', 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 });

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

$('form').card({ // numara formatıformatting:true, // form seçicileriformSelectors:{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'}, // mesajlarmessages:{validDate:'valid\nthru',monthYear:'month/year'}, // placeholder alanlarıplaceholders:{number:'•••• •••• •••• ••••',cvc:'•••',expiry:'••/••',name:'Full Name'}, // input masking aktiflemasks:{cardNumber:false}, // valid/invalid CSS class bilgilericlasses:{valid:'jp-card-valid',invalid:'jp-card-invalid'}, // debug modedebug:false});