Card

[morgan2233]

Hello, All works fine however when someone enters there details, the card doesnt change type for example showing its a visa like in the demo

[QuintonC]

I had a similar issue where my card would not update types at all. No matter how many different (correct) card numbers I provided, it would not display the card type.

So I went about looking into the source code for this library and found a solution myself.

$("#credit-number").blur(function() {
        // NOTE: $("#credit-number") is what my field name is. 
        // This can/should be replaced with your credit card number input field.
	check_card_type($(this).val());
});

function check_card_type(card_number) {
	var cards = Payment.getCardArray(); // Returns the complete cards validation
	var card_type = "";

	for (var i = 0; i < cards.length; i += 1) {
	  	if (cards[i].pattern.test(card_number)) {
			card_type = cards[i].type;
			console.log(card_type); // the credit card type
		}
	}

	if (card_type != "") {
		set_card_type(card_type);
	} else {
		set_card_type("unknown");
	}
}

function set_card_type(type) {
	var card_types = Card.prototype.cardTypes.join(' ');
	
	// Remove identifying classes.
	$(".jp-card").removeClass("jp-card-unknown");
	$(".jp-card").removeClass("jp-card-identified");
	$(".jp-card").removeClass(card_types);
	
	if (type != "" && type != "unknown") {
		$(".jp-card").addClass("jp-card-" + type);
		$(".jp-card").addClass("jp-card-identified");
	} else {
		$(".jp-card").addClass("jp-card-unknown");
		$(".jp-card").removeClass("jp-card-identified");
	}
}

[morgan2233]

so where would i add that code to make it work?

[QuintonC]

@morgan2233 Just in the JavaScript. Replace "credit-number" with your credit card number input field and it will call those functions to check the card type and format it properly.

[morgan2233]

Do i put it on the web file or inside the .js file

[QuintonC]

In theory either should work. It's best practice to put it in your .js file though.

[morgan2233]

Still doesnt work sadly, im using the jquery one if that makes a difference to your code

[thiagok]

Thanks @QuintonC! Clever solution :)