Jonathan's Blog - Latest Comments

Re: Using a magnetic card reader with jQuery

ShonGale — Thu, 03 May 2012 13:27:47 -0000

Johnathan you are awesome. I modified your stuff to be automatic using ajax. I will share.

echo json_encode($cardRet);?>
Hope that helps someone!

Re: Using a magnetic card reader with jQuery

Jonathan Stoppani — Thu, 03 May 2012 03:13:16 -0000

Sure, it's everything that is supported by jQuery: http://api.jquery.com/jQuery/#...

Re: Using a magnetic card reader with jQuery

ShonGale — Wed, 02 May 2012 14:24:54 -0000

Hello again. Can you list the values that can go into the .observe() function.

Re: Using a magnetic card reader with jQuery

ShonGale — Wed, 02 May 2012 14:22:52 -0000

Anybody still out there? It appears to work flawlessly with a MagTek 21040108 HID USB scanner .. $45.00 new. Has to be HID and where ever you want to capture the info has to have the focus. Not a field but using his code the current window. Works awesome.
Here's the code:
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><title>jQuery Card reader</title><script src="/rez/support/jquery/jquery-1.7.1.min.js" type="text/javascript"></script><script charset="utf-8" src="/rez/support/jquery/jquery.cardreader.js" type="text/javascript"></script><script type="text/javascript">jQuery(function () { // Create a new reader instance var reader = new CardReader(); // Feed it an object to observe (this could also be a textbox) reader.observe(window); // Errback in case of a reading error reader.cardError(function () { alert("A read error occurred"); }); // Callback in case of a successful reading operation reader.cardRead(function (value) { $('form input#card_number').val(value); //$('form').submit(); });});</script>

Swipe your card and press the submit button

<form action="testcard.php" method="post"> <input id="card_number" name="card_content" type="hidden"> <input id="cardsub" name="cardsubmit" type="submit" value="Submit">
<hr>
'; echo sprintf("firstChar = %s, start = %d, caretStart = %d, cardEnd = %d
",$firstChar, $start, $caretStart, $cardEnd); echo '
Card Number: ' . $cardNum . '
'; echo sprintf("caretPos = %d, nameEnd = %d, cardHolder = %s
",$caretPos, $nameEnd, $cardHolder); echo 'Card Type: ' . $cardType; if ($cardType == "MasterCard") echo '
Customer Name: ' . $firstName . ' ' . $midInit . ' ' . $lastName . '
'; else echo '
Customer Name: ' . $firstName . ', ' . $lastName . '
'; echo sprintf("expDate = %s, expYear = %s, expMonth = %s
", $expDate, $expYear, $expMonth);}?>
You will notice that I commented out the submit command in his code because it wouldn't verify as to the submit button. Plus I didn't want to submit immediately. Have fun this code base works great.</form>

Re: Using a magnetic card reader with jQuery

Sunny85indore — Wed, 22 Feb 2012 02:04:56 -0000

Hello, i had this code implemented on some url... Now i am trying to swipe the card after opening this url in browser but nothing happens in browser... Card swipe only provides output to a notepad file (mine card reader is MSR213U).. Please guide through.....

Re: Using a magnetic card reader with jQuery

BlackberryAddict — Tue, 14 Feb 2012 18:25:03 -0000

I've done everything mentioned in this blog, yet my card reader doesn't send anything. Is there a way to dump the actual method being called when the card is being swiped?

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):

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.