jQuery Credit Card Form Formatting Plugin - Payment
File Size: | 22.6 KB |
---|---|
Views Total: | 13460 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jQuery Payment is an useful and simple jQuery plugin for E-commerce website to format and validate credit card form input field. Supported card types: Visa, MasterCard, American Express, Diners Club, Discover, UnionPay, JCB, Visa Electron, Maestro, Forbrugsforeningen, Dankort.
Features:
- Card number formatting
- Expiry formatting
- CVC formatting
- Restrict Numeric
- Disable input of invalid number
- Data validation on submit
- Cross browser. Supports old IE 7/8.
See also:
How to use it:
1. Include the latest version of jQuery library and jQuery Payment Plugin on your website
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.payment.js"></script>
2. Create a input field for credit card number
<form validate autocomplete="on"> <h2>Card number formatting</h2> <input type="text" class="cc-number" pattern="\d*" x-autocompletetype="cc-number" placeholder="Card number" required> </form>
3. The javascript
<script> jQuery(function($){ $('.cc-number').payment('formatCardNumber'); $('form').submit(function(e){ e.preventDefault(); $('input').removeClass('invalid'); $('.validation').removeClass('passed failed'); var cardType = $.payment.cardType($('.cc-number').val()); $('.cc-number').toggleClass('invalid', !$.payment.validateCardNumber($('.cc-number').val())); if ( $('input.invalid').length ) { $('.validation').addClass('failed'); } else { $('.validation').addClass('passed'); } }); }); </script>
Change logs:
v3.0.0 (2016-09-28)
- update
v2.0.0 (2016-08-24)
- update
v1.4.4 (2016-08-16)
- update
v1.4.3 (2016-07-07)
- update
v1.4.2 (2016-06-02)
- update
v1.4.1 (2016-05-04)
- Reduce Elo formats a bit more.
v1.4.0 (2016-05-03)
- Add support for 'Elo' credit card brand
v1.3.3 (2016-04-19)
- Allow 506-prefixed maestro cards.
- Fix single digit expiry > 2 with leading zero.
v1.3.2 (2015-08-06)
- Change MasterCard range to 51-55
v1.3.1 (2015-08-05)
- Fix Japanese IME input
v1.3.0 (2015-07-31)
- Support new MasterCard BIN ranges (222100–272099)
- bugfix
v1.2.3 (2015-03-27)
- DinarsClub of Fixed card number format
v1.2.2 (2015-02-03)
- improve Android expiry formatting
v1.2.1 (2015-01-22)
- Support Zepto
v1.2.0 (2015-01-21)
- update.
v1.1.4 (2014-08-28)
- update.
v1.1.2 (2014-08-19)
- Fixed: do not call indexOf on undefined
v1.1.1 (2014-08-14)
- rename slash to char in formatForwardSlashAndSpace()
v1.1.0 (2014-07-18)
- More card types
v1.0.0 (2014-07-17)
- More autocomplete updates
- Improve card type data
v0.1.3 (2014-05-23)
- update.
This awesome jQuery plugin is developed by stripe. For more Advanced Usages, please check the demo page or visit the official website.