Add a PayPal Donate Button with React

An example donate form using the React components for the PayPal JS SDK.

🔗   react-paypal-js GitHub repository

🔗   See a live demo of this sample app on CodeSandbox

Setup

1. Clone or download the code in this repo.

💡   Git Guide on the 'git clone' command

2. Navigate to the app directory and install the dependencies

cd paypal-donate-button-react

Install with npm

npm install

or

Install with yarn

yarn

3. Start the app

Start with npm

npm run dev

Start with yarn

yarn run dev

Test in Sandbox

To use your own sandbox credentials instead of the test client ID, log in to the developer dashboard and get your client ID from your default application.

💡   If you need help setting up your developer dashboard or finding your client ID, follow the first step in the getting started documentation to get API credentials

Change the clientID from "test" to your client ID in the DonateApp() component found in src/DonateApp.jsx.

export function DonateApp() {
  return (
    <PayPalScriptProvider
      options={{
        "client-id": "test",
        components: "buttons",
        currency: "USD",
      }}
    >
      <h1>Donate to Kitty's Care</h1>
      <figure>
        <img src="https://placekitten.com/500/300" alt="Kitty Looking Cute" />
        <figcaption></figcaption>
      </figure>
      <DonateForm />
    </PayPalScriptProvider>
  );
}

Links to Documentation

React components for the PayPal JS SDK GitHub Repository

https://github.com/paypal/react-paypal-js

Sample donate button code in Storybook

https://paypal.github.io/react-paypal-js/?path=/story/example-paypalbuttons--donate

PayPal JavaScript SDK Complete Reference

https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/

CodeSandbox sample app

https://codesandbox.io/s/paypal-donation-button-example-f4jq38?file=/DonateApp.js