fix for Lost sales. Credit Card entry

[elightbox]

We just realized that some customers were abandoning Checout-step3 because they received a “Credit Card Number is incorrect” message.

The problem is that some customers are entering spaces with their credit card numbers as it shows on their card xxxx xxxx xxxx xxxx

Smart programming would take care of this problem by stripping all spaces or dashes, however this is not available here. Also, the message above cannot be edited.

to help aleviate this problem fine

[CustomerInfo_creditcardnumber]</b></td><td><input type="text" name="ff[id]_ocardno" size="30" class="txtBoxStyle">

replace with

[CustomerInfo_creditcardnumber]</b></td><td><input type="text" name="ff[id]_ocardno" size="30" class="txtBoxStyle" value="Numbers only. No spaces" onClick="this.value=''">

This will put a message in the box that says not to enter spaces.

[piaf]

On a related side note, not only would I like to see spaces and dashes stripped out of credit card numbers, I'd also like to see spaces, dashes and parentheses stripped out of phone numbers. Having all that "junk" in the phone numbers makes it nearly impossible to search for a customer based on their phone number.

C'mon 3dC, this is basic programming 101 kind of stuff. :)

[Barry]

Also, the message above cannot be edited to help aleviate this problem fine

Are you referring to the error message "10 (Settings/Design/System Messages) that reads "Your credit card number is not valid" or is that shown for different reasons?

[elightbox]

Are you referring to the error message "10"

Same wording, different message. Support said it is an internal javascript validation that cannot be changed.

[piaf]

Yeah, basically, there's only one message to cover a large number of possible reasons a credit card might be declined. So unfortunately, the message has to be very generic and doesn't actually HELP the customer figure out why their credit card has not passed scrutiny.

[hanzoswords]

awesome tweak!

[BrigadeGames]

Thanks, I have already made this change.

Since switching carts 2.5 months ago and now being required to have cc processing done online during the order we have seen a dramatic shift from credit card usage to PayPal (albeit PayPal express.)

The PayPal Express button on the view cart page is a big driver of this I believe.

I can look into my authorize.net account and see where customers try multiple times and are rejected. I have a hard time believing that entering dashes or spaces causes the declines. It could however depending if the Authorize.net gateway does that stripping/cleaning of the number or not. My old processor software did that automatically.

Ten years ago when I first started with ecommerce I saw the cart abandonment issue but that was in the early days of people not understanding they have to enter their card number a certain way, getting the 3 digits or address wrong, etc. At that point I removed the online cc processing and collected digits. It was more work but 99% of the charges worked out of the gate.

I really would have thought that customers would have been used to ordering online by now. It amazes me how many still screw up entering their address, the three digits or zip code where they get their billing statement.

[andres.choi]

Hey Guys,

I do have a little script that you can use on the checkout3.html template page that will check and allow only numbers to be entered in the CC # field.

BEFORE making any changes, make sure to make a BACKUP copy of the template file just in case something goes wrong!

Add this javascript code at the beginning of the template page:

<!-- START: NUMERIC ONLY FOR CC FIELD -->
<script language="Javascript">
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
</script>
<!-- END: NUMERIC ONLY FOR CC FIELD -->

Add the following piece of html code:

onkeypress="return isNumberKey(event)"

inside the input tag for the CC Field found here:

<tr><td class="item" align="right"><b>[CustomerInfo_creditcardnumber]</b></td><td><input type="text" name="ff[id]_ocardno" size="30" class="txtBoxStyle"><img src="assets/templates/common/images/error2.gif" width="12" height="12"></td></tr>

so it looks like this:

<input type="text" onkeypress="return isNumberKey(event)" name="ff[id]_ocardno" size="30" class="txtBoxStyle">

An additional note: I did find two identical input fields in my template. The one that I modified is the one that's enclosed between the tags

<!--START: CCGATEWAY--> and <!--END: CCGATEWAY-->

I hope you find this useful!

[satcity3543]

Thank you

Thank you, thank you, thank you. I've had many customers call when the website "isn't working" because they entered spaces in their credit card numbers. I entered this code as you described, and the problem is gone!

[elightbox]

andres.choi, thank you for the code. Very straight forward and does stop all characters except numbers.

One thing I added is this to the tag: Alt="Numbers only. No spaces or dashes"

I made the modification and tested and so far no problem except that with this you can't paste into the field for some reason. Auto fill works though.

[Pack Secure]

I tried this code, but it did not work. So we just added text to state numbers and no spaces. Is this code for multi page checkout only?