detect-card-js
Automatically detect payment card types with this JQuery plugin
Usage
It's fairly simple:
- Locate your card number input field with JQuery i.e.
$('input#cardNumber')
- Call
.detectCard()
on the your input field - Listen for the
cardChange
event
Example
$("input#cardNumber").detectCard().on("cardChange", function(e, card) {
// Assuming input of card number: 4111 111 1111 1111
console.log(card.type); // => "visa"
});
Custom supported card types
You can also choose which card types you would like to support
$("input#cardNumber").detectCard({ supported: ['visa', 'mastercard', 'maestro']});
$("input#cardNumber").on("cardChange", function(e, card) {
// Assuming input of card number: 4111 111 1111 1111
console.log(card.type); // => "visa"
console.log(card.supported); // => true
});
Demo
You can check out a live demo here: [Detect card type jquery] 1
Card types supported
Here is a list of available card types that will be detected:
visa
mastercard
maestro
american-express
discover
jcb
diners-club
Enjoy