React Paypal Button

Reusable React Component

Links

Repository: Github

Available on NPM here.

Description

Sometimes you just want a react component to be simple and work straight away. No Config and only a handful of required props.

This is a PayPal smart button that just works.

Setup

1. The Hard Bit - if you have not already done so, follow PayPal's instructions to get your Client ID

2. In your CLI and once navigated to your React JS project, install with the following command:

npm i react-paypal-smart-button

3. Implement in your app, as per the following example:

import PayPalButton from 'react-paypal-smart-button'

function App() {
return (
  <PayPalButton
    price={100}
    description="YOUR_PRODUCT_DESCRIPTION"
    clientId="YOUR_PAYPAL_APP_CLIENT_ID"
    currency="USD"
    paySubmit={() => handlePaypalSuccess()}
  />
);
}

export default App;

Props are of the following types:

  • price: Number
  • description: String
  • clientId: String
  • current: String
  • paySubmit: Function - this will handle a successful payment transaction in your App.

Example:

As below. If you find the component useful, consider buying me a cup of coffee.

Make A Donation