Swipe Feature

This example code shows how to implement a swipe feature to the Epayment form.

Overview

A swipe feature can be added to the Epayment form for merchants who are interested in utilizing their form for swiping transactions for their customers directly instead of connecting the form to a website or sending the link to their customers. Please keep in mind, the swiper must be supported by USAePay. It must also have the USAePAy encryption key injected in order for swiped transactions to go through the gateway.

HTML

The first step is to copy this section and paste it below on your Epayment Form:

[CardSwipeScript] 
<script>
function hideCVVonSave()
{
  if(document.epayform.UMcommand.value == 'cc:sale') {
     document.getElementById('cvvline').style.visibility = 'hidden';
   }
}


function cancelSwipe()
{

        var doSubmit = false;
        if (track1data != undefined && track1data.length > 5) {
            doSubmit = true;
        }

    document.getElementById('swipepanelbg').style.display='none';
    document.getElementById('swipepanel').style.display='none';     
    document.onkeyup = ""; 
    tmpSwipeData="";
    track1data="";
    track2data="";
    asciiRead="";
    targetReadLen=0;
        //alert("SWIPE CANCELED");

    if(doSubmit) {
            document.forms["epayform"].submit();
        }
}


function onLoadImpl() {
    if ('[UMcomments]' == 'swipe') {
        SwipeCard();
    } 


}

</script>

Second step, find this section on the form:

<body link="#000080" vlink="#000080" alink="#000080" text="#000000" bgcolor="#D4D7E4">

Replace it with this:

<body link="#000080" vlink="#000080" alink="#000080" text="#000000" bgcolor="#D4D7E4" onLoad="onLoadImpl()">

<body link="#000080" vlink="#000080" alink="#000080" text="#000000" bgcolor="#D4D7E4" onLoad="hideCVVonSave()">

Third step, add these fields to the hidden fields section of the Epayment Form:

<input type="hidden" name="UMauthCode" value="[UMauthCode]">
<input type="hidden" name="UMcardRef" value="[UMcardRef]">
<input type="hidden" name="UMorderid" value="[UMorderid]">
<input type="hidden" name="UMclerk" value="[UMclerk]">
<input type="hidden" name="UMcardLookup" value="[UMcardLookup]">
<input type="hidden" name="UMponum" value="[UMponum]">
<input type="hidden" name="UMstreet" value="[UMstreet]">
<input type="hidden" name="UMzip" value="[UMzip]">
<input type="hidden" name="UMnontaxable" value="[UMnontaxable]">
<input type="hidden" name="UMname" value="[UMname]">

Fourth step, find this section:

<tr>
            <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana" size="2">Card Number:</font></td>
            <td bgcolor="#F0F0F0" width="450">
            <input type="text" name="UMcard" size="17"></td>
        </tr>
        <tr>
            <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana" size="2">Card Expiration 
            Date: </font></td>
            <td bgcolor="#F0F0F0" width="450">
            <input type="text" name="UMexpir" size="4"> MMYY</td>
        </tr>
        <tr>
            <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana"><font size="2">
            Card ID (CVV2/CID) Number:<br>
&nbsp;</font><font size="1">[<a target="_blank" href="/cvv.htm">What is the Card 
            ID?</a>]</font></font></td>
            <td bgcolor="#F0F0F0" width="450">
            <input type="text" name="UMcvv2" size="5"></td>
        </tr>

Replace it with this section:

<tr>
            <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana" size="2">Card Number:</font></td>
            <td bgcolor="#F0F0F0" width="450">

<input type="text" name="UMcard" size="17" value="[UMmaskedCard]" onChange="document.epayform.UMcardRef.value=''">[CardSwipeButton]</td>
        <tr>
            <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana" size="2">Card Expiration 
            Date: </font></td>
            <td bgcolor="#F0F0F0" width="450">
            <input type="text" name="UMexpir" size="4" value="[UMexpir]" ></td>
        </tr>
        <tr id="cvvline">
            <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana"><font size="2">
            Card ID (CVV2/CID) Number:<br>
&nbsp;</font><font size="1">[<a target="_blank" href="/cvv.htm">What is the Card 
            ID?</a>]</font></font></td>
            <td bgcolor="#F0F0F0" width="450">
            <input type="text" name="UMcvv2" size="5"></td>
        </tr>