How to collect payments with PayPal in your React application
Tags: paypal, react, payments
Published: 2021-02-22 14:50:02


I recently built a project that required integrating with Paypal to collect payments from users. After spending hours trying to implement Paypal payments using the Paypal JavaScript SDK, I realized that this was going to be a uphill task. Thankfully, I found an NPM package that already abstracted the SDK into React components for us to use. In this article, I’ll show you exactly how to collect payments using Paypal in your React application.


## Getting started - setup your Paypal account

First steps first. Head over to [paypal](https://paypal.com) to create an account. Once done, head to the [paypal developer screen](https://developer.paypal.com/developer/applications/). 

## Getting your credentials

Next step is to grab your credentials i.e your clientId. 

Navigate to **Dashboard > My Apps & Credentials .**


![](https://paper-attachments.dropbox.com/s_DC6E8A8E4922E20EC90B04A7B753483339F9486803BF4597878F1DB1072D2D9F_1613308310936_Screenshot+2021-02-14+at+14.11.08.png)


Click the **Sandbox** tab. Then click the on the **Default Application** link. It will bring you to a page containing your clientId. 


![](https://paper-attachments.dropbox.com/s_DC6E8A8E4922E20EC90B04A7B753483339F9486803BF4597878F1DB1072D2D9F_1613308460311_Screenshot+2021-02-14+at+14.13.23.png)

Your **sandbox account** will be an email address that you can use to make test payments while your **client ID** is what Paypal uses to connect your Application to your paypal account.


## Setup your react project

For this example, our React project will be built using [NextJS](https://nextjs.org/). 

If you’ll like to follow along, you can skip the next couple of steps by simply cloning my repo. Run the `git clone git@github.com:onedebos/nextjs-paypal-example.git` command to do so. Then checkout to the starter branch with `git checkout starter` . If you clone the starter repo, you can skip to the **Setup project structure** section.

Otherwise, here are the steps to follow. 

We’ll be using one of the NextJS example projects with [tailwindcss](https://tailwindcss.com/) already configured. 

Run the command `yarn create next-app --example with-tailwindcss next-paypal-example`  to create a NextJS application with Tailwindcss already configured. 

# Setup Project Structure

We’ll create a new folder in our current project called `utils`. Inside our utils folder, we’ll create a `constants` folder. Within the constants folder, add an `index.js` file. 

Your folder structure should now look like


    /utils/constants/index.js

**Install the Paypal package**
Install the react paypal package using `yarn add @paypal/react-paypal-js@4.1.0`. 
**Make sure to use the package at version 4.1.0 as i've found that people are having issues with the later version. I haven't had the time to try out later versions yet.**


# Collect Payments

Time to start collecting Payments!

In your `utils/constants/index.js` file, add your **clientId.**


    export const PAYPAL_CLIENT_ID = {
        clientId: 'ATVzbN_TdDnGGVfyPxu6J-5ddFftdqu8l6tFpIy5TEZ7hjbx7y9Q4TY0ICI0Pot2dBBABc-myxZgYOfj'
    }

In your `_app.js` file, bring in the `PayPalScriptProvider` using `import { PayPalScriptProvider } from "@paypal/react-paypal-js";`. 

Then, wrap your `Components` with that tag. 

```js
import { PayPalScriptProvider } from "@paypal/react-paypal-js";
    import {PAYPAL_CLIENT_ID} from '../utils/constants'
    function MyApp({ Component, pageProps }) {
      return(
        <PayPalScriptProvider options= {{"client-id": PAYPAL_CLIENT_ID.clientId }}>
            <Component {...pageProps} />
        </PayPalScriptProvider>
      ) 
    }
    export default MyApp
```

Next, head into  `pages/index.js` to create the page that collects the payments and bring in the PayPal Button.

Let’s create some state to hold data. 

```js
      const [succeeded, setSucceeded] = useState(false);
      const [paypalErrorMessage, setPaypalErrorMessage] = useState("");
      const [orderID, setOrderID] = useState(false);
      const [billingDetails, setBillingDetails] = useState("");

```

The `orderId` is the most important piece of state we care about. When the user clicks the **Pay with PayPal** button, Paypal will generate an orderId for the order and return that back to us. In the `createOrder` function below, we can see this in action.

```js
      // creates a paypal order
      const createOrder = (data, actions) => {
        return actions.order
          .create({
            purchase_units: [
              {
                amount: {
                  // charge users $499 per order
                  value: 499,
                },
              },
            ],
            // remove the applicaiton_context object if you need your users to add a shipping address
            application_context: {
              shipping_preference: "NO_SHIPPING",
            },
          })
          .then((orderID) => {
            setOrderID(orderID);
            return orderID;
          });
      };
```
   
Along with the `createOrder` function, we need another function that runs when the payment is approved - `onApprove`

```js
      // handles when a payment is confirmed for paypal
      const onApprove = (data, actions) => {
        return actions.order.capture().then(function (details) {
          const {payer} = details;
          setBillingDetails(payer);
          setSucceeded(true);
        }).catch(err=> setPaypalErrorMessage("Something went wrong."));
      };

```

Lastly, we can plugin out PayPal button from our react-paypal-js package to handle the payments.

```js

        <PayPalButtons
                style={{
                  color: "blue",
                  shape: "pill",
                  label: "pay",
                  tagline: false,
                  layout: "horizontal",
                }}
                createOrder={createOrder}
                onApprove={onApprove}
        />

```



Paypal will redirect the user to a new window to complete the payment. 


![](https://paper-attachments.dropbox.com/s_DC6E8A8E4922E20EC90B04A7B753483339F9486803BF4597878F1DB1072D2D9F_1613318001261_Screenshot+2021-02-14+at+16.53.04.png)


You can test this out using the sandbox email provided on the Paypal developer dashboard.

The full repo for the code is [here](https://github.com/onedebos/nextjs-paypal-example).