クレジットカードの種類を特定してバリデーションまでしてくれるjQueryプラグイン「creditCardValidator.js」

日本ではあまり多くないが、稀にVISA/MASTERしか利用させたくないというECサイトがある。

この場合、決済代行会社などのAPIを利用すればわかるのだが、負荷がかかるのとユーザビリティを考えると最も良い方法とは言えない。

その場で分かるのが最も良く、それを実現するためのjQueryプラグインだ。

http://jquerycreditcardvalidator.com/

類似のものはいくつかあるようだが、自分がざっくり比較した感じだと戻り値の細かさや使いやすさから一番良いと感じた。

デモ


$('#number').validateCreditCard();

1	$('#number').validateCreditCard();

基本的にはこのように書くのだが、


$('#number').validateCreditCard( function(result) {});

1	$('#number').validateCreditCard( function(result) {});

このように書くことで結果を受け取れる


$(function() {
	$('#number').validateCreditCard( function(result) {
		$('#output').html('<p>ブランド: ' + (result.card_type == null ? '-' : result.card_type.name)
				 + '</p><p>バリデーション: ' + result.valid
				 + '</p><p>長さ: ' + result.length_valid
				 + '</p><p>Luhn: ' + result.luhn_valid + '</p>');
	});
});

$(function() {

$('#number').validateCreditCard( function(result) {

$('#output').html('ブランド: ' + (result.card_type == null ? '-' : result.card_type.name)

+ 'バリデーション: ' + result.valid

+ '長さ: ' + result.length_valid

+ 'Luhn: ' + result.luhn_valid + '');

});

今回はこのように書いた。

result.card_typeから何のカードか判断してはじいたり、アイコンを出すことも簡単に出来そうだ

8月2日追記

入力中にクレジットカードのブランドを判定してロゴを出力するようにしたのと、

バリデーションがtrueにならなければ決済ボタンを押せなくした

デモ


var brand = result.card_type.name;
var img = "";
if ( brand.match( /visa/ ) ) { img = "visa.jpg" }
else if ( brand.match( /master/ ) ) { img = "master.jpg" }
else if ( brand.match( /jcb/ ) ) { img = "jcb.jpg" }
else if ( brand.match( /amex/ ) ) { img = "amex.jpg" }
else if ( brand.match( /diners/ ) ) { img = "diners.jpg" }