PayPal donation form with CSS and jQuery for WordPress

August 3rd, 2008 by Pete Leave a reply »

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" />&nbsp;&nbsp;
<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" />&nbsp;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="&lt;?php bloginfo('template_url'); ?&gt;/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

Thank You!

 

Advertisement
Download 1000's of web templates. Unlimited access!

38 comments

  1. Curtis says:

    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.

  2. Toxane says:

    @Curtis

    Glad you like it, thanks for your comment & the ping!

    ;)

  3. Chad says:

    Indeed, that is purty. I’ll have to try that one out!

  4. Timothy Long says:

    Nicely done. This will certainly be gracing a non-profit site I’m working on.

  5. Hayes Potter says:

    I like it I’ll leave a ping, too.

  6. Toxane says:

    @Timothy & Hayes

    Thanks!

  7. Angelfire says:

    For nothing, thanks to you for this great tutorial.

  8. Saarthak says:

    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

  9. Ismail says:

    In terms of bonalnoy erudition – grammotno done!

  10. Rick says:

    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.

  11. Toxane says:

    @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

  12. David Lano says:

    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!

  13. Toxane says:

    @David

    Thanks as well, I’ve fixed the links.

  14. IQ says:

    excellent tutorial, just what I needed! thanks a bunch for sharing it!!!

  15. paga says:

    is there a way i can collect user name and the amount that they are donating than send them to paypal
    so like have

    Name:
    <input name=”date” type=”hidden” value=”">
    Comment:
    Money:

    but not having the submit boton, just the fields, and the paypal submit botton is the only one
    i need this to save the users that donate, or is there a way that after they have dnihsed donating at paypal they get redireted and their info is saved in my db?

  16. 88th says:

    can u make a contact form wit these javascript effect??
    I mean showing an error massage at right form

  17. 88th says:

    Toxane:

    OH Man!thanks 4 reply ma comment. I need it so much.
    well I try it soon.

  18. 88th says:

    I already tried……
    but I cant showing da success massage.

    here ma webpage

    http://nggaksmuanyaituputih.googlepages.com/contact.html

    I use emailmeform for da contactform.

  19. 88th says:

    can u tell me how to showing da success massage plz…

  20. 88h says:

    can u give me php file for contact form plz

  21. Ace says:

    hi pete,
    amazing post.
    please i need help. i cannot seem to make it work properly.

    when i click donate, it does not show any jQuery effects?
    i am trying to use it in wordpress.
    please help.

    thnx

  22. Pete says:

    @Ace

    Any link?

  23. Ace says:

    http://siddharthatrust.com/donations/
    thats the project i am working on.

  24. Pete says:

    @Ace

    The element ID’s in ‘paypal_donate.js’ do not match the form’s element ID’s. Fix that and it’ll work.

    HTH

  25. Ace says:

    worked flawlessly. thnx for the quick update. i feel so stupid now. cheers

  26. Pete says:

    @Ace

    Glad it works now.

  27. Randy says:

    Any way to add an option for setting up a recurring donation?

  28. Pete says:

    @Randy

    Try the following form vars:

    1
    2
    3
    4
    5
    6
    
    <input type="hidden" name="a3" value="9.99"> <!-- price of subscription -->
    <input type="hidden" name="p3" value="1"> <!-- billing cycle length -->
    <input type="hidden" name="t3" value="M"> <!-- billing cycle unit=month -->
    <input type="hidden" name="src" value="1"> <!-- recurring=yes -->
    <input type="hidden" name="sra" value="1"> <!-- reattempt=yes -->
    <input type="hidden" name="srt" value="12"> <!-- # of recurring payments -->
  29. An Onymous says:

    Hi there!

    I tried to do the same thing, but failed: how do you keep the progress spinner spinning while the HTTP request is done?

    Thanks a lot in advance.

  30. Pete says:

    @ An Onymous

    In the above jQuery example, the spinner is called on line 30:

    jQuery('#msg_activity').fadeIn();
    
  31. An Onymous says:

    I’ve noticed that. I’m doing quite the same, but the spinner stops moving after fadeIn.
    An as I’m doing a non-ajax HTTP GET request, it is out of the question for me to use a callback function. So I’m wondering how you made your animated gif remain so lively, because I simply didn’t succeed at doing it.

    Kind regards

Leave a Reply