We help IT Professionals succeed at work.

parse credit card swipe data to correct fields

cnshealthcare
cnshealthcare used Ask the Experts™
on
Hello all,

When you swipe a crefit card you get the following:

%BXXXXXXXXXXXXXXXX^LAST NAME/FIRST NAME ^YRMT101000000000010093436000000?;XXXXXXXXXXXXXXXX=YRMT10110093436?

WHERE XXXXXXXXXXXXXXXX is the credit card #, YR- expiration date year MT-expiration date month

I have a web form that will swipe a card's raw data into, I need a Java script that would take that card data and spit it up into human friendly fields like so:

Credit card #: XXXXXXXXXXXXXXXX
First Name: FIRST NAME
Last Name: LAST NAME
etc.

I will still need the raw data intact in the field it was swiped to but copy out the relevant data to other text fields in the form.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

Commented:
you can use the split function of javascript

<script type="text/javascript">

var str="%BXXXXXXXXXXXXXXXX^LAST NAME/FIRST NAME ^YRMT101000000000010093436000000?;XXXXXXXXXXXXXXXX=YRMT10110093436?";

str1 = str.split("^");

//str1(0) will have %BXXXXXXXXXXXXXXXX -- you can replace first 2 chars
//str1(1) will have LAST NAME/FIRST NAME , you can again split this with "/"
//And assign to variables
</script>

Author

Commented:
yeah, I don't know java at all, I am working only in php and mysql. would you mind helping out with the complete code?

This is the field where data is being camptured: <input id="textbox" type="text" name="trackdata"/>

and I need it like in

<input id="textbox" type="text" name="cc_num" value="HERE"/>
Avinash ZalaWeb Expert

Commented:
Try this:


// This code will populate the Credit Card Detail in the form Below:
<form name="ccDetail" id="ccDetail" method="post">
      <input type="text" name="cardNumber" id="cardNumber" value="">
    <input type="text" name="FirstName" id="FirstName" value="">
    <input type="text" name="LastName" id="LastName" value="">
</form>
<script type="text/javascript">

var str="%BXXXXXXXXXXXXXXXX^LAST NAME/FIRST NAME ^YRMT101000000000010093436000000?;XXXXXXXXXXXXXXXX=YRMT10110093436?";

str1 = str.split("^");
document.getElementById('cardNumber').value =str1[0];

var names = str1[1].split('/');
document.getElementById('FirstName').value =names[0];
document.getElementById('LastName').value =names[1];
</script>

Hope this helps
Addy
Most Valuable Expert 2011
Top Expert 2016

Commented:
Java and Javascript are not the same things.  If you want to do this in PHP, just submit the entire swipe string as is - and extract the fields you need inside the PHP script.

I find the information shown in the OP to be a little opaque.  Can you please post the data from a REAL credit card swipe made today?  You can change the credit card numbers to X, and obscure your name, but please leave all the other fields intact with respect to values and spacing.  Thanks.

Author

Commented:
Ok, still can't figure it out. Here is my sample file http://www.mydanceacademy.com/test.php

The way I want it to work is you click on the SWIPE CARD then a hidden text box appears where you swipe the card (data added for testing) and when that window goes away at }).keyup(function (e) {
        if($(this).val().substr($(this).val().length-1)=="?") {
 
to take that data and spit it up and show it in the fields below.

Thanks,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 
$(document).ready(function() {    
    $('a[name=modal]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);    
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        $(id).fadeIn(2000);
        $("#textbox").focus();
    });
    
    $("#textbox").blur(function (e) {
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    }).keyup(function (e) {
        if($(this).val().substr($(this).val().length-1)=="?") {
            $('#mask').hide();
            $('.window').hide();
        }
    });    
    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    });        
    
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });            
    
}); 
</script> 
<style> 
body {
font-family:verdana;
font-size:15px;
}
 
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:160px;
  height:32px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
#boxes #dialog {
  width:160px; 
  height:32px;
  padding:10px;
  background-color:#ffffff;
}
</style>
</head> 
<body> 
<a href="#dialog" name="modal">SWIPE CARD</a><br /><br />
<div id="boxes"> 
    <div id="dialog" class="window"><input id="textbox" type="text" value="" /></div>
    <div id="mask"></div> 
</div>

