Prem PrakashManaging payments in a web application can be challenging, especially when dealing with multiple payment gateways. To make this easier, I’ve created a demo project that integrates Stripe, Razorpay, PayPal, and Coinbase using Next.js 14. This project showcases how to seamlessly implement these popular payment solutions in a web app, with a focus on user-friendly UI and responsive design.
🚀 Live Demo
Curious to see it in action? Check out the live demo here.
🛠️ Installation Guide
If you’d like to run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/PremPrakashCodes/payment-gateways.git
- Navigate to the project directory:
cd payment-gateways
- Install dependencies:
npm install
-
Set up environment variables:
Create a
.env.localfile in the root directory and add the necessary API keys and configuration settings for the payment gateways.
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=
PAYPAL_CLIENT_ID=
PAYPAL_CLIENT_SECRET=
COINBASE_API_KEY=
COINBASE_WEBHOOK_SECRET=
- Run the development server:
npm run dev
- Open your browser: Visit http://localhost:3000 to see the app in action.
🎉 How to Use
Simply select a payment gateway from the available options, enter the required payment details, and proceed with the payment. This demo offers a straightforward look at how each gateway can be integrated into your application.
🤝 Contributing
Contributions are always welcome! If you’d like to contribute, please fork the repository and submit a pull request. For significant changes, it’s best to open an issue first to discuss your ideas.
📄 License
This project is licensed under the MIT License. Feel free to use and modify the code in your own projects.
🙌 Acknowledgements
A big thank you to the developers and communities behind:
📬 Contact
If you have any questions or feedback, I’d love to hear from you!
