How to add donations to your website with PayPal’s Donation SDK

Low code donation integration using PayPal’s donation SDK

Follow these step-by-step instructions to create a donate button and donation page that’s functional and well-designed. Follow the prompts to customize the images, donation amount, and instructions for your donors.

The Donations SDK provides a great solution for enabling donations on a static site. Once your donation page is set up, you don’t need to be an advanced web developer to add donations to your website. PayPal provides all the code needed to add a donation button and a direct link to your donation page.

check your eligibility

To check whether your account is eligible to integrate the Donate SDK, log in to paypal.com/donate/buttons. If you can see the option to create a new donation page, you’re ready to go for a live donation.

If you can visit this page you can create a donate button and accept donations on your live website

Create donate button in sandbox

If you have a PayPal developer account and want to follow along, you can still create a donation page in the sandbox. Log in to sandbox.paypal.com/donate/buttons with your sandbox credentials to begin the flow for creating a donation button. For this example, I’m using my sandbox business account but a personal account will work as well.

sandbox create a new donation page

PayPal developer account holders can create a donate button in the sandbox environment

For help setting up a PayPal Developer account and accessing your Sandbox accounts, see the Sandbox Accounts documentation on the PayPal Developer site.

Follow the four steps to setup the Donate button

There are four steps to setting up your hosted donation button and payment page. Each step has several options to toggle on or off.

Step 1: Customize Your Button

Step 1: Customize Your Button
In this step, you can choose between large or small PayPal donation buttons or upload your own image for a custom hosted button.


Step 2: Set up your donation page

Step 2: Setup Your Donation Page
Here you have options to display your logo, upload a banner image, and add an inspiring message to your donation page. In this step, you choose to display your donation page as a fullscreen experience or pop-up.


Step 3: Customize Your Donation Details

Step 3: Customize Your Description
In this step, you choose the currency and amount for the donation. This can be an exact amount, any amount, or 3 options, and any amount. You can let the donor donate it monthly, donate more to offset fees, or donate to specific programs.


Step 4: Set Up Your Payment Page

Step 4: Set Up Your Payment Page
The payment page is the last page the payer will see before completing the transaction. In this final step, you can choose whether to collect donors’ mailing addresses, accept notes from donors, and send visitors back to your site if they cancel or complete a donation.

performance!

For the demo site, I created three identical home pages with different ways to add a donation button. For the two home pages I used the code provided by PayPal. For the third page, I created my own button with CSS and linked it to my donation page.

For the full donation flow, open the website using the button on the embedded answer or use the link from the list below.

Donate SDK Demo Site Page

Why three pages to show the donate button?

I created three pages to demonstrate adding a donate button with three levels of visual customization.

The easiest option is to take the code and donate button image that PayPal provides and paste it into your website HTML.

click paypal button

PayPal will also host a button image that you upload in the first step of customizing your button. It is not mentioned but it is best to make sure the image is less than or equal to 300px wide before you upload because the rendered button has a max-width of 300px, It’s more work than using PayPal designed buttons because you have to create a button image that will look good when rendered.

uploaded button

The example CSS donate button links to a donation page URL provided by PayPal. This requires some custom CSS and HTML because PayPal doesn’t give you the code for the CSS buttons.

css button

my preference

I love using the CSS Donate Button the most because it’s the easiest to customize. I want a flashy button with animations and hover states. We don’t get that level of customization with the Donate SDK Hosted Button.

With PayPal’s hosted buttons, I didn’t like the way my uploaded image was being rendered as a button and I wasn’t sure how to improve it. I don’t like the look of the default buttons, especially because the “large” button is still too small. I would like to see the buttons rendered in the style that we see on the actual donation page.

Donate Page Button - Gold

my recommendations

If you want the simplest way to add donations to your website without writing any code, go with the standard, gold, PayPal donation buttons and use the pop-up experience.

If you want to customize your button, create it with CSS or SVG, then use the donation page link provided by PayPal. You’ll lose the option for pop-ups, but the full-page experience is functionally identical.

For low-code implementation, the Donate SDK does everything it needs to without much hassle. If this is what you need for your website, I suggest you give it a try.

Thanks for reading!

If you decide to add donations to your website using PayPal’s Donation SDK, let me know in a comment or tweet. I would love to see this.


cover photo by Markus Winkler

Leave a Comment