Posted by lsommerer on March 19, 2009 at 9:04pm
I had to add an online donation page to our website recently, and didn't have a lot of time to do it. Instead of trying to learn Ubercart, I thought I would just write the bare minimum that we needed to get going. I had some experience with authorize.net from a project a I did about 6 years ago, and thought what we wanted would be very simple. Alas, Authorize.net had changed things around a bit and my solution didn't turn out quite as nice as I had hoped (It takes 2 pages before you get to Authorize.net).
You can check it out at http://lincolnlutheran.org/donate/online --feel free to make a donation ;^) UPDATE: We've taken the page down while we prepare a solution using the simple donation or ubercart modules
The first page asks for the donation amount, the second page takes the donation amount and computes Authorize.net's fingerprint for the transaction, asks for a little more info that our development people wanted and submits it to Authorize.net for payment processing.
Here's the first page, nothing special here. Ignore the ugly javascript.
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==""||value<0.01)
{alert(alerttxt);return false;}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(x_amount,"Please enter a donation amount.")==false)
{document.donateForm.x_amount.focus();document.donateForm.x_amount.value="";document.donateForm.x_amount.style.backgroundColor="#ffcccc";return false;}
}
}
</script>
<form name='donateForm' method='post' action='http://lincolnlutheran.org/friends/donate/online2' onsubmit="return validate_form(this)">
<p>
<fieldset>
<legend>
Please choose the amount of your gift:
</legend>
<input type="radio" name="gift" value="50.00" onclick="document.donateForm.x_amount.value='50.00';document.donateForm.x_amount.disabled=true;document.donateForm.step1.style.color='#ff0000';document.donateForm.x_amount.style.backgroundColor='#ffffff';" /> $50.00<br />
<input checked type="radio" name="gift" value="100.00" onclick="document.donateForm.x_amount.value='100.00';document.donateForm.x_amount.disabled=true;document.donateForm.step1.style.color='#ff0000';document.donateForm.x_amount.style.backgroundColor='#ffffff';"/> $100.00<br />
<input type="radio" name="gift" value="200.00" onclick="document.donateForm.x_amount.value='200.00';document.donateForm.x_amount.disabled=true;document.donateForm.step1.style.color='#ff0000';document.donateForm.x_amount.style.backgroundColor='#ffffff';"/> $200.00<br />
<input type="radio" name="gift" value="other" onclick="document.donateForm.x_amount.disabled=false;document.donateForm.x_amount.focus();"/>
Other: $ <input type='text' disabled size='10' name='x_amount' value='100.00' onFocus="if (this.value=='50.00'||this.value=='100.00'||this.value=='200.00') {this.value='';document.donateForm.step1.style.color='#000000';}" onBlur="if (this.value=='') {document.donateForm.gift[3].checked=false;} else {document.donateForm.step1.style.color='#ff0000';}"/>
</fieldset>
</p>
<input type="submit" name="step1" value="Step 1: Confirm Donation Amount" onclick="document.donateForm.x_amount.disabled=false"/>
</form>The second page has a little PHP to calculate the fingerprint, and insert values from authorize.net:
<?php
// load vars.php where the login and transaciton key are specified
include ("vars.php");
// Receive the posted amount and format it as a dollar amount without the currency symbol
$amount = number_format(trim($_POST["x_amount"],"$"),2);
// Generate a random sequence number (required by SIM API)
$sequence = rand(1, 1000);
// Generate a timestamp
$timestamp = time ();
// The following lines generate the SIM fingerprint. PHP versions 5.1.2 and
// newer have the necessary hmac function built in. For older versions, it
// will try to use the mhash library.
if( phpversion() >= '5.1.2' )
{ $fingerprint = hash_hmac("md5", $login . "^" . $sequence . "^" . $timestamp . "^" . $amount . "^", $key); }
else
{ $fingerprint = bin2hex(mhash(MHASH_MD5, $login . "^" . $sequence . "^" . $timestamp . "^" . $amount . "^", $key)); }
?>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value==""||value=="(required)")
{alert(alerttxt);document.donateForm.list_me_as.style.backgroundColor ="#ffcccc";return false;}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(list_me_as,"Please tell us how to list your name.")==false)
{list_me_as.focus();return false;}
}
}
</script>
<p>
[img_assist|nid=5006|title=|desc=|link=node|align=right|width=150|height=undefined]
Our Annual Fund Drive turns individual gifts of all sizes into
a collective pool of support for Lincoln Lutheran. It is alumni,
parents, grandparents, and friends of the school, all working
together to make a difference.
<br clear="all" />
</p>
<!-- This form will post to itself to begin with -->
<form name='donateForm' method='post' action='<?php echo $URL; ?>' onsubmit="return validate_form(this)">
<!-- Invoice and description are specified in the vars.php file -->
<input type='hidden' name='x_invoice_num' value='<?php echo $invoice; ?>' />
<input type='hidden' name='x_description' value='<?php echo $description; ?>' />
<!-- Amount is hidden here, but there is also a field for display only below -->
<input type='hidden' name='x_amount' value='<?php echo $amount; ?>' />
<p>
<fieldset>
<legend>
Thank you for choosing the amount of your gift:
</legend>
Donation Amount: $
<input disabled type='text' size='10' name='display_amount' value='<?php echo $amount; ?>' />
<input disabled type="button" value="Step 1: COMPLETED">
<a href="http://lincolnlutheran.org/friends/donate/online">change donation amount</a>
</fieldset>
</p>
<p>
<fieldset>
<legend>
Please tell us a little bit about yourself (check all that apply):<br />
</legend>
<input type="checkbox" name="i_am_an" value="Alumni"> I am an alumni of Lincoln Lutheran.<br />
<input type="checkbox" name="i_am_a" value="Relative of a current LL student"> I am a relative of a current Lincoln Lutheran student.<br />
<input type="checkbox" name="i_am_a" value="Relative of a former LL student"> I am a relative of a former Lincoln Lutheran student.<br />
<input type="checkbox" name="i_am_a" value="Member of a LL association church"> I am a member of an association church.<br />
<input type="checkbox" name="i_am_a" value="Current or former LL employee"> I am a current or former Lincoln Lutheran staff member.<br />
<input type="checkbox" disabled name="other" value="">
<input type='text' name='i_am_also_a' size='59' value='other (please specify)' onFocus="if (this.value==this.defaultValue) {this.value='';document.donateForm.other.checked=true;}" onBlur="if (this.value=='') {this.value=this.defaultValue;document.donateForm.other.checked=false;}"/>
</fieldset>
</p>
<p>
<fieldset>
<legend>
How should we list your name?
</legend>
List as: <input type='text' id='LMA' name='list_me_as' value='(required)' size='55' onFocus="if (this.value==this.defaultValue) this.value='';" onBlur="if (this.value=='') {this.value=this.defaultValue;} else {this.style.backgroundColor ='#ffffff';}"/><br /><br />
For Example:
<blockquote>
Dr. & Mrs. John Smith<br />
John & Jane Smith<br />
The Jane Smith family<br />
John Smith & Family<br />
</blockquote>
</fieldset>
</p>
<!-- Insert the remaining required fields -->
<input type='hidden' name='x_fp_sequence' value='<?php echo $sequence; ?>' />
<input type='hidden' name='x_fp_timestamp' value='<?php echo $timestamp; ?>' />
<input type='hidden' name='x_fp_hash' value='<?php echo $fingerprint; ?>' />
<input type='hidden' name='x_login' value='<?php echo $login; ?>' />
<input type='hidden' name='x_show_form' value='PAYMENT_FORM' />
<p>
Thank you for choosing to donate to Lincoln Lutheran through our
online donation page. Click here and you will be transferred to a
secure website to complete your donation.
</p>
<input type='submit' value='Step 2: Continue to Secure Server' onClick="if (document.donateForm.i_am_also_a.value=='other (please specify)') {document.donateForm.i_am_also_a.disabled=true;}"/>
</form>I think the right solution to this is an Ubercart module, but I was under a time constraint, and decided I could live with something like this for the time being.