On this page
No Headings
Last updated: June 4, 2026
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.
The easiest way to find out if you're eligible to integrate the Donate SDK is to use paypal.com:
To use the Donate SDK, create a Donate button in the sandbox.
hosted_button_id value if you have a business accountbusiness 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.
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>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').
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 |
To go live with the Donate SDK, complete these steps:
hosted_button_id with live hosted_button_id, or sandbox business with live business.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>