carlraymond / jquery.cardswipe Goto Github PK

Love this plugin!

I have a small issue with it though. I have an implementation of this that works successfully on Safari and Chrome on a desktop. However, it doesn't capture any card swipes on Chrome for iOS. I can't tell where it is breaking since there are no developer tools for Chrome for iOS.

Safari on iOS works just fine though. Furthermore, if I use the developer tools on Chrome for Windows, on my desktop, and change my device type to iPAD, it works just fine.

Any idea why this may not be working on Chrome for iOS?

Hi,

Do you know if any Android or iOS scanners will generate the proper output to be used this way?

Thank you

For some reason neither the success for nor the error function is being called. I have reviewed #27 and #28, but neither were helpful to me. The information from the card has nothing in line 1, line 2 = ;004089025410=? and line 3 is empty. I might just be dense, but I am not sure where to look. The console.log only shows the output like

59: ;
IDLE -> PENDING2
 48: 0
PENDING2 -> READING
48: 0
52: 4
48: 0

etc.

I would appreciate any assistance. 

I am facing issues where this solution works perfectly on safari, firefox, IE 11 but not on IE10.

Has anyone come across this issue before and would you by any chance find a solution for it?

I took a couple of magnetic card readers that were made for smart phones. One from FirstData, another from AnywhereCommerce. Pligged them into iPhone's phone jack; both didn't seem to work on iOS in either Safari or Chrome using your demo page. I also ordered a couple of chinese generic magnetic readers from Amazon but they didn't arrive yet, so I can't tell if those will work or not. In general, do those phone card readers have to be of a certain type? Thanks!

I see it returns card number, first name, last name, expire month and year. How can i get CVV number?

The first track on our student id cards is left empty for if they live in the dorms, this is used as there room key. Since we are a commuter college, most students, by far, do NOT live in the dorms. Therefore, it seems I am having a very difficult time getting this to work, because as it says, it expects there to be something on the first track.

Is there anything I can do to get this to work?

In a plain text file, this is what the reader outputs from my card.

;0090073029910=?

I am trying to change set jquery.cardwipe's success handler at a point after initialization so that I can capture some local variables within the handler and post them to my server upon successful swipe. However, I am having trouble updating it.

Cardswipe is initialized like so (in appStore.js):
$.cardswipe({
firstLineOnly: false,
parsers: [ "visa", "mastercard", "amex", "discover", "generic" ],
success: appStore.goodScan,
error: appStore.badScan
});

With appstore (in appStore.js):
const appStore = observable({
station: null,
route: 'categories',
goodScan(data) {
console.log('A card was read successfully.');
},
badScan(err) {
console.error('card read error', err);
},
});

