Link to home
Start Free TrialLog in
Avatar of Florin Petrutiu
Florin PetrutiuFlag for United States of America

asked on

parse credit card swipe data to correct fields

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.
Avatar of Om Prakash
Om Prakash
Flag of India image

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>
Avatar of Florin Petrutiu

ASKER

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"/>
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
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.
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

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

it expires on 03/13, my last name is PETRUTIU and first name FLORIN
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 />
Avatar of leakim971
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

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
B-E-A-UTIFUL!!!!!!!! Exactly what I needed.

Thanks a lot, I owe you!