Credit Card Expiration Date Format Not Accepted Error

[jwilliamsen]

I hired a developer to make a checkout for me and so I do not know what version I have. It is not listed in the file. I have had several customers report and I have seen it myself where the credit card expiration date is not accepted no matter what format is tried. This happened to me using my own credit card one day and not the next on the same credit card. I have developed the rest of the site myself but am not sure how to fix this random problem.

[melloware]

Does it not like the two digit year? Or the format of "10/22" ? Not sure what it is not liking unless there is more in the error message from the vendor?

[jwilliamsen]

When it happened to me, I tried all different formats and it was never accepted. This is an old screen shot so it was not a date in the past at the time. Should I attach the card.js file?

[melloware]

You can try and use a newer version on our site but it seems like that error message is coming from your vendor and not from card.js So you need to debug the value being sent to the payment vendor API and why its being denied.

[jwilliamsen]

I'm afraid to change it out since I don't know what he did to it. I will take a look at the input.

[melloware]

i think the bug is right here:

expirationDate = $.trim($("#txtExpirationDate").val()).replace(" / ", "");

He is replacing " / " with "" so the number becomes 1023 instead of 10/23 and then it splits by first and second 2 digits "10" then "23"

[jwilliamsen]

Input form // php

<PRE><plaintext>
<!--
<label class="sr-only" for="txtExpirationDate">Exp Date:</label>
<input type="tel" class="checkout-input checkout-exp" RequiredDisplayName="Expiration Date" placeholder="MM/YY" id="txtExpirationDate" name="expiry" maxlength="7" onblur="evaluateField(this)">
-->
</plaintext></PRE>

// javascript/ajax

function evaluateField(obj){
var jObj = $(obj);
if(jObj.attr("RequiredDisplayName") != ""){
  jObj.css("border-color", ($.trim(jObj.val()) == "" ? "red" : "#b3c0e2 #bcc5e2 #c0ccea"));
}
		
function evaluateFormFields()...	
expirationDate = $.trim($("#txtExpirationDate").val()).replace(" / ", "");

function sendCCDataToAnet()...	
var ccExpireMonth = expirationDate.substr(0,2);
var ccExpireYear = expirationDate.substr(2,2);

[jwilliamsen]

Most of the orders go through ok. It is a very rare problem (I HOPE!) I can't get the input to show but it's there.

[melloware]

Yep you will need to debug or throw an error if ccExpireMonth is not 2 digits and ccExpireYear is not 2 digits so you can get to the bottom of it.

[jwilliamsen]

What is card.js expecting to receive?

Card.prototype.attachHandlers = function() {
var expiryFilters, numberInputFilters;
numberInputFilters = [this.validToggler('cardNumber')];
if (this.options.masks.cardNumber) {
numberInputFilters.push(this.maskCardNumber);
}
bindVal(this.$numberInput, this.$numberDisplay, {
fill: false,
filters: numberInputFilters
});
QJ.on(this.$numberInput, 'payment.cardType', this.handle('setCardType'));
expiryFilters = [
function(val) {
return val.replace(/(\s+)/g, '');
}
];
expiryFilters.push(this.validToggler('cardExpiry'));
bindVal(this.$expiryInput, this.$expiryDisplay, {
join: function(text) {
if (text[0].length === 2 || text[1]) {
return "/";
} else {
return "";
}
},
filters: expiryFilters
});

[melloware]

you will have to debug,..

[jwilliamsen]

Ok thank you for your help

[jwilliamsen]

Ok I do see that the error message that says "Please provide valid expiration year." is coming back from Authorize net. Thanks for pointing me in the right direction.

[melloware]

Post back here if you figure it out.