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

docscurrentLast updated: April 28th 2022, @ 10:42:44 am


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:

  1. Log in to paypal.com/donate/buttons with the account you want to use to make a Donate button.
  2. 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.

  1. Log in to sandbox.paypal.com/donate/buttons and make your Donate button.
  2. 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.

<!DOCTYPE html>

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
</head>

<body>
 <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
</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.

<body>
 <div id="paypal-donate-button-container"></div>

  <script>
   PayPal.Donation.Button({
       env: 'sandbox',
       hosted_button_id: 'YOUR_SANDBOX_HOSTED_BUTTON_ID',
       // business: 'YOUR_EMAIL_OR_PAYERID',
       image: {
           src: 'https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
           title: 'PayPal - The safer, easier way to pay online!',
           alt: 'Donate with PayPal button'
       },
       onComplete: function (params) {
           // Your onComplete handler
       },
   }).render('#paypal-donate-button-container');
</script>
</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

  1. Click the Donate button.
  2. Make sure it opens a pop-up and shows your donation page.
  3. Complete a donation with a sandbox credit card or sandbox PayPal account.
  4. Verify the onComplete function returns an object parameter. This object contains the following fields:
VariableDescription
txTransaction ID for the transaction
stTransaction status
amtTransaction amount
ccCurrency code
cmCustom message
item_numberPurpose configured for the transaction
item_nameProgram 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

  1. Replace sandbox hosted_button_id with live hosted_button_id, or sandbox business with live business.
  2. Remove the env parameter, or change env to production.
<body>
 <div id="paypal-donate-button-container"></div>

  <script>
   PayPal.Donation.Button({
       env: 'production',
       hosted_button_id: 'YOUR_LIVE_HOSTED_BUTTON_ID',
       // business: 'YOUR_LIVE_EMAIL_OR_PAYERID',
       image: {
           src: 'https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif',
           title: 'PayPal - The safer, easier way to pay online!',
           alt: 'Donate with PayPal button'
       },
       onComplete: function (params) {
           // Your onComplete handler
       },
   }).render('#paypal-donate-button-container');
</script>
</body>

See also