Capture credit card information from card reader into an uneditable text field

Question

I'm newbie in terms of Javascript. Here's my problem:

I wish to capture credit card information from a card reader and then process it. So far, I've been able to capture dummy credit card data in an HTML textbox field - its no rocket science actually, 'cos the card reader input is just a set of keyboard events when a card is swiped through a card reader. The issue is that it works only when there is a cursor focus on a text field. If i turn the textfield into a read only box, it doesn't work - which is my exact requirement. I should be able to mask the input, show a couple of *s and I should be able to make the field non-editable. I'm hoping this could be done using a transparent div placed on the textbox - but I have no idea how that can be achieved.

I'm open to other ideas too.

Glyconeogenesis

It sounds like you want the text field to be both editable (by the keyboard events from the card reader) and read-only? – Survivor

Umm..thats kind of contradictory I know - but here's the deal : I need it that way 'cause the user should not be able to edit the data. Also, the credit card capture works only when there is a "focus" on a field - or anywhere for that matter. I mean, I tried opening up a normal text editor and the credit card reader was able to transmit the data to the place where the cursor was placed inside the text editor. That's where I'm stuck - how do I keep the cursor focus but make the field non editable at the same time? Any javascript magic that can help me? – Glyconeogenesis

Note that there's no way of making a submitted browser form truly uneditable, you can only prevent accidental edits not malicious ones & validate the result server-side. – Islet

I am sure you are correct. I'm just trying to prevent accidental edits. With all the Firebugs and Tamper Data - nothing is safe anymore in the web world :) – Glyconeogenesis

Answer 1

You can use javascript to set a disabled text field's value, and to get keystroke event data through document.onkeydown = function(e) { ... }. No need for hidden divs.

I assume you have other fields on your page, which will make it difficult to know when to capture the card reader data. Are you fortunate enough that your credit card reader sends some unique first character(s) so you know the keyboard events are coming from the reader and not user keystrokes? If so, then you can listen for those particular key strokes so you don't have to worry about setting focus. Otherwise maybe consider a button like "Read Credit Card" that has an on("click") function set to read the next xx digits.

Here's some debugging code you can use to see if your reader sends any unique characters that you can listen for:

document.onkeydown = function(d) {
    console.log( d.which ? d.which : window.event.keyCode);
};

It's conceivable that there's some other unique event information when the reader is used. Maybe check the device's manual.

Massarelli

great answer! I'm looking to create a page with just the words "Please swipe your card" and when the user swipes it should capture the keystrokes, input them into hidden fields and submit the form. Can you please share the code of how to make such a thing? It would be greatly appreciated. Thanks. – Wilek

Answer 2

To expand on the credit card side of what Zach has said...

Please look at the Wikipedia page on financial magnetic stripe cards for a description of the card track formats that you will encounter. Your reader will output the data with a carriage return at the end.

One option would be to scan all keystrokes and if you detect the start sequence %B start buffering, and then store it where you need to when the carriage return is received. Also a failsafe if someone happens to type in %B is to have an keystroke time out as the reader will type far faster than the user.

%B4111111111111111^LASTNAME/FIRST I ^YYMM###..###?;4111111111111111=YYMM###..###?[CR]

Kailakaile