Certain merchants may want to create a convenience fee or handling charge that is added to the transaction total. We have example code for both flat fees and percentage fees.

This code is for adding a flat fee to each transaction that occurs on your payment form. This is not a split payment. For information on split payments, please see Split Payments. The below example assumes you are using the default payment form without any changes.

1. Log into your USAePay merchant gateway. Go to “Settings”, then “Source Keys”. Select the source key you are using and click “Edit”. Click “Edit Customization to Epay Form”.
2. In the header of the document, add the following code:

   1. <script>
      var servicefee = 5 ;
      function addCharge() 
      {
      var baseamount = document.epayform.baseamount.value ; 
      var total = (baseamount*1) + servicefee ;
      document.epayform.UMamount.value = total ;
      document.getElementById('totalamount').innerHTML = total ;
      }
      </script> 

3. “servicefee” will be the amount that you are adding on to the transaction. Locate the below command in the list of hidden values, and delete it:

   1. <input type="hidden" name="UMamount" value="[UMamount]">

4. Find the following code in your form:

   1. <tr>
      <td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Order Amount:</font></td>
      <td bgcolor="#F0F0F0" width="450">[UMamount]
      </td>
      </tr>

5. Replace it with the following:

   1. <tr>
      <td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Payment Amount:</font></td>
      <td bgcolor="#F0F0F0" width="450"><input type="text" name="baseamount" size=10  onChange="addCharge()">
      </td>
      </tr>
      <tr>
      <td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Service Fee ($5):</font></td>
      <td bgcolor="#F0F0F0" width="234"> 5.00
      </td>
      </tr>
      <tr>
      <td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Total Charge:</font></td>
      <td bgcolor="#F0F0F0" width="450"><input type="hidden" name="UMamount" value="[UMamount]"><div id="totalamount"></div>
      </td>
      </tr>

6. Save the changes to your form. Once the form is saved, the customer will be able to type in the amount they are paying and automatically have a convenience fee added to the transaction total. The customer will not be able to edit the amount of the fee or the grand total of the transaction.

• In the header of the document, add the following code:

<script>
 
function doTotal()
 
{
  var form = document.epayform;
  var amount = form.UMcustom1.value = form.UMcustom1.value.replace(/[^0-9\.]/, "");
  var fee = Math.round(amount * .02*100)/100; // Don't forget to change the percentage here
  var total = Math.round(((amount*1)+fee) *100)/100;
 
  form.UMcustom2.value=fee;
  form.UMamount.value=total;
 
  document.getElementByName('UMcustom2').innerHTML = fee; 
  document.getElementByName('UMamount').innerHTML = total;
 
}
</script>

1. “servicefee” will be the amount that you are adding on to the transaction. Locate the below command in the list of hidden values, and delete it:

   1. <input type="hidden" name="UMamount" value="[UMamount]">

2. Find the following code in your form:

   1. <tr>
      <td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Order Amount:</font></td>
      <td bgcolor="#F0F0F0" width="450">[UMamount]
      </td>
      </tr>

3. Replace it with the following:

<tr>
<td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Payment Amount:</font></td>
<td bgcolor="#F0F0F0" width="450"><input type="text" name="UMcustom1" value="[UMcustom1]" size=10 onChange="doTotal()"></td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Service Fee (2%):</font></td> // Change the percentage here as well!
<td bgcolor="#F0F0F0" width="450"><input type=text name="UMcustom2" value="[UMcustom2]" readonly="readonly" onChange="doTotal()"></td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234" align="right"><font size="2" face="Verdana">Total Charge:</font></td>
<td bgcolor="#F0F0F0" width="450"><input type=text name="UMamount" value="[UMamount]" readonly="readonly" onChange="doTotal()"></td>
</tr>

<script>
      var servicefee = 3 ;
      function addCharge() 
      {
      var baseamount = document.epayform.baseamount.value ; 
      var total = (baseamount*1) + servicefee ;
 
      document.epayform.UMamount.value = total ;
      document.getElementById('totalamount').innerHTML = CurrencyFormatted(total) ;
      }
 
</script>
 
<script>
function CurrencyFormatted(amount)
{
	var i = parseFloat(amount);
	if(isNaN(i)) { i = 0.00; }
	var minus = '';
	if(i < 0) { minus = '-'; }
	i = Math.abs(i);
	i = parseInt((i + .005) * 100);
	i = i / 100;
	s = new String(i);
	if(s.indexOf('.') < 0) { s += '.00'; }
	if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
	s = minus + s;
	return s;
}
// end of function CurrencyFormatted()
 
 
</script>

Html code is the same as in the example #1