Posted onSep 2, 2024

Integrating Payment Gateways in Next.js 14

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 integratesStripe,Razorpay,PayPal, andCoinbase usingNext.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 demohere.

🛠️ 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:

cdpayment-gateways

Install dependencies:

   npminstall

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:Visithttp://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.