React PayPal Smart Button

- April 2021

Short Description:

Reusable React Component to render Paypal button, available via NPM.

Paypal Smart Button

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
  1. 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;

The props are of the following types:

price: number,
description: string,
clientId: string,
currency: string  || this is a three digit currency code e.g. 'EUR', 'GBP' or 'USD'
paySubmit: function || this function will be called following successful payment transaction in your application. Handle the successful transaction however you like.

Dependencies

None, just use it in your react project.

That's it!

Project Details

Completion Date: 2021-04-20

Skillset:

  • reactjs
  • NPM
  • PayPal SDK

Links:

Live Application

Repository

Get In Touch