Twitter   -   PayPal   -   Docs   -   Code Samples   -   Blog

---

PayPal React (NodeJS) FullStack Standard Checkout

This sample app shows you how to integrate PayPal into your React app for the standard checkout workflow.

Run this project

PayPal Codespaces

Locally

Follow the instructions below.

Config Frontend

• Rename the .env.example file to .env.
• Inside of the App.jsx file, enter your PayPal client-id inside the initialOptions object.
• Run npm install in your terminal
• Run npm start in your terminal (this will run the server separetly from the backend)

Config Backend

• Rename the .env.example file to .env.
• Inside of the .env file, enter your PayPal client ID for the PAYPAL_CLIENT_ID and your PayPal app secret for the PAYPAL_CLIENT_SECRET enviroment variables.
• Run npm install in your terminal
• Run npm start in your terminal (this will run the server separetly from the frontend)

Run app

In the root folder, run npm start in your terminal. This will run the backend and frontend at the same time.

• Navigate in your browswer to http://localhost:3000/
• I'm able to have my frontend and backend server similute they are in the same server port by adding "proxy": "http://localhost:9597" to my frontend package.json.

Sample Card

Card Type: Visa

Card Number: 5458406954745076

Expiration Date: 01/2025

CVV: 123

PayPal Developer Community

The PayPal Developer community helps you build your career while improving your products and the developer experience. You’ll be able to contribute code and documentation, meet new people and learn from the open-source community.

• Website: developer.paypal.com
• Twitter: @paypaldev
• GitHub: @paypal