11:28:00 AM
3HK0OKUK4
BTW, if you want your posted code to render with formatting, just enclose it in the tags:
...
--stein
Stein -
Now they want to use a card reader so they can swipe cards..
A couple of years ago we had a client wanting to integrate a credit card reader for a special quick order page to be used at their convention, which they used again just last month. I've taken the payment portion of that web page and embedded the javascript which parses the card reader output. The HTML file is at the bottom of this message.
I have included just the payment entries (CC#, expiration date options and name on card) and a bit of the CSS and all the necessary javascript. This is all embedded instead of linked as separate files. It also loads jquery hosted at google.
Basically the card reader will mimic the keyboard - when the card is scanned, everything contained in the magnetic stripe is pushed into the keyboard buffer, just as if you had typed in the full entry. As Rick mentioned, this requires that the browser focus be placed on a specific input.
In my sample page, you focus on the CC# field and then scan the card. When you tab out of the input field, the javascript 'onchange' handler will parse the full entry from the card reader and populate the appropriate input fields.
The CVC # is not included in the magnetic strip, so that has to be manually entered if required.
If you copy and paste the following line into the CC# field of the sample page below, and then tab out, that should essentially be the same as scanning a credit card with the reader, and the various fields should get populated..
%B5234123412341239^DOE/JOHN^1610101000000000000000000000907001000?;5234123412341239=16101010000090700100?
For the scanner, we used part #21040107 purchased from www.posguys.com. This was described on their site at that time as "Mag-Tek Mini-Wedge Swipe Reader Color: Pearl White with Tracks 1 2 3 USB Cable Keyboard Emulation".
Hope this helps.
- Mike McDonald
Software Design of Kentucky
(I hope the below renders properly - I was thinking the sample HTML file could be an attachment to this message, but don't see that option viewing the message board through the web interface)
****************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Card Scanner</title>
<style type="text/css">
#conventionorder th { text-align: center; }
.convorddiv { clear: both; }
#convord_info { width: 60%; margin-right: auto; margin-left: auto; height: auto;}
#convord_payments { width: 355px; margin-right: auto; margin-left: auto; margin-bottom: 2em; height:auto; }
#scancardprompt { display: none; text-align: center; }
#scancardprompt span { background-color:yellow; font-weight: bold; margin:3px;}
#conventionorder table {
border-style: solid;
border-width: 1px;
border-color: #000;
}
#conventionorder table table {
border: none;
}
#conventionorder td,
#conventionorder th { padding: 3px; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* sdkCardReader parses the credit card data into the form fields */
var cardParsed = false;
$(function() {
$("#CC_Num").change(function () { checkForReaderInput($(this).val()); } )
.focus(function() { $('#scancardprompt').fadeIn('slow'); })
.keypress(function() { $('#scancardprompt').hide(); });
$('#ConvOrdForm').submit(function () { return checkPaySubmit(); });
$(':input:visible').each(function(i,e){ $(e).attr('tabindex',i) });
if (!$("#adminAlert").length && $("#CC_Num").length) {
if ($("#CC_Num").val().length==0) { $("#CC_Num").focus(); }
else { $("#btnsubmitorder").focus(); }
} else { $('#conventionorder input:visible:first').focus(); }
});
function checkForReaderInput(string) {
if (string.substring(0,2) == "%B") {
string = string.replace('%B', '');
var arr = string.split('^');
if (arr[0].length == 16) {
$('#CC_Num').val(arr[0]);
$('#CC_ExpMn').val(arr[2].substring(2, 4));
$('#CC_ExpYr').val('20'+arr[2].substring(0, 2));
var nameArr = arr[1].split('/');
$('#CC_Name').val(nameArr[1]+' '+nameArr[0]);
setMOP(arr[0].substring(0,1));
}
cardParsed = true;
$('#sdkinputid_CC_Num span.errortext').hide();
return false;
}
setMOP(string.substring(0,1)); // for manual CC# entry
}
function checkPaySubmit() {
if (cardParsed) {
cardParsed = false;
$('#CC_CVC').focus();
return false;
}
return true;
}
function setMOP(ccnum) {
// set #CC_MOP based on first number of CC_Num..
switch (ccnum) {
case "0": $('#CC_MOP').val('AX'); break;
case "4": $('#CC_MOP').val('VC'); break;
case "5": $('#CC_MOP').val('MC'); break;
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="pagebody">
<div id="conventionorder">
<form action="YourMethod.wcp" method="post" id="ConvOrdForm">
<div id="convord_payments" class="convorddiv">
<h4>Payment Information</h4>
<div id="scancardprompt"><span>Scan card or type in number</span></div>
<input type="hidden" name="WebTransID" id="WebTransID" value="-1" />
<div id="sdkccinfodiv">
<table>
<tr>
<th class="headerrow"><label for="CC_Num">Card Number</label></th>
<td><div id="sdkinputid_CC_Num"><input type="text" name="CC_Num" id="CC_Num" value="" size="22" autocomplete="off" /></div></td>
</tr>
<tr>
<th class="headerrow"><label for="CC_ExpMn">Expiration Date</label></th>
<td><div><select name="CC_ExpMn" id="CC_ExpMn">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12
</option>
</select> /
<select name="CC_ExpYr" id="CC_ExpYr">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
</select></div></td>
</tr>
<tr>
<th class="headerrow"><label for="CC_MOP">Method of Payment</label></th>
<td><div id="sdkinputid_CC_MOP"><select name="CC_MOP" id="CC_MOP">
<option value="MC">Mastercard</option>
<option value="VC">Visa Card</option>
<option value="CA">Cash</option>
</select></div></td>
</tr>
<tr>
<th class="headerrow"><label for="CC_Name">Name on card</label></th>
<td><div id="sdkinputid_CC_Name"><input type="text" name="CC_Name" id="CC_Name" value="" size="30" /></div></td>
</tr>
<tr>
<th class="headerrow"><label for="CC_CVC">CVC</label></th>
<td><div id="sdkinputid_CC_CVC"><input type="text" name="CC_CVC" id="CC_CVC" value="" size="6" style="float:left;" /></div></td>
</tr>
</table>
</div><!-- /sdkccinfodiv -->
<p></p><center><input type="submit" name="btnPaymentSubmit" id="btnPaymentSubmit" value="Update Payment Information" /></center>
</div><!-- /convord_payments -->
</form>
</div><!-- conventionorder -->
</div><!-- /pagebody -->
</div><!-- /wrapper -->
</body>
</html>
****************************
This isn't really a WC issue but I'm not sure which forum would be more appropriate. Here's the situation:
The customer uses Authorize.net's Sever Integration Module to handle credit card payments. It was easily integrated with our web based product but they also wanted to use it with our desktop app. We accomplish that by having the VFP code bring up a browser instance using IE automation which takes the user to the Authnet site. When the payment is complete, Authnet is set up to call our web app, where the results are posted to the customer's database.
Now they want to use a card reader so they can swipe cards instead of typing numbers into the Authnet web form. Can this be done, working strictly from the client side? There does not appear to be any sort of support for card readers in the SIM service (altho Authnet makes a separate VPOS web product which does have that support). If we were working with the foxpro form there are ActiveX controls we could use to poll the reader, but here we want to enter the data into a remote site via the browser session.
Any suggestions would be appreciated.
--stein