Yesterday I got an email from Jamie asking me how I made my PayPal donation form. Here’s how I did it.
First, we need a PayPal form with the donation stuff inside:
1 2 3 4 5 6 7 8 9 10 11 12 | <form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="paypal@email.com"> <input type="hidden" name="item_name" value="My Donations Subject"> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="tax" value="0"> <input type="hidden" name="bn" value="PP-DonationsBF"> <label for="">Amount (US$) : </label><input type="text" name="amount" id="input_amount" width="10" class="text" /> <input type="submit" name="submit" value="Donate" class="submit" /> </form> |
More information about the PayPal donation buttons and the form code behind can be found here: https://www.paypal.com/cgi-bin/webscr?cmd=_pdn_donate_techview_outside
Next, we need to add some more code to the form where we want to show the various messages displayed by jQuery. These messages are set to be hidden (display:none;):
1 2 3 4 | <input type="submit" name="submit" value="Donate" class="submit" /> <span id="msg_moreamount" class="icon_warning red" style="display:none;">PayPal takes $0.35 commission for a $1 donation. Please enter at least $1.35 , thank you!</span> <span id="msg_noamount" class="icon_warning red" style="display:none;">Please enter the amount you wish to donate and try again.</span> <span id="msg_activity" style="display:none;"> <img src="images/loader.gif" align="absmiddle" /> Transferring to PayPal, please wait...</span> |
The jQuery script which actually checks and validates the form looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | jQuery(document).ready(function() { // the minimum required value to be entered. // in this case PayPal takes $0.35 from a $1 // donation, hence we ask for at least $1.35 var minimum_value = 1.35; // attach this script to the form's submit action jQuery('#form_paypal').submit(function() { // check if there is an amount entered if (jQuery('#input_amount').val() > null) { // is the amount equal to or higher than the minimum_value? if (jQuery('#input_amount').val() < minimum_value) { // need more amount // hide messages, show more amount error jQuery('#msg_noamount').hide(); jQuery('#msg_moreamount').fadeIn(); return false; // prevent the form from submitting } else { // amount is more than minimum_value // hide messages, show activity jQuery('#msg_moreamount').hide(); jQuery('#msg_noamount').hide(); jQuery('#msg_activity').fadeIn(); return true; // submit the form } } else { // no amount entered at all // hide messages, show no amount error jQuery('#msg_moreamount').hide(); jQuery('#msg_noamount').fadeIn(); return false; // prevent the form from submitting } }); }); |
The code is documented so it should be clear what each block does.
The final step is to add some CSS styling:
1 2 3 4 5 | .red {color:#ff0000;} .icon_warning {background:transparent url(../images/exclamation.png) left no-repeat;padding:4px;padding-left:20px;} form#form_paypal input {padding:3px;border:1px solid #ddd;background:#fefefe;} form#form_paypal input#input_amount {width:50px;} form#form_paypal .submit {cursor:pointer;border-style:outset;} |
If you want to integrate this form into your WordPress Blog then this is the way to go:
In your WordPress Theme folder (wp-content/themes/yourtheme/) create a new file named ‘donate.php’. To make the file available as a WordPress page template you’ll need to add the following code at the top of the file:
1 2 3 4 5 | <?php /* Template Name: Donate */ ?> |
A donation form template for the default theme would look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?php /* Template Name: Donate */ ?> <?php get_header(); ?> <div id="content" class="narrowcolumn"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2>Make A Donation</h2> <p>If you think you have benefited or I have helped you in some way, by using any of my WordPress plugins or themes, please consider making a donation. Donations support the continued development of my websites and help cover the hosting costs. Donations of any size are gratefully accepted. Thank you!</p> <form id="ppDonate" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="paypal@email.com"> <input type="hidden" name="item_name" value="My Donations Subject"> <input type="hidden" name="no_shipping" value="0"> <input type="hidden" name="no_note" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="tax" value="0"> <input type="hidden" name="bn" value="PP-DonationsBF"> <label for="">Amount (US$) : </label> <input type="text" name="amount" id="ppAmount" width="10" class="text" /> <input type="submit" name="submit" value="Donate" class="submit" /> <span id="moreAmount" class="warningIcon red" style="display:none;">PayPal takes $0.35 commission for $1 donation. Please enter at least $1.35 , thank you!</span> <span id="noAmount" class="warningIcon red" style="display:none;">Please enter an amount to donate and try again.</span> <span id="ppGo" style="display:none;"> <img src="<?php bloginfo('template_url'); ?>/images/loader.gif" align="absmiddle" />Transferring to PayPal, please wait...</span> </form> <p><small>Info : once you click on 'Donate', you will be transferred to PayPal where you can enter your payment information.</small></p> </div> <?php endwhile; endif; ?> <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Next you need to create a page in WordPress, call it ‘Donate’, ‘Make A Donation’ or whatever you want the page title to be. You can leave the page content empty as we will use our template file. Scroll down to the ‘Page Template’ section and select your page template (’Donate’ in our case). Save & publish the page.
Available Files
Hopefully this short tutorial will be of some use for you (if so, don’t forget to donate
) and if you still have some questions feel free to leave a comment below.
Received Donations
- Sun 8/17/2008, $5.00 USD • Saarthak, http://lughole.net/
Thank You!































Curtis
Great tutorial I think I’ll be using this to my site in the near future. The regular donation button is so ugly and boring.
August 4th, 2008 10:27 am
Toxane
@Curtis
Glad you like it, thanks for your comment & the ping!
August 4th, 2008 6:21 pm
Chad
Indeed, that is purty. I’ll have to try that one out!
August 5th, 2008 3:45 am
Toxane
@Chad
Thanks!
August 5th, 2008 12:25 pm
Timothy Long
Nicely done. This will certainly be gracing a non-profit site I’m working on.
August 8th, 2008 10:08 pm
Hayes Potter
I like it I’ll leave a ping, too.
August 11th, 2008 6:48 am
Toxane
@Timothy & Hayes
Thanks!
August 11th, 2008 1:59 pm
Angelfire
For nothing, thanks to you for this great tutorial.
August 16th, 2008 12:26 am
Saarthak
Your donation form is fantastic..I just used it to donate a really tiny amount (economic depression is on). Changing so much coding looks overwhelming right now so I’ll do that after making myself ready for this :p
August 17th, 2008 3:44 am
Ismail
In terms of bonalnoy erudition - grammotno done!
November 6th, 2008 10:41 am
Rick
Is there a way to do this with the secured account id rather than having your email address right out there in the open? For some reason it’s not working for me.
November 10th, 2008 10:38 pm
Toxane
@Rick
Yes, it is possible, but with another approach because you need a PHP script to encrypt your form ‘on the fly’. Basically, these are the steps:
- Create a form like the one in this tutorial
- on submit, do an AJAX call to the PHP script which encrypts the form
- post the response to PayPal
You can find more information and an example for the encryption here:
http://www.stellarwebsolutions.com/en/articles/paypal_button_encryption_php.php
HTH
November 11th, 2008 2:29 am
David Lano
Wow, excellent tutorial! I definitely adding this to my website.
I did notice however that the download links aren’t working. Could you look into that please?
Thanks!
November 17th, 2008 1:29 pm
Toxane
@David
Thanks as well, I’ve fixed the links.
November 17th, 2008 2:16 pm