How to accept Paypal payments with React - Robin Wieruch

This React tutorial should give you guidance on how to integrate PayPal in your React application. I came across this topic when I had to introduce a payment process for my own course platform . As I went through the same decision process, I decided in favor of PayPal and Stripe.

This tutorial shows you how to integrate PayPal in your React application. There are a couple of open source React + PayPal components out there. But I found out that it isn’t too difficult to set it up on your own. Afterward, you have full control over the PayPal payments in your React applications.

If you are interested in a full blown payment solution with PayPal and Stripe in React, you can also read about the Stripe in React setup in my other article.

Fortunately you don’t need to setup an own payment server for PayPal. You can implement a React component with the PayPal business logic and reuse it everywhere in your application(s).

Before you can implement the component, you need to create a PayPal REST API application . Your “App Name” can be any name. It’s only for yourself to identify your application in case you have more than one PayPal REST API app.

After you have created the app on the PayPal dashboard, you should find your Client IDs for your sandbox and live application. You will need both in order to test your PayPal payment in development mode but also to use it in production mode in your React application.

Now let’s build the PayPal React component from scratch. It will be a class component, because we have to manage state in React’s local state and use a couple of lifecycle methods.

Why is it necessary to manage a local state? The PayPal API library can be loaded asynchronously in our component. After we have loaded everything, the showButton state can be used to render the button. Doing it like this, enables you also to use the PayPal button for server-side rendering.

Let’s load the PayPal script asynchronously in our React component. Additionally, make sure to bind React and ReactDOM to the window object, because its needed for the PayPal React Component which comes with the library.

If you haven’t installed by now, you need to install the react-async-script-loader via npm. The scriptLoader is a higher order component which can be used in React to lazy load scripts.

Now, in the componentDidMount() lifecycle method, you can decide if the button should be rendered already. The scriptLoader gives you access to two properties in the props of the component, isScriptLoaded and isScriptLoadSucceed , to check if the script was loaded successfully. If that is the case, you could already render the PayPal button.

In most cases the script isn’t loaded in the componentDidMount() lifecycle method. This lifecycle method runs only once when the component is instantiated and it’s not 100% certain to have the script loaded at this point in time. Therefore you still have the componentWillReceiveProps() lifecycle method to check for the loaded script.

Now the only lifecycle method missing is the render() method. Let’s see what should be rendered in this method.

There are many props which are passed to your PayPal component. Let’s check what they stand for:

You will see in a later step how these props are passed to the PayPal component from a parent component which uses the PayPal component. For now, let’s focus on finishing the implementation. As you can see, the showButton boolean from React’s local component state is used for a conditional rendering of the PayPal button.

The only thing left is to implement the payment business logic in the payment() and onAuthorize() functions which follows PayPals REST API definition. First, you have to create a payment with the amount and currency grouped with your Client ID based on the environment. Second, you can execute the transaction.

That’s it for the PayPal button implementation. Now, how would you finally make use of it in another component?

It’s a security risk to keep the Client IDs in your source code. It’s better to include them in a .env file. That way, you prevent to make them publicly available. Don’t forget to add the .env file to your .gitignore file if you are using GitHub.

That’s basically the whole implementation of the PayPal component in React with the official PayPal libraries. Now you can use it in various applications. Hopefully, the tutorial helped you to setup PayPal in React on your own.