Integrate Stripe Payments with ReactJS and NodeJS

Try Out Live:

You can try out the Stripe Payments at the URL: https://stripe-react-node.vercel.app/

Use the demo test card numbers from the following URL: https://docs.stripe.com/testing?testing-method=card-numbers

About

"Integrate Stripe Payments with ReactJS and NodeJS" is a full stack application developed using ReactJS, NodeJS and Tailwind CSS. The user clicks on "Purchase" button on home page and gets redicted to Payment Info page where user enters his card details. Then request is sent to process by the stripe's library and if payment is successful user will get redirect to Payment Success page.

I have published a step by step article using this project on GeeksForGeeks. You can click HERE to view.

Quick Start

Step 1: Clone the repository:

git clone https://github.com/girishgr8/Stripe-React-Node.git

Step 2: Install dependencies for frontend and backend

# Install dependencies for backend
npm install --prefix backend

# Install dependencies for frontend
npm install --prefix frontend

NOTE : You can see the sample .env.example which will contain the environment variables. Replace the values with your own KEYS/SECRETS/URLs and rename the file to .env instead of .env.example

Step 3: Start the NodeJS backend

Open a terminal and type the below command:

# Go inside the backend folder
cd backend
# Start the NodeJS server
npm start

Step 4: Start the ReactJS frontend

Open another terminal and type the below command:

# Go inside the frontend folder
cd frontend
# Start the React App
npm start

NOTE: Backend(Node) runs on http://localhost:4000 and Frontend(React) on http://localhost:3000.

Demo :

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Developed with ❤️ by Girish Thatte