Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/PremPrakashCodes/payment-gateways

This project demonstrates the integration of multiple payment gateways, including Stripe, Razorpay, PayPal and Coinbase using Next.js 14. It showcases how to implement these popular payment solutions in a web application.
https://github.com/PremPrakashCodes/payment-gateways

coinbase hacktoberfest nextjs nextjs-server-actions nextjs14 paypal razorpay stripe stripe-webhooks tailwindcss typescript

Last synced: about 18 hours ago
JSON representation

This project demonstrates the integration of multiple payment gateways, including Stripe, Razorpay, PayPal and Coinbase using Next.js 14. It showcases how to implement these popular payment solutions in a web application.

Awesome Lists containing this project

README

        

# Payment Gateways Demo

This project demonstrates the integration of multiple payment gateways, including **Stripe**, **Razorpay**, **PayPal**, and **Coinbase**, using **Next.js 14**. It showcases how to implement these popular payment solutions in a web application.

## Live Demo

Check out the live demo [here](https://payment-gateways-demo.vercel.app).

## Features

- **Multiple Payment Gateways**: Integration with Stripe, Razorpay, PayPal, and Coinbase.
- **Next.js 14**: Built with the latest features and capabilities of Next.js.
- **User-Friendly UI**: Simple and intuitive interface for making payments.
- **Responsive Design**: Optimized for all devices, including mobile and desktop.

## Installation

To run this project locally, follow these steps:

1. **Clone the repository**:

```bash
git clone https://github.com/PremPrakashCodes/payment-gateways.git
```

2. **Navigate to the project directory**:

```bash
cd payment-gateways
```

3. **Install dependencies**:

```bash
npm install
```

4. **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.

```plantext
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=
```

5. **Run the development server**:

```bash
npm run dev
```

6. **Open your browser**:
Visit [http://localhost:3000](http://localhost:3000) to see the app in action.

## Usage

Select a payment gateway from the available options, enter the required payment details, and proceed with the payment. The demo showcases a straightforward integration process for each gateway.

## Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and create a pull request. For major changes, please open an issue to discuss what you'd like to change.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

## Acknowledgements

- [Next.js](https://nextjs.org/)
- [Stripe](https://stripe.com/)
- [Razorpay](https://razorpay.com/)
- [PayPal](https://www.paypal.com/)
- [Coinbase](https://www.coinbase.com/)

## Contact

If you have any questions or feedback, feel free to reach out!

[LinkedIn](https://www.linkedin.com/in/premprakashsharma/)