I have tried (in pages/page.js, where pages is a directory in appStore.js's directory):
this.props.appStore.goodScan = (cardData) => {/Code/},
this.setState({this.props.appStore.goodScan: (cardData) => {/Code/},
$.cardswipe.success = (cardData) => {/Code/}

Is there a proper way to update the handler?

I am new to React, so sorry if this is a React fundamental point that I am missing.
Thank you so much for your help
Gabriel

Track 3 wasn't showing up on the demo until I messed with the regexp to accept a plus for that track:
var pattern = new RegExp("^(%[^%;\\?]+\\?)(;[0-9\\:<>\\=]+\\?)?([+;][0-9\\:<>\\=]+\\?)?","i");

I have two slightly different models of card reader and both of these output "+" to denote the start of track 3 data. Other than that minor detail, this plugin is exactly what I needed. Thanks.

Are there plans to add the Discover Network RegEx, or can someone assist in writing the parser

What's the license on this project? Can you please include some license text in the source?

I can succesfully swipe the card. I got the alertbox with data at Line 2.
but after that success.cardswipe is not getting called. I want to call an ajax call after succesfully swipe the card. I have not fired npm install or any kind if node thing. I want to do without node.js. only pure jquery.
I am not keeping gruntfile.js in my project

I have created a custom parser for ID cards, but the type is always being recognized as a generic card.

The entered value is always something like: %BOUTZAMAT&SOULAIMAN CHARLOTTEAGER 28 2 TH

I have the following parser, created from your example in the docs:

var socialSecurityCard = function (rawData) {
            var pattern = new RegExp("^%B");
            var match = pattern.exec(rawData);
            if (!match) return null;

            // Extract the data
            var cardData = {
                type: "socialcard",
                lastName: "some firstname",
                firstName: "some lastname",
                idNumber: "some id number"
            };

            return cardData;
        }

        var successCallback = function (data) {

            console.log(data.type);

            // Is it a custom card
            if (data.type == "socialSecurityCard")
                return;

            // Is it a payment card?
            if (data.type == "generic")
                return;

            // Copy data fields to form
            $("#idnumber").val(data.idNumber);
            $("#firstname").val(data.firstName);
            $("#firstname").val(data.lastName);
        };

        $.cardswipe({
            firstLineOnly: true,
            success: complete,
            parsers: ["socialSecurityCard", "generic"],
            debug: false
        });

But the debug log always shows "type" of generic.

Hi there,

Based on #24 I can successfully parse cards with the generic parser that look something like:

;0001234567?

However, it does not appear that it parses cards where the beginning starts with % but is not followed by a letter. For example, raw output in vim outputs something like:

%1034567^SMITH/MIKE^987654321?;987654321 or %62772061397873^00000000^X?

Am I missing something here or do I need to alter any configuration to get cards that start with % + number to work?

I'm posting this as a newbie and hope I'm not out of line, here goes.
I have found a jquery slot machine web app https://github.com/josex2r/jQuery-SlotMachine
When a user taps a button the reels spin like a slot machine.
I run a coffee shop, my aim is to issue "Coffee Membership" cards.
I will display the jquery slot machine in a Samsung tablet on my counter.
The tablet will have a card reader attached.
When a member pays they will be invited to swipe their card which will fire an event to spin the wheels to win a free coffee.
The cards will not be payment cards.
So my question is, would this be doable?
If the answer is yes, I will pursue finding a developer to build the application for me.
Thanks in advance for any guidance.
@CarlRaymond

I'm using a Scriptel MagStripe 1X5 LCD Pad and it supports EasyScript:
http://www.scriptel.com/products/magstripe-1x5-lcd-signature-pad
http://www.scriptel.com/developers/easyscript-api

This is what I had been using for credit cards. (Your example only works with very specific student IDs. Please include more samples.)

^\%B(\d{13,16})\^([A-Z ]+)\/([A-Z ]+)\^(\d{2})(\d{2}).*?$

I modified the regex to detect "!STCARD A " follow by the card code "%B".

    var pattern = /^(\!STCARD A \%B|\%B)(\d{13,16})\^([A-Z ]+)\/([A-Z ]+)\^(\d{2})(\d{2}).*?$/;

This regex works when I test parsed scan values using http://regex101.com/, but it resulted in 2 page scrolls (caused by the space characters) and doesn't work due to the current logic to scan for only a single character code (to switch from IDLE to PENDING state) and then scan for a single character to determine whether to continue scanning or not.

I would really prefer to keep using your script in the case that a non-Scriptel magstripe device is used.

(Side note: I'm also using Stripe's payment library to determine if the card # is valid and determine card type. This is a great library to use with cardswipe. https://github.com/stripe/jquery.payment )

Looks like it's expecting upper case characters, but when caps is on, my reader is outputting lower so the 1st character check fails. Change the check to "((e.which >= 65 && e.which <= 90) || (e.which >= 97 && e.which <= 122))".

I have MSR90 USB 3-Track Magnetic Credit Card Reader. Ebay link.
When I swipe the credit cards I get the following formats:

%B5217XXXXXXXXX&BONBONI.JOHNNYçMR &XXXXXXXXXXXXXXXXXXXX 199 :şXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXX19901:

%b4564XXXXXXXXXXXX&hargreaves.tımothy w &XXXXXXXXXXXXXXXXXXXXXXXXXXXXX000:Ş4564XXXXXXXXXXXX-XXXXXXXXXXXXXXXX0000:

But I don't get any result when I try demo-simple.html and demo-events.html

I only get the following output.

Card: Generic
Line1:
Line2:
Line3:

Have I got the wrong reader or do I need to add a Custom Card Parser?

console.log

IDLE -> IDLE
21:39:56.534 jquery.cardswipe.js:181 37: %
21:39:56.535 jquery.cardswipe.js:161 IDLE -> PENDING
21:39:56.539 jquery.cardswipe.js:181 66: B
21:39:56.539 jquery.cardswipe.js:161 PENDING -> READING
21:39:56.553 jquery.cardswipe.js:181 57: 4
21:39:56.554 jquery.cardswipe.js:181 57: 9
21:39:56.555 jquery.cardswipe.js:181 52: 4
21:39:56.557 jquery.cardswipe.js:181 51: 3
........
.....

During the scanning process, there's no visual indication that anything is happening until the script has completed reading and initiates parsing. Using Firefox with dev tools, there's a 1-3 second pause during the "pending/reading" process and the operator may be tempted to rescan or press a key. (Google Chrome is much faster, but I still want to show something on the screen that something is happening.)

I initially added callbacks so that I could block the UI (using BlockUI and "bindEvents:false" option so keyboard would continue to work) and displayed a "Processing..." message or spinner. Since the "prefix" update, my hacks aren't working properly and I was wondering if you could add these features so I can replace my library with yours without having to use an internal DIFF tool. (I'm not that savvy with GitHub yet.)

I added "onScanStart" & "onScanEnd" options to the config and defaulted both to null. Here's my attempt (and it's currently 4 commits behind yours.):
https://github.com/JamoCA/jquery.cardswipe

In the "Prefix" branch, you added some console.log calls and they were all commented out. These were helpful during testing. You should consider adding a "debugMode" option and then output those to the developer console (or user-defined function to output to the screen). Also Include the "scanbuffer" before it's finally passed to the parser function.

Hi,

Sorry to write this as an issue but I didn't know how else I could ask you this ...

I wanted to ask if you are able to give some examples/recommend of good credit card readers that you worked in the past but also, is it possible to use javascript on an IOS or Android device that would be connected to a card reader - through bluetooth or that jack -, or the keyboard mimic is only possible on computers ?

Thank you in advance !

Regards,
Dan

Only seeing initial %B in parser. Removing that $("input").blur() line of code fixes the issue.

I'm trying out the jquery.cardswipe plugin, but having difficulties with the demo-simple.html. The success callback function looks like it should be displaying text in the status and properties elements.

I've verified that my magnetic stripe card reader can read data successfully from some custom ID badges into Notepad. When using the demo-simple.html example with the debug parameter set, the console displays the array of chars that were read in from the card (which indicates the plugin is getting data). BUT the success() function never gets called and never generates the display text it should. To troubleshoot it, I added a console.log in the success function, but it never gets called. (I've tried it with both a custom parser and the generic one.)

Not sure if this is a factor, but it appears that when the card reader sends the data it also adds an ENTER, which makes the page reload.

An example of the data encoded on the card looks like this:
%01234^JOHN DOE^126 SALEM STREET?

Here's the code as I've modified it. What am I missing?

` var successCallback = function (data) {
console.log( "My Output" );

		$("#status").text("Success!");

		$("#properties").empty();

		// Iterate properties of parsed data
		for (var key in data) {
			if (data.hasOwnProperty(key)) {
				var text = key + ': ' + data[key];
				$("#properties").append('<li class="data">' + text + '</li>');
			}
		}
	}

	var error = function () {
		$("#status").text("Failed!");
		$(".line").text("");
	}


	// Parser for Union Badge format
	var unionParser = function (rawData) {
		var pattern = new RegExp("%([0-9]{4,6})^([A-Z ]+))^([A-Z0-9]+)?");
    	var match = pattern.exec(rawData);
		if (!match) return null;

    	var cardData = {
    		type: "union",
	    	        badge: match[0],
        	fullname: match[1]
		};

		return cardData;
	}

	$.cardswipe({
		firstLineOnly: true,
		success: successCallback,
		parsers: unionParser,
		error: error,
		debug: true
	});

`

Just an FYI regarding $.error() being deprecated as of v1.8. (I was using some libraries that were impacted by the remove of live() and toggle().)
https://api.jquery.com/category/deprecated/

I cannot seem to get the parser to recognize the AAMVA format. There are other plugins that do that, but I'm already using your plugin to parse payment card data so I need a modification that will parse driver's licenses.

Here's the configuration I'm using:

$.cardswipe({
        firstLineOnly: false,
        success: cardSwipeComplete,
        parsers: [aamva, "generic"],
        debug: true,
        error: errorCallback,
        prefixCharacter: '%',
    });

I write to the console whenever any one of the states is entered, but they never fire. In debug mode I get into the PENDING state, since I've changed the prefix from the standard "%B" to simply "%", but success, start, end, failure, none of those states gets entered.

I have not yet written the aamva parser, so I was hoping you could help. Here's the GIT that another developer published for that purpose: https://github.com/winfinit/aamvajs

Here's the standard for AAMVA (its actually in a table, but all the fields are there in three tracks):

AAMVA Driver’s License Format

TRACK 1
Field ID Character Contents Length*
a Start Sentinel (%) 1
b State or Province 2
c City 13
d Name 35
e Address 29
f End Sentinel (?) 1
g Linear Redundancy Check
(LRC) Character 1

TRACK 2
Field ID Characte r Contents Length
a Start Sentinel (;) 1
b ANSI User Code 1
c ANSI User ID 5
d Jurisdiction ID/DL 14
e Expiration date 4
f Birthdate 8
g Remainder of Jurisdiction ID/DL 5
h End Sentinel (?) 1
i Linear Redundancy Check
(LRC) Character 1

TRACK 3
Field ID Character Contents Length
a Start Sentinel (%) 1
b Template Version # 1
c Security Version # 1
d Postal Code 11
e Class 2
f Restrictions 10
g Endorsements 4
h Sex 1
i Height 3
j Weight 3
k Hair Color 3
l Eye Color 3
m ID # 10
n Reserved Space 16
o Error Correction 6
p Security 5
q End Sentinel (?) 1
r Linear Redundancy Check
(LRC) Character 1

Hello,

I have reason to allow a semicolon to be typed normally, as well as a percent sign.

To allow for simple typing of those 2 characters (I dont want the user to have to press twice), I have to do 2 things:

1. I need to configure my scanner to prefix the data with another character. This I can do. I am going to use the '`' character since the user will not have to type that character.

2. I then need to configure the jquery.cardswipe listener to ignore semicolons and '%', and instead listen for the '`' character.

I am assuming the only option I have is to revise some of the jquery.cardswipe.js code manually.
Is this correct?

I originally thought that setting a prefixCharacter achieved this, but I realized that is for a prefix before a semicolon or % sign and a semicolon and percent sign is still listened for (which I dont want).

I suppose I will have to change the Keypress listener part of the code and replace the e.which == 59 to whatever number is for this character '`'.

Am I on the right path?

Note: in my case I am only concerned with track 2.

Thank you

I am succesfully scanning a card and I see the green overlay with the correct card data but the overlay pops up twice and afterwards the data is not populated into the form fields. Using the demo file that comes with the package.

Tried Safari/Firefox/Chrome.

Am I missing something?