Credit Card Number & Accessibility

[wayneinc]

Does anybody know if it's possible to split the input box for the credit card number into four separate boxes each containing four digits?

This would increase usability of the checkout form and it would also help order processing at our end when reading the numbers.

Thanks

[wjcampbe]

It would break the PSP link (if you use one).

If you don't use a PSP, look around the forum for Kermy's post on validating/formatting the entered name/address data. I am sure that can be hacked to introduce spaces or dashes into the CC number.

[wayneinc]

I am using PSP unfortunately.
I was thinking more along the lines of using javascript to concatenate the four values into a single value, then sending that value as the NETQUOTEVAR:PAYMENTCARDNUMBER variable.
Hopefully somebdoy has implemented the split input form and can give me some pointers.

Thanks for your reply

[Robert_Taylor]

Hi,

Yes this could be for a javascript programmer or would be one for the wishlist.

Regards,
Robert.

[pinbrook]

If you are using a PSP you don't get to see the CC number....

[Kermy]

The script here will do as Bill says, allowing you to format the CC number how you like. But like Pinbrook pointed out, if you are using a PSP then your Actinic pages won't handle the card input.

Anyway, if you definately want four boxes and are using the Actinic pages, you could get it to work like this:

1) Open Act_Order02.html and find this:

<input type="TEXT" name="PAYMENTCARDNUMBER" size="20" maxlength="50" value="NETQUOTEVAR:PAYMENTCARDNUMBER" AUTOCOMPLETE="off">

Replace it with:

<input type="text" id="pcn" name="PAYMENTCARDNUMBER" />
<input type="text" id="pcn1" size="4" maxlength="4" onblur="setPCN()" /> <input type="text" id="pcn2" size="4" maxlength="4" onblur="setPCN()" /> <input type="text" id="pcn3" size="4" maxlength="4" onblur="setPCN()" /> <input type="text" id="pcn4" size="4" maxlength="6" onblur="setPCN()" />

<script type="text/javascript">
function $(el){
el=(document.layers ? document.layers[el] : (document.getElementById ? document.getElementById(el) : (document.all ? document.all[el] : (document[el] ? document[el] : false))));
return el;
}

function setPCN(){
$("pcn").value=$("pcn1").value+""+$("pcn2").value+""+$("pcn3").value+""+$("pcn4").value;
}
</script>