Card number: <input type="text" name="ccnum"><br />
Card exp month: <input type="text" name="ccnum"><br />
Card exp year: <input type="text" name="ccnum"><br />
Card holder name: <input type="text" name="ccnum"><br />

</body> 
</html>

Open in new window

Author

Commented:
REAL CARD SWIPE DATA: %BXXXXXXXXXXXXXXXX^PETRUTIU/FLORIN ^1303101000000000010093436000000?;XXXXXXXXXXXXXXXX=130310110093436?

it expires on 03/13, my last name is PETRUTIU and first name FLORIN

Author

Commented:
Correction: The form at the bottom should be.

Card number: <input type="text" name="ccnum"><br />
Card exp month: <input type="text" name="ccexp"><br />
Card exp year: <input type="text" name="ccyr"><br />
Card holder name: <input type="text" name="ccname"><br />
leakim971Multitechnician
Top Expert 2014

Commented:
Have a look to the following :


<html>
<head>
<script language="javascript">
	var str = "%BXXXXXXXXXXXXXXXX^PETRUTIU/FLORIN ^1303101000000000010093436000000?;XXXXXXXXXXXXXXXX=130310110093436?";
	function setFromCCS(ccs) {
		var index1 = str.indexOf("%B") + 2;
		var index2 = str.indexOf("^") + 1;
		var index3 = str.indexOf("^", index2 + 1) + 1;
		var cardNumber = ccs.substring( index1, index2 - 1);
		var expMonth = ccs.substr(index3, 2);
		var expYear = ccs.substr(index3 + 2, 2);
		var holderName = ccs.substring(index2, index3 - 1);
		document.getElementById("cn").value = cardNumber;
		document.getElementById("em").value = expMonth;
		document.getElementById("ey").value = expYear;
		document.getElementById("hn").value = holderName;
	}
</script>
</head>
<body onload="setFromCCS(str);">
Card number: <input type="text" name="ccnum" id="cn"><br />
Card exp month: <input type="text" name="ccnum" id="em"><br />
Card exp year: <input type="text" name="ccnum" id="ey"><br />
Card holder name: <input type="text" name="ccnum" id="hn"><br />
</body>
</html>

Open in new window

Multitechnician
Top Expert 2014
Commented:
In your page :

(and with some correction in the setFromCCS function)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 
$(document).ready(function() {    
    $('a[name=modal]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);    
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        $(id).fadeIn(2000);
        $("#textbox").focus();
    });
    
    $("#textbox").blur(function (e) {
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    }).keyup(function (e) {
        if($(this).val().substr($(this).val().length-1)=="?") {
            $('#mask').hide();
            $('.window').hide();
            setFromCCS($("#textbox").val());
        }
    });    
    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
        setFromCCS($("#textbox").val());
    });        
    
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });            
    
}); 

	function setFromCCS(ccs) {

		var index1 = ccs.indexOf("%B") + 2;
		var index2 = ccs.indexOf("^") + 1;
		var index3 = ccs.indexOf("^", index2 + 1) + 1;
		
		var cardNumber = ccs.substring( index1, index2 - 1);
		var expMonth = ccs.substr(index3, 2);
		var expYear = ccs.substr(index3 + 2, 2);
		var holderName = ccs.substring(index2, index3 - 1);
		
		$("#cn").val(cardNumber);
		$("#em").val(expMonth);
		$("#ey").val(expYear);
		$("#hn").val(holderName);
	}

</script> 
<style> 
body {
font-family:verdana;
font-size:15px;
}
 
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
 
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:160px;
  height:32px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
#boxes #dialog {
  width:160px; 
  height:32px;
  padding:10px;
  background-color:#ffffff;
}
</style>
</head> 
<body> 
<a href="#dialog" name="modal">SWIPE CARD</a><br /><br />
<div id="boxes"> 
    <div id="dialog" class="window"><input id="textbox" type="text" value="" /></div>
    <div id="mask"></div> 
</div>

Card number: <input type="text" name="ccnum" id="cn"><br />
Card exp month: <input type="text" name="ccnum" id="em"><br />
Card exp year: <input type="text" name="ccnum" id="ey"><br />
Card holder name: <input type="text" name="ccnum" id="hn"><br />

</body> 
</html>

Open in new window

Author

Commented:
B-E-A-UTIFUL!!!!!!!! Exactly what I needed.

Thanks a lot, I owe you!