This is a sample payment gateway integration app. The app includes a client-side built with React and a server-side built with Node.js and Express & APIs for making payments to Stripe Payment Gateway.
Payment APIs to Stripe (Creating & Listing Payments) Client-side code to show and collect the payments RESTful API using Express Error handling and validation Responsive UI with ChakraUI
To run this app locally, follow these steps: Clone the repository: git clone https://github.com/shanavajk/stripe-payments.git Change directory to the cloned repository: cd stripe-payments Change directory to the server-side: cd server Install dependencies for the server-side: npm install Change directory to the client-side: cd client Install dependencies for the client-side: npm install Go back to the root server directory: cd server && node index.js to start the server (Server PORT can be configured in .env file otherwise application will take default 4000 as port )
Get the secret key by Singing-Up on Stripe Official website, goto Dashboard to get the Secret Key and Publishable Key from API Key Menu
Set up some environment variables. Create a .env file and add the Secret Key.
SECRET_KEY="<STRIPE_SECRET_KEY>
REACT_APP_STRIPE_PUBLIC_API_KEY=<STRIPE_PUBLISHABLE_KEY>
REACT_APP_SERVER_URL="<SERVER_API_ENDPOINT>" (To make payment api calls)
The Stripe Payments app consists of a client-side and a server-side.
The client-side of the app is built with React and includes components and views. You can modify and add new components and pages to build your own UI.
To start the client-side development server, run npm start in the client directory of the app.
The server-side of the app is built with Node.js and Express, and includes routes for Payments.
To start the server-side development server, run node index.js in the server directory of the app.
This app is hosted on vercel.com.
https://stripe-payments-client-shanavajk.vercel.app/
Create vercel.json in server folder and add the below json configuration.
{
"version": 2,
"builds": [
{
"src": "*.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
Sign-Up on vercel.com using your GitHub creadentials. From Overview tab you can select your repository from GitHub & Import. On the deployment screen deploy the client and server folder separately & make sure you add the environment variable defined in your .env file.
Note: For Server Deployment override the Build Command use node index.js instead of npm run build / start
This MERN app is open-source and available under the MIT License.
If you have any questions or suggestions, please feel free to contact me at shanavajkanakawad@gmail.com.