# Add a donate button to your website with PayPal's Donate SDK (/sdk/donate) ## Overview [#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 [#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](https://www.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 [#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](https://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 [#2-add-donate-sdk-to-web-page] Add the Donate JavaScript SDK to your web page to integrate the Donate button into your site.
```html lineNumbers ``` ## 3. Render Donate button [#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`.
```html lineNumbers
``` To render another button on the same page, create another container, for example, `
`. Render to the new container: `}).render('#paypal-donate-button-container-2')`. ## 4. Test [#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: | 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 [#5-go-live] To go live with the Donate SDK, complete these steps: ### Replace sandbox data with live data [#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`.
```html lineNumbers
``` ## See also [#see-also] * [IPN and PDT variables](/api/nvp-soap/ipn/IPNandPDTVariables/) * [HTML variables for PayPal payments standard](/archive/paypal-payments-standard/integration-guide/Appx-websitestandard-htmlvariables)