Add a donate button to your website with PayPal's Donate SDK

docsCURRENT

Last updated: Aug 15th, 7:31am

Overview

With the Donate SDK, users can select the PayPal Donate button to donate in a pop-up overlaid on your website. This keeps users on your website instead of redirecting them to a donation page on PayPal.

Eligibility

The easiest way to find out if you're eligible to integrate the Donate SDK is to use paypal.com:

Log in to paypal.com/donate/buttons with the account you want to use to make a Donate button.
If you can start a flow to make a Donate button, you're eligible to integrate the Donate SDK.

1. Create Donate button

To use the Donate SDK, create a Donate button in the sandbox.

Log in to sandbox.paypal.com/donate/buttons and make your Donate button.
After you create a button, you get code. From the code, copy:
- hosted_button_id value if you have a business account
- business value if you have a personal account.

You'll need this parameter to pass to the SDK.

The Donate SDK accepts all parameters accepted by a Donate button, such as item_name or item_number.

2. Add Donate SDK to web page

Add the Donate JavaScript SDK to your web page to integrate the Donate button into your site.

1<!DOCTYPE html>
2
3<head>
4 <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
6</head>
7
8<body>
9 <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
10</body>

3. Render Donate button

Render the Donate button to a container element on your web page.

Provide either the hosted_button_id or business parameter. If you have a business account, provide hosted_button_id. If not, provide business.

1<body>
2 <div id="paypal-donate-button-container"></div>
3
4  <script>
5   PayPal.Donation.Button({
6       env: 'sandbox',
7       hosted_button_id: 'YOUR_SANDBOX_HOSTED_BUTTON_ID',
8       // business: 'YOUR_EMAIL_OR_PAYERID',
9       image: {
10           src: 'https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
11           title: 'PayPal - The safer, easier way to pay online!',
12           alt: 'Donate with PayPal button'
13       },
14       onComplete: function (params) {
15           // Your onComplete handler
16       },
17   }).render('#paypal-donate-button-container');
18</script>
19</body>

To render another button on the same page, create another container, for example, <div id="paypal-donate-button-container-2">. Render to the new container: }).render('#paypal-donate-button-container-2').

4. Test

Click the Donate button.
Make sure it opens a pop-up and shows your donation page.
Complete a donation with a sandbox credit card or sandbox PayPal account.
Verify the onComplete function returns an object parameter. This object contains the following fields:

Variable	Description
`tx`	Transaction ID for the transaction
`st`	Transaction status
`amt`	Transaction amount
`cc`	Currency code
`cm`	Custom message
`item_number`	Purpose configured for the transaction
`item_name`	Program selected by the donor during the transaction

5. Go live

To go live with the Donate SDK, complete these steps:

Replace sandbox data with live data

Replace sandbox hosted_button_id with live hosted_button_id, or sandbox business with live business.
Remove the env parameter, or change env to production.

1<body>
2 <div id="paypal-donate-button-container"></div>
3
4  <script>
5   PayPal.Donation.Button({
6       env: 'production',
7       hosted_button_id: 'YOUR_LIVE_HOSTED_BUTTON_ID',
8       // business: 'YOUR_LIVE_EMAIL_OR_PAYERID',
9       image: {
10           src: 'https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
11           title: 'PayPal - The safer, easier way to pay online!',
12           alt: 'Donate with PayPal button'
13       },
14       onComplete: function (params) {
15           // Your onComplete handler
16       },
17   }).render('#paypal-donate-button-container');
18</script>
19</body>