Add Tip Jar to WordPress
Add Tip Jar to WordPress
This tutorial by AoxoA will show you how to add a free “Leave Tip” button to the sidebar of your WordPress blog. After a visitor clicks the “Leave Tip” button, they are directed to PayPal where they can enter and send a tip.
Basically, we are massaging PayPal’s “Buy it Now” features to accept tips while replacing the “Buy it Now” graphic with our own custom “Leave Tip” graphic. For an example of how it works, you can click the “Leave Tip” button on the side bar to the right.
Why don’t we simply use PayPal’s “Donate” Button? Because, the donate button is intended for fundraising. Nonprofits must verify their status to withdraw donations they receive. Users that are not verified nonprofits must demonstrate how their donations will be used, once they raise more than $10,000. I think they put holds on the donations, etc… That is too much red tape and hassle for us. We just want to receive tips from our supporters and go about our business.
The preceding steps are accurate as of January 2014. Even if something in the process changes, we assume you will still be able to accomplish the task using this guide.
You will need the following:
• PayPal account
• A site using WordPress (WordPress.org)
• You might also consider a free account at www.tinypic.com to host images
PayPal: Generate code for your button, etc…
Log in to PayPal
1. Click Merchant Services tab
2. Click Create payment buttons for your website
3. Click Create a Button (it’s a big blue button)
4. Select Buy Now from the Choose a button type drop down
5. In the Item name field, enter the name or phrase you want.
The text you enter appears on the PayPal page that launches after someone clicks your “Leave Tip” button. Normally, people put the name of the item they are selling. However, this is a tip jar and you are not selling anything. You also do not want to leave it blank because it might confuse someone.
To mitigate confusion, I put “Enter a tip below and choose an option to the right.” This way a user will know what to do, etc… (It cuts off at “and” unless you hover over it and then the tool tip balloon shows the full sentence).
View mine for reference: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NLCQGN7UFRA9C
6. Leave the Item ID field blank
7. Leave the Price field blank
8. Leave Tax field blank
9. Select use Primary email address for the merchant account ID
10. Click the create button
12. Copy the website code. Paste it into a document. You will use this code later
WordPress: set up your widget, etc…
Log into WordPress
1. Go to appearance > widgets
2. In the Available widgets area, drag the text widgets to the sidebar on the right
3. Click the arrow to expand the text widget
4. Enter a title
5. Copy / paste the following code, but first:
a. Change the text to communicate the message you want, etc…
b. Replace the blue link with your PayPal link (explained earlier)
c. Change the image link in the paypal code (the location is green in my example below) with your button image link (or use one of mine)
i. I made buttons and you are free to use any of these links:
• Support button/white background: http://i43.tinypic.com/adp3dx.jpg
• Leave tip button/dark background: http://i41.tinypic.com/n21v00.jpg
• Leave tip button/ white background: http://i41.tinypic.com/2k0tgp.jpg
ii. You can use the links directly. You can generate your own links by uploading the button images to your tinypic account (free), or your web server, etc
Here is the code:
<p>You can help support this site by leaving a tip.</p>
Contributions can be made in any amount from $1 on up. Thank you for the support.
<form action=”https://www.paypal.com/cgi-bin/webscr” method=”post” target=”_top”>
<input type=”hidden” name=”cmd” value=”_s-xclick”>
<input type=”hidden” name=”hosted_button_id” value=”NLCQGN7UFRA9C”>
<input type=”image” src=”https://aoxoa.co/wp-content/themes/albedo/images/Leave_Tip_button.gif” border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay online!”>
<img alt=”” border=”0″ src=”https://www.paypalobjects.com/en_US/i/scr/pixel.gif” width=”1″ height=”1″>
Add Tip Jar to WordPress
I hope it saved you time and effort. If you would like to show your appreciation….. leave a tip.
Contributions can be made in any amount from $1 on up. Your support is appreciated.
Chris "AoxoA" Hooper is a photographer, retoucher, and blogger based in Austin, TX. As a photographer, he specializes in music, lifestyle, concert, and portraits. He enjoys the great outdoors with his lovely wife and amazing son.
Pingback: Tip Jar | The Rhubosphere
Thanks. This helped a lot.
Thank you. That tip in my tip jar was the best type of feedback. You are awesome!
Never mind – I found out what I needed on the WordPress site: https://en.support.wordpress.com/paypal/2/
Good information there. Readers, keep in mind that the instructions in this post relate to wordpress.ORG websites as opposed to the wordpress.COM websites.
Another possible option, for those without commercial accounts, could be to make use of the “Paypal.me” link option under the “send & request” menu. Then just make your own tip-jar image and link it to the Paypal.me link.
Neither one requires a commercial account. Both require a PayPal account. It looks like what you are suggesting is the same thing that we did in this tutorial (basically)—but I’d have to look into the paypal.me thing to see what it is about.
This tutorial was crated to help you get the donate button into a WordPress widget area. I do mine differently now (without an image) and on my page as opposed to the sidebar, etc..
Thanks for the interesting comment.