Jonathan's Blog - Latest Comments

Re: Using a magnetic card reader with jQuery

Jazzy — Tue, 17 Jan 2012 09:10:27 -0000

@nilesh u talking about my comment or overall page?

Re: Using a magnetic card reader with jQuery

Nilesh — Tue, 17 Jan 2012 08:29:43 -0000

Works flawless.....

Re: Using a magnetic card reader with jQuery

Jazzy — Tue, 10 Jan 2012 11:08:16 -0000

Any cheap card reader you guys can recommend for this kind of project? I found one on ebay, not sure will it work with this :

http://www.ebay.com/itm/Honeyw...

Re: Using a magnetic card reader with jQuery

Evan Larsen — Wed, 30 Nov 2011 11:34:02 -0000

I didnt need to do all that fancyness with the timing of when keys were pressed. I just had to record the card reader and then submit the form once done. I stuffed the cc data into a hidden field.. heres my code (I'm using asp.net and also jquery):

<script type="text/javascript"> //this attaches the keyup event to the html element to capture all keypress' and puts them in the hidden field $(function () { var btnSubmit = document.getElementById('<%= btnSubmit.ClientID %>'); btnSubmit.focus(); $('html').keypress(function (e) { var keyPressed = e.which; var hiddenField = document.getElementById('<%= creditCardDetailText.ClientID %>'); if (keyPressed != 13) { hiddenField.value += String.fromCharCode(keyPressed); } }); }); </script>

the (keypressed != 13) makes sure I dont capture the enter key after its done reading.

I got the idea to do it like this after looking through your code.. Thanks!

Re: Using a magnetic card reader with jQuery

John — Mon, 28 Nov 2011 13:38:07 -0000

Rick, let us know if you find a IE work around.

On a side note if your using an RFID reader and all it posts is the number and then enter, so no track or end senitel is the start and end bits still required?

Re: Using a magnetic card reader with jQuery

Rick — Fri, 11 Nov 2011 15:36:11 -0000

Update: I still am having issues, but at least I am moving a little closer to getting this to work in all browsers. For anyone else having issues, If you change the jQuery read.observe object to document, instead of window, IE will at least read in all the characters. I am having an issue however with the call back. After the last information is read, it is not firing the callback function reader.cardRead in IE 8, and IE9 in compatibility mode. Any infomation you can provide would be greatly appreciated.

Re: Using a magnetic card reader with jQuery

Rick — Wed, 02 Nov 2011 02:41:34 -0000

Correction... The code does work in IE9 as long as compatibility mode is off. Does not work at all in IE8. Any help is appreciated.

Re: Using a magnetic card reader with jQuery

Rick — Wed, 02 Nov 2011 02:39:28 -0000

Anyone having any issues with IE? I have this working great on all browsers (Chrome, Firefox, Safari, and Opera) , but sadly, it does not work in IE8 or IE9. I also need this to work in compatibility mode. When switched into compatibility mode, the javascript errors out at not understanding what CardReader even is. It does not see it as an object class. Any help would be appreciated.

Re: Using a magnetic card reader with jQuery

Danieliser — Mon, 08 Aug 2011 03:50:59 -0000

I am trying to get this to work with jquery 1.6.2.. My card reader works fine on your timing test page as well as in notepad or in anything else for that matter.. I got your script set up and a form field to set the value to.. i know your script is set up as when i swipe on any normal page it tries to find the data read from the card using the ctrl+f search box.. but on my page i set up nothing happens when i swipe.. any ideas? incompatible with 1.6.2?

Re: Using a magnetic card reader with jQuery

Jonathan Stoppani — Thu, 26 May 2011 12:26:06 -0000

If your Card Reader is seen as an HID, then yes. Note that it may need some adaptation, but the working principle will stay the same.

Re: Using a magnetic card reader with jQuery

myfundi — Thu, 26 May 2011 12:21:17 -0000

Does this jquery and cardreader work with any magnetic swipe card reader and thereby eliminates the need for the use of the dll that comes with it?

If this is the case than it will save me quite a bit on the web app I am working on.

Re: Using a magnetic card reader with jQuery

Jonathan Stoppani — Fri, 29 Apr 2011 10:05:15 -0000

Joe, actually no, I don't see any problems other than the "immaturity" of the code. It is a good base to build upon but still has some bugs and limitations as exposed in the comments above. Other than that it should work greatly... ;-)

Re: Using a magnetic card reader with jQuery

Joe — Fri, 29 Apr 2011 10:03:00 -0000

Thanks for this article. I am doing some feasibility research on building a Point of Sale system through a web browser. Do you see any reason why I couldn't use this jquery example to capture credit cards info swiped through an MSR?

Re: Using a magnetic card reader with jQuery

Jose — Fri, 18 Mar 2011 11:22:29 -0000

Kevin,

Your card reader must support "HID" ("Human Interface Device"), which is a standard whereas a card reader (or barcode scanner, etc) behaves just like a standard computer keyboard (i.e., in a sense it "emulates" a keyboard presses).

Hope that helps.

- jose

Re: Using a magnetic card reader with jQuery

Scott — Wed, 29 Dec 2010 15:42:38 -0000

Where did you get the value for the error track ID? I can not find any documentation that shows an error track ID of é (Hex E9) . The PDF referenced on this page does not show that. It states that an error will be: 'TrackID' + 'E' + 'ES' + 'ENTER' but does not state that the TrackID is anything different from the three main TrackIDs.

I'm still trying to figure out my problem, but I can say that if I capture a value in the cardError callback, it is the track data. So, the data is getting read, but it seems that an isError is getting set incorrectly.

Re: Using a magnetic card reader with jQuery

Kevin — Tue, 14 Dec 2010 20:02:44 -0000

has anyone got this to work? my card reader when i swipe a card nothing happens on the screen.

Re: Using a magnetic card reader with jQuery

Jonathan Stoppani — Sat, 31 Jul 2010 10:56:03 -0000

Here you go: http://gist.github.com/502257
As you can see the body contains a form with an invisible field, the script will show you an alert box if a read error occurs or submit the page with the results (the card content can then be read from the URL). Also turn on the console output in your web browser to receive debugging messages from the class itself. ;-)

Re: Using a magnetic card reader with jQuery

Ursula — Sat, 31 Jul 2010 10:35:55 -0000

Thanks for the reply Jonathan.
"The HTML above is not enough, you should already have a complete working page and the snippet is the scripting part to add to capture the reader input."
Could you elaborate? Would it be enough to make a <div></div> and call the function within? Some minimalistic test page code would be appreciated (I'm new to jQuery....)
Btw, the key-delay test page was just amazing.

Re: Using a magnetic card reader with jQuery

Nirmal — Sat, 31 Jul 2010 07:40:06 -0000

Thank you for the reply. I achieved it by checking whether any input element is in focus and inserted the start sentinel value to that element through the timeout event.

// extend the jquery to have a custom selector.
// this is used to check if an element has its focus.
// usage: $("input:focus").doStuff();

jQuery.extend(jQuery.expr[':'], {
focus: "a == document.activeElement"
});

And modified the first timeout event to be like this:

this.timer = setTimeout(function () {
ob.started = false;
ob.finished = false;
ob.isError = false;
ob.input = "";
$("input:focus").val($("input:focus").val() + String.fromCharCode(ob.track_start));
}, this.timeout);

This solved the problem if someone tried to enter % in any of the input elements in the page.

Re: Using a magnetic card reader with jQuery

Jonathan Stoppani — Sat, 31 Jul 2010 05:33:48 -0000

You can add the CardReader listener to the body of the page and add a KeyListener on the input which stops the event propagation. This way if the user wants to use the card reader the input shall not be selected.

The more elegant solution would be to implement point 3 of he TODOs and refire the event if the operation times-out

Re: Using a magnetic card reader with jQuery

Nirmal — Fri, 30 Jul 2010 23:28:06 -0000

I am having a situation which this code makes difficult. Our login page accepts either username+password or a card swipe. Whenever I try to key in the % symbol (start sentinel) in the username or password box, it won't show up. Instead the observer is activated and it's preventing the % entry. This will be a problem because special characters are usually allowed in passwords.

Is there any way to workaround this problem? Thank you for your time.

Re: Using a magnetic card reader with jQuery

Nirmal — Fri, 30 Jul 2010 23:20:07 -0000

My fault, I didn't notice the constructor.
Thanks for the update.

Re: Using a magnetic card reader with jQuery

Jonathan Stoppani — Fri, 30 Jul 2010 17:36:33 -0000

Hi Ursula,
The HTML above is not enough, you should already have a complete working page and the snippet is the scripting part to add to capture the reader input. Also remember that it works only if the window has focus!
You can test your reader at some extent using the linked test page: http://static.garetjax.info/ma...

As for the question about the end sentinel, there are no code lines to modify, it suffices to pass the track_end argument to the CardReader constructor (I think a value of "\r" should do the trick).

Hope it helps ;-)

Re: Using a magnetic card reader with jQuery

Ursula — Fri, 30 Jul 2010 15:50:07 -0000

Nice code, can't get it working though.
Is the HTML (i suppose?) above enough? Shouldnt there be any HTML elements to test it (like body?)
Also, how do I replace the track end "_" with an ENTER key (Asc 13) ?
As it is now, i have a scanner emulated as a normal keyboard, scanning text or numbers - nothing happends on the .html though, not even when typing with manual keyboard... ideas?

Re: Using a magnetic card reader with jQuery

Jonathan Stoppani — Fri, 30 Jul 2010 06:28:26 -0000

Thanks for the feedback!
I should really expand a little the script and wrap it in a jQuery plugin, maybe with a little more documentation too...