Integrating PayPal sandbox with React JS project

The PayPal sandbox is a self-contained, virtual testing environment that simulates the live PayPal production environment. This provides a shielded space where you can initiate process PayPal API requests without using any live PayPal accounts.

In this article, I am going to show you how to integrate PayPal sandbox with your ReactJS project.

Step 01:

Install the npm dependency. You can see more details about this dependency here.

npm install --save react-paypal-express-checkout

Step 02:

Create a new file for the PayPal button in your project as a component and copy the below code to it.

Filename: PaypalButton.js
you can get the code here.

Step 03:

Next, you have to add the sandbox app ID to the above code. For this, you have to visit the PayPal developer and click login to the dashboard. (If you don’t have an account you need to signup first).

Then you will redirect to a page as shown in the below diagram.

PayPal developer account

Follow the steps below to create the app ID.

1. Click Create App which is under REST API apps. Then you will direct to a page as shown in the below diagram.

Create App

2. Enter a unique App Name and click Create App.

Now you can see your Sandbox account and the client ID as shown in the below diagram.

3. Copy the Client ID and paste it in your PaypalButton.js under the const client = {…}.

Step 04:

Import PaypalButton.js to the component where you need to display the PayPal button. Additionally, you have to pass the total amount and the history which you can get as a prop as shown in the below diagram. (Here I have added clearCart as I need to clear the cart after doing the payment. You can add it as your requirement)

And when you run your project you can see the PayPal button as shown in the below diagram.

PayPal button

Step 05:

Now you can click this button to do your test payments. And it will redirect you to the PayPal login page.

To log in and do the test payments you can use the credentials from the account we created in step 03.

For this, go to Accounts under SandBox. Then you can see two default accounts created for you. If you need your own account, you can create one by clicking create account. Or else you can use any default credentials to do test payments.

Here you can see two default accounts as business and personal. You can use the personal account as the buyer account and the business account as the seller account. To get the credentials, click the three dots in the manage accounts and click view/edit account. There you can see the email ID and password for the account.

Sandbox test accounts

Step 06:

After login with the credentials of your personal account, you can see the below pop-up with the details about your payments. Click Pay Now to proceed with the payment.

Step 07:

To check the payments visit the PayPal sandbox account and log in with the buyer account credentials which are used to log in to do the payment in step 06.
Here you can see all the transactions you did as shown in the below diagram.

And if you log in by using the business account credentials you can see the payments you received to your account as shown in the below diagram.

So now we have completed all the steps and I hope you have successfully integrated your React JS app with PayPal sandbox.

♥️♥️ Thank you for reading. And stay tuned for upcoming articles. ♥️♥️