Integrating Payment Gateways in Next.js 14

Prem Prakash — Mon, 02 Sep 2024 23:08:31 +0000

Managing 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.local file 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!

Forem: Prem Prakash