How To Add A PayPal Donate Button To Your WordPress Website

SkyStra
Mar 7, 2021

Accepting donations on your website is a great way to allow your visitors to help you offset your website’s running costs. There are many ways you can receive money from your visitors through your website, but we recommend using PayPal. It’s secure, convenient, easy to set up, cost-effective, and already used by millions of people on the web. 

You’ll see various types of websites accepting donations via PayPal – from bloggers and community websites to non-profit organizations and churches.

In all these cases, PayPal makes it easy to receive donations, so we’ll cover some of the most popular methods to add the PayPal donate button on a website.

Before we start – make sure to register an account with PayPal or log in to an existing account.

Add A PayPal Donate Button (Free Plugin)

We recommend this method to everyone as it’s free and easy to use. Of course, using the free plugin has limitations in terms of customization, but it works well.

PayPal Donations 

In this example, we’ll be using the PayPal Donations free plugin.

Install 

Log in to your WordPress Dashboard, head to Plugins > Add New, fill in PayPal Donations in the top-right search bar, and click Install Now:

Once installed, click Activate to activate the plugin:

Configure Settings 

Next, head to Settings > PayPal Donations to create the button. 

Here’s what we can configure:

  1. Fill in your PayPal email address
  2. The default donation currency is USD; however, you can use this drop-down menu to change it to other currencies
  3. It’s a good idea to create a thank you page for everyone who donates on your site and then set it up as a Return Page in this field
  4. Fill in the default amount of the donation (the visitor can change this)
  5. Fill in the purpose (for example, Donation)
  6. Fill in the reference (for example, My website donation)
  7. Choose the style of the PayPal donation button
  8. Optionally, you can enter an URL to your custom button image here
  9. If needed, change the donation country and language via this setting

Make sure to click Save Changes once ready to save the changes.

Add The PayPal Donate Button To Your Website

Adding the button to your website using this plugin is easy! 

Open up a post or page on your WordPress Dashboard and paste the shortcode (if you’re using the Gutenberg editor, add the shortcode block first):

[paypal-donation]

Here’s how the PayPal donate button looks on our demo website:

Alternatively, you can add the donate button to the sidebar or footer widget area. Head to Appearance > Widgets, and drag the PayPal Donations widget to the desired sidebar or footer:

Fill in the title, description, purpose (optional), reference (optional), and click Save. Here’s an example of the donation button in the demo website sidebar:

That’s it!

Add A PayPal Donate Button (Premium Plugin) 

WPForms is one of the best WordPress form builders on the market, and it allows you to create beautiful and functional donation forms quickly and accept payments via PayPal or credit card.

Using WPForms for this provides more flexibility, as you have advanced options which you can use to collect information about your donors. You can solicit phone numbers and email addresses (add them to your mailing list, as WPForms is integrated with the most popular email marketing providers), run polls and surveys.

Please note that you need a Pro version of this plugin to receive PayPal payments.

Here are the detailed steps:

  1. Purchase, install, and activate the WPForms plugin using the Plugins  > Add New > Upload Plugin feature in your WordPress Dashboard
  2. Head to WPForms > Settings and fill in your purchased license key
  3. Visit WPForms > Addons and click the Install Addon button under the PayPal Standard Addon
  4. Go to WPForms > Add New to launch the form builder and fill in your form’s title. Choose the Donation Form template on the same page
  5. Use the WPForms form builder to customize the loaded donation template. For example, use the Add Fields tab to add more fields to your form if needed or edit the submit button to read Donate by clicking on it
  6. Once ready, save your form by clicking the Save button in the top-right corner
  7. Click the Payments tab on the left, then select the PayPal Standard option. Select the Enable PayPal Standard payments option and fill in your PayPal email address. Select Donation under the Payment Type option and click Save to save changes
  8. To add the form to your website, create a new post or a page or edit the existing one. Click the + button to add a new block and select the WPForms block (or use the integrated search to find it). Use the drop-down menu to select the previously created PayPal donation form

That’s it!

Add A PayPal Donate Button (HTML)

The third method allows you to add a PayPal donate button without using any third-party plugins. Log in to your PayPal account, and click the cogwheel icon in the top-right corner:

Next, click Seller Tools, then click the Manage button next to PayPal buttons:

Select the Buy Now button:

Next:

  • Fill in the item name (for example, My Website Donation)
  • Leave the Item ID and Price fields blank
  • Adjust the currency next to the Price field if needed
  • Click Add text field and fill in the information you want to collect (Your Name, for example). Click Done once ready
  • Click Customize text or appearance and customize your button 

Next, click Step 2: Track inventory, profit & loss at the bottom, and un-check the Save button at PayPal option:

When ready, click the Create Button button at the bottom of the page.

Your HTML code will show at the center of the page. Click the Remove Code Protection link on top of it:

Next, copy the code to your favorite text editor (Notepad on Windows or Text Edit on Mac).

In the code:

  1. Find _xclick and change it to _donations.
  2. Find btn_buynowCC_LG.gif and change it to btn_donateCC_LG.gif.

Note: If you want the button’s version without the credit card logos, use btn_donate_LG.gif instead. Please note that the image name shows up twice in the code in question.

Here’s an example:

In your WordPress Dashboard, edit the post or a page, and:

  1. If you’re using the Gutenberg editor, click + and add a Custom HTML block to the page, and paste the generated code in it.
  2. If you’re using the Classic editor, click the Text tab on the right-hand side of the page, and paste the generated code where needed.

Here’s an example of the Classic editor:

Publish the page or post, and you can see the donation button displaying properly:

PayPal also provides various donation buttons you can use instead. All you need to do is replace the image name shown in two places in the code, as we explained previously. Here are all the images you can use:

btn_donate_LG.gif

btn_donateCC_LG.gif

btn_donate_SM.gif

x-click-but21.gif

x-click-but04.gif

x-click-but11.gif

Alternatively, you can use your own image – upload it to your Media Library, click the image, click the Copy URL to clipboard button and replace it in the code.