Skip to content

prophen/paypal-donate-button-react

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

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

App Donate form screenshot

Setup

1. Clone or download the code in this repo.

animation showing where to clone or download the code

💡   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

Releases

No releases published

Packages

No packages published