Case Study: Donation Form
The following is a case study for creating a simple donation page hosted on your website that connects to USAePay for secure processing. This is a great starting off point for religious donations, non-profit organizations, or any merchant accepting a variable dollar amount from the client through a payment form.
Below you can download the necessary source code files. Edit the HTML source code with your favorite editor (Notepad, TextEdit, Dreamweaver) to input your source key and edit any of the templated text already there for you. Save the files in the original format. These files will need to be uploaded via a service such as FTP, or something similar, to your website.
Once you've uploaded the files you can access them through the browser. Clicking on the button submits the form to USAePay and brings the customer to the secure payment area on USAePay's servers. The customer completes the payment process by entering their payment information.
Download zip with HTML source (XHTML 1.0 Transitional) and button image
ePayment Form fields used
The form uses the following fields to post to USAePay:
-UMkey - This is the source key that connects you as a valid merchant on our gateway (Required)
-UMcommand - This indicates the type of a transaction, sale. (Required)
-UMinvoice - This allows you to pass a numerical invoice number for record keeping. (Required)
-UMamount - A text box displayed for customer to enter a decimal (0.00) amount. (Required)
-UMdescription - A text box for any comments left by the donor
-UMcustemail - A place for the donor to enter their email address for a confirmation receipt.
The form is not limited to only these fields. Others may be used. Please customize based on your preferences.
HTML Source for Donation form
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/*<![CDATA[*/
div.c6 {text-align: center}
p.c5 {text-align: center}
span.c4 {font-family: Verdana; font-size: 80%}
span.c3 {font-family: Verdana}
span.c2 {color: #FFFFFF; font-family: Verdana, Arial; font-size: 120%}
span.c1 {color: #FFFFFF; font-family: Verdana, Arial; font-size: 200%}
/*]]>*/
</style>
</head>
<body>
<form action="https://www.usaepay.com/interface/epayform/">
<input type="hidden" name="UMkey" value="HBDy1XU40KsourceKeyHere7a5iOh2HP" />
<input type="hidden" name="UMcommand" value="sale" />
<input type="hidden" name="UMinvoice" value="[invoice]" />
<input type="hidden" name="UMcustreceipt" value="yes" />
<div class="c6">
<table border="0" width="700" cellpadding="4" cellspacing="0">
<tr>
<td bgcolor="#9999FF" width="692" colspan="2"><strong><span class="c1">Donate for a cause</span> <span class="c2"><br />
Money For Charity</span></strong></td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="692" colspan="2"> </td>
</tr>
<tr>
<td bgcolor="#C4C7D4" width="692" colspan="2"><span class="c3"><strong>Donor Information:</strong></span></td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234"> </td>
<td bgcolor="#F0F0F0" width="450"> </td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234" align="right"><span class="c4">Donation Amount:</span></td>
<td bgcolor="#F0F0F0" width="450"><input type="text" name="UMamount" value="[Amout Here 00.00]" /></td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234"> </td>
<td bgcolor="#F0F0F0" width="450"> </td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234" align="right"><span class="c4">Comments:</span></td>
<td bgcolor="#F0F0F0" width="450">
<textarea name="UMdescription" cols="40" rows="5">
Enter your comments here...
</textarea>
<br /></td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234"> </td>
<td bgcolor="#F0F0F0" width="450"> </td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234" align="right"><span class="c4">Email Address:</span></td>
<td bgcolor="#F0F0F0" width="450"><input type="text" name="UMemail" size="20" value="[Your email address here]" /></td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="692" colspan="2"><span class="c4"> </span></td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234"> </td>
<td bgcolor="#F0F0F0" width="450"> </td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="234"> </td>
<td bgcolor="#F0F0F0" width="450"> </td>
</tr>
<tr>
<td bgcolor="#F0F0F0" width="692" colspan="2">
<p class="c5"><input type="image" src="usaepaysecurebuttongray3.gif" value="Continue to Payment Form" /></p>
<hr /></td>
</tr>
</table>
</div>
</form>
</body>