Cyber Warna The Code Never Sleeps
seiring kemajuan jaman dunia internet tidak bisa kita pungkiri banyak memberikan kemudahan kepada para netter di bidangnya masing-masing. salah satu yang bisa kita ambil cohtoh adalah kemudahan kita dalam melakukan transaksi untuk sebuah pembelian atau pembayaran dengan sistem-sistem tertentu.
seperti yang kita lihat dengan semakin menjamurnya toko-toko online yang menjual berbagai produk dimana proses pembayaran nya pun di lakukan secara online dengan berbagai macam pilihan cara pembayaran. Bila kita pernah melakukan pembelian produk secara online mungkin ada beberapa toko online yang menyediakan fasilitas pembayaran melalui credit card. dalam opsi credit card di situ ada form di mana kita harus memasukkan nomor kartu kredit anda. dimana ketika kita memasukkan beberapa digit nomor kartu kredit langsung akan muncul notifikasi jenis kartu kredit yang kita gunakan.
disini Ciber Warna akan mencoba membagikan cara bagaimana membuat form yang bisa mendeteksi jenis kartu kredit yang di gunakan oleh user. karena pada dasarnya setiap kartu kredit khususnya Visa dan Mastercard mempunyai ciri tersendiri yang menjadi pembeda dari keduanya di lihat dari nominal beberapa digit angka yang di gunakan sebagai nomor kartu kredit. Untuk lebih jelasnya tentang perbedaan kartu kredit dari nomor seri anda bisa googling.
disini Cyber Warna akan mencoba membedakan dua kartu kredit yaitu Visa dan mastercard karena dua kartu kredit tersebut yang banyak di gunakan oleh user khususnya di Indonesia.
berikut langkah-langkah yang akan kita lakukan untuk membuat form tersebut:
1. Membuat Javascript
buatlah beberapa baris javascript untuk membedakan kartu kredit berdasarkan nomor kartu tersebut
beri nama javascript terserah anda, disini saya akan menamakan javascript tersebut kartu-kredit.js script yang bertugan melakukan deteksi kartu kredit
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
(function( $ ) { $.fn.deteksiKartuKredit = function( options ) { var settings = $.extend( { 'credit_logo_kartu_id': '.logo_kartu' }, options), logos_obj = $(settings.credit_logo_kartu_id), visa_regex = new RegExp('^4[0-9]{0,15}$'), mastercard_regex = new RegExp('^5$|^5[1-5][0-9]{0,14}$'), return this.each(function(){ $(this).keyup(function(){ var cur_val = $(this).val(); cur_val = cur_val.replace(/ /g,'').replace(/-/g,''); if ( cur_val.match(visa_regex) ) { $(logos_obj).addClass('this_visa'); } else { $(logos_obj).removeClass('this_visa'); } if ( cur_val.match(mastercard_regex) ) { $(logos_obj).addClass('this_mastercard'); } else { $(logos_obj).removeClass('this_mastercard'); } if ( cur_val != '' && !cur_val.match(visa_regex) && !cur_val.match(mastercard_regex)) { $(logos_obj).addClass('this_nothing'); } else { $(logos_obj).removeClass('this_nothing'); } }); }); }; })( jQuery ); |
2. Membuat CSS
buatlah Css untuk mengatur tampilan layout form, disini saya membuat css dengan nama kartu-kredit.css berikut kode CSSnya
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.wrap-kartu { background: none repeat scroll 0 0 #ededed; box-shadow: 5px 5px 2px 0 #c3c3c3; color: #000; display: block; float: none; margin: 10% auto; max-width: 258px; padding: 20px 0; text-align: center; } .logo_kartu { display: table; float: none; list-style: outside none none; margin: 10px auto; padding: 0; } .logo_kartu li { border-bottom: 2px solid transparent; display: inline-block; float: left; height: 26px; margin: 4px; opacity: 0.2; padding: 0 0 6px; width: 49px; } .kartu-visa { background: url("img/visa.png") no-repeat scroll center center rgba(0, 0, 0, 0);/*sesuaikan url gambar */ } .kartu-mastercard { background: url("img/master-card.png") no-repeat scroll center center rgba(0, 0, 0, 0);/*sesuaikan url gambar */ } .this_mastercard > .kartu-mastercard, .this_visa > .kartu-visa{ border-bottom: 2px solid green; opacity: 1; } .wrap-kartu input { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #cbcbcb #cbcbcb #cbcbcb #afaf00; border-image: none; border-radius: 4px; border-style: solid; border-width: 1px 1px 1px 6px; padding: 6px 10px; } |
3. Membuat HTML form
setelah anda selesai membuat javascript dan css nya buatlah sebuah form HTML
|
1 2 3 4 5 6 7 8 |
<div class="wrap-kartu"> <ul class="logo_kartu"> <li class="kartu-visa"></li> <li class="kartu-mastercard"></li> </ul> <input id="checkout_card_number" type="text" size="20" pattern="[0-9]*" autocomplete="off" class="stripe_card_number" required="required" /> </div> |
4. tambahkan script DI <head>
jangan lupa menambahkan script di antara tag <head>…</head> untuk memanggil kartu-kredit.js dan file kartu-kredit.css
|
1 2 3 4 5 6 7 |
<link href="kartu-kredit.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.creditCardTypeDetector.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#checkout_card_number').deteksiKartuKredit({ 'credit_logo_kartu' : '.logo_kartu' }); }); </script> |
pada line 1 sesuaikan URL di mana anda menyimpan kartu-kredit.js dan kartu-kredit.css yang di buat pada point 1 dan 2.
untuk demonya bisa langsung anda lihat melalui link di bawah ini