You are here

How to add a Paypal donation button to your Drupal site

Get code from Paypal

  1. Login to your Paypal account (you obviously have to have one in order to accept money through Paypal :-) and go to the 'Merchant Services' tab.
    1. You don't have to have a Merchant account in order to have access to a couple of services in that section
  2. Select the 'Create payment buttons for your website' option
  3. Customize your button
    1. Choose the 'Donations' button type
      1. Note the paragraph at the very bottom, which explains that Donations accepted this way should be towards a cause.  If you are not a verified nonprofit, you will have to demonstrate how the money will be used if you raise more than a certain amount ($10,000 as of this writing).
    2. Fill in something for the Organization name/service  field, since this will be displayed to the user if they choose to donate.  The clearest thing to do, in my opinion, is enter your website's name here.
    3. Modify the rest of the options as you see fit and hit 'Create Button' at the bottom
  4. Copy the generated html
    1. You will be taken to a page that has the html needed to embed on your site, so just select and copy that html (just make sure you're on the 'Website' tab)

Create donate block on your Drupal site

  1. From the block admin screen (/admin/structure/block), click the 'Add block' link
  2. Fill in the Block title (what the user will see). 
    1. I set mine to 'Support the author'
  3. Fill in the Block description (this is what you see on the block admin screen, where all the blocks are listed). 
    1. I set mine to "Paypal donate"
  4. Create new, minimal text format for pasting the Paypal code
    1. Let me explain...  You now have to paste in the Paypal html code into the 'Block body' area.  However, even if you paste it into the 'Source code' view and are using the 'Full HTML' filter, Drupal will automatically change some of what you pasted in according to the various filters enabled for the 'Full HTML' format.  I experienced that issue, and have seen it many times before in cases when you want what you paste in to be saved and displayed EXACTLY as you entered it.
    2. So go to Configuration --> Content authoring --> Text formats on your admin menu (/admin/config/content/formats) and click on 'Add text format'
    3. Let's call the new text format "Full HTML, no CKEditor".  We will allow all html tags through, and will have very little processing.  When I use this format, it's always to paste in code directly, so I never use it with the CKEditor.  So you can't get any more descriptive with the title!
      1. For roles, select just 'administrator' (that's you, I hope)
      2. From the filters section, don't check anything - we won't apply any filters.  In reality, if you know what you're doing here, feel free to select a couple (I admin, I do have one selected)
    4. Save your new format
    5. Reorder to have your most-used-one on the top
      1. After you save, our newest format will be on the top, which makes it the one that starts being applied as the default whenever you create a new piece of content from now on.  In reality, I'd imagine you'll want your regular format with the CKEditor on it to create most of your pages, while this one will be seldomly used.  So, after saving, drag it to be after your regular 'Full HTML' format
  5. Paste in Paypal button code into 'Block body' field using the new minimal text format
    1. Select the new 'Full HTML, no CKEditor' format at the bottom first
    2. Paste in the code we got in the first part of the tutorial from Paypal
  6. Place your brand new block on whichever pages you want
    1. Edit the 'Visibility settings' section on your block to place it on the pages you want for the users you want
    2. You can, of course, use the Context module or other ways of block placement too!
  7. Save!

Test

  1. Visit the pages where your new block should appear (make sure to clear cache if you can't see it right away)
    (My block is custom-styled)
  2. Click on the 'Donate' button to see what happens
    1. You'll notice that the user should be taken to a new Paypal page.  The information you entered originally in the 'Organization name/service' will be printed here, so if you want to edit that to be something else, feel free to go back to Paypal, edit your button and copy the modified html code.
    2. If you get an error when you press the button, make sure you're not using a text format that is changing the html source code.  I had that issue until I created and used my minimal new format!

That's it!  As always, let me know if you have questions or comments.

Share

Comments

How much would you charge me to add a paypal button to just one page of my drupal forum site? I tried setting up the way you explained and it didn't work. please contact me at
theappbrosbiz@gmail.com

Thank you so much for your simple and clear direction. It worked perfectly for me!!

Thank you for posting this!

So easy to do, yet not so easy to uncover first on my own. THANK YOU! Well done instructions, I'll add.

Yay!  I'm glad it was useful!

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.