How to Use Paypal with React in 15 Minutes or Less

Hi all! I recently completed my capstone project for Flatiron School in Chicago. For it, I wanted the ability for users to make purchases. During my research into the best way to accomplish this, however, a lot of different sources insisted that using Stripe was the way to go. Stripe is specifically created for and by developers to be easy to use and there is a lot of documentation out there. However, I still wanted to use Paypal.

And finally I discovered a package that makes using Paypal in your React mind-blowingly easy.

**Note: This walkthrough assumes you already have a React Application set up**

To use it, you must first set up the sandbox on Paypal’s developer site. (This is for testing purposes, obviously. Once you actually launch your site you will need to follow some additional steps). From the dashboard, you will press Create App and enter in the name of your WebApplication. Aftewares, you should be able to click on the name of your app on the dashboard page nad bring up information that looks like this:

Obviously, your own page will not have the Client ID scribbled out. However, if you don’t already know, you should never, EVER share your Client ID with anyone. That includes sending it up to Github. So we’re going to copy that Client ID and paste it into a .env file.

Make sure to add that file to your .gitignore file!! All you need to do is open .gitignore and type in “.env” and you will notice your .env icon become faded. This shows that the .env file will no longer be uploaded to Github, and thus kept safe.

Alright, so now you have a hidden .env file. Open it up and create a variable name. I suggest something along the lines of REACT_APP_PAYPAL_KEY. Note that whatever you call it, the name of the variable MUST start with “REACT_APP”. That’s going to be what allows the system to grab it from other files. Now all you need to do is set that variable equal to the Paypal Client ID you copied earlier.

Perfect! Alright. Next.

In your terminal, go ahead and type

npm i react-paypal-button-v2

This will install the package for you. Now, at the top of the page you plan on using the Paypal functionality, import information like so:

import {PayPalButton} from 'react-paypal-button-v2'

Nice! We’re almost there (I told you this would be quick).

In your class method, go ahead and put the following:

render() {
     return (
          <PayPalButton
               amount="0.01"
               onSuccess={(details) => {
                    alert("Transaction completed by " + details.payer.name.given_name)
               }}
               options={{
                    clientId: process.env.REACT_APP_PAYPAL_KEY
               }}
          />
     );
}

Note that you MUST have an amount listed for this to work. The amount can be hardcoded as above, or you can replace the “0.01” with any variable of your choosing. Also, the clientId is set to whatever you named your Client ID key in the .env file predicated by “process.env.”.

Now you’re done!!! You have a working Paypal button.

In order to test it out, all you need to do is go back to your Paypal Devloper account, look at the menu tab named “Accounts” under “Sandbox”, and click “View/Edit Account” option under “Manage Accounts” for the account type listed as Personal. Use that email and password when attempting to pay for an item and everything should go okay.

There are other options you can use with the Paypal Button. I recommend reading through them and, especially, having the OnError set up so that it does catch issues.

But that’s pretty much it! Thank you for reading, and I hope this blog post was able to somewhat simplify your journey into using Paypal with React.

Sources:

react-paypal-button-v2

Sandbox accounts