https://github.com/srudhi6383/razorpay-integration

https://github.com/srudhi6383/razorpay-integration

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/srudhi6383/razorpay-integration
• Owner: srudhi6383
• Created: 2024-10-30T12:37:28.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-10-30T16:01:33.000Z (8 months ago)
• Last Synced: 2025-01-08T10:43:54.835Z (5 months ago)
• Language: JavaScript
• Homepage: https://razorpay-ashy-iota.vercel.app/
• Size: 182 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# E-Commerce Platform with Razorpay Integration

An interactive e-commerce platform built with React, featuring a Razorpay payment gateway integration, a product catalog, shopping cart, and checkout functionality. The platform provides a seamless shopping experience and efficient cart management.

## Features

- **Product List**: Browse through products with detailed views and add to cart functionality.

- **Product Details**: View detailed descriptions, pricing, and images.

- **Shopping Cart**: Add, remove, and adjust quantities of products in the cart.

- **Checkout**: Enter user information and proceed to payment via Razorpay.

- **Order Confirmation**: Post-payment order confirmation page showing order ID and payment status.

## Tech Stacks

  - React

  - React router

  - Axios

  - Tailwind CSS

  - Razorpay Integration

## Live link

   [https://razorpay-ashy-iota.vercel.app/](https://razorpay-ashy-iota.vercel.app/)

## Screenshots

1. **Product/Home Page**

![Screenshot 2024-10-30 205637](https://github.com/user-attachments/assets/d7f2f987-5ce4-4fe3-b584-52ad9fcde68a)

2. **Product Detail Page**

![Screenshot 2024-10-30 205646](https://github.com/user-attachments/assets/f6e1dd52-2079-4d77-a830-3a636743abe0)

3. **Cart Page**

![Screenshot 2024-10-30 205658](https://github.com/user-attachments/assets/2806d92c-43d7-4b72-9d14-3dada98c4a9d)

4. **Checkout Page**

![Screenshot 2024-10-30 205728](https://github.com/user-attachments/assets/4a1dc11f-1b36-4024-8b51-577c237e40e1)

![Screenshot 2024-10-30 205747](https://github.com/user-attachments/assets/190500df-94ee-456e-8380-5ebc91b738a9)

![Screenshot 2024-10-30 205825](https://github.com/user-attachments/assets/9d8b3448-f7a1-413a-995e-a342daf7bfeb)

![Screenshot 2024-10-30 205836](https://github.com/user-attachments/assets/38755082-b77e-4e18-bef8-16a9dd063098)

![Screenshot 2024-10-30 205900](https://github.com/user-attachments/assets/c817cef6-0be6-48bf-a419-1eb376d652b6)

![Screenshot 2024-10-30 205908](https://github.com/user-attachments/assets/ce12b868-e69c-4bc4-bf29-f228b3c01685)

5. **Confirmation Page**

![Screenshot 2024-10-30 205913](https://github.com/user-attachments/assets/4ec426c4-f1b9-4971-827c-3a539e838ff8)

## Getting Started

# Prerequisites

- Node.js (v14 or higher)

- npm or Yarn

## Installation

1. **Clone the repository**

   

 ```bash

   git clone https://github.com/srudhi6383/razorpay-integration.git

   cd razorpay-integration

```

2. **Install dependencies**

 ``` bash

    npm install

     or

    yarn install

```

3. **Environment Setup**

   - Create a ```.env``` file in the root directory

   - Add the following environment variables

     ``` bash

         REACT_APP_RAZORPAY_KEY=your_razorpay_key

         REACT_APP_API_BASE_URL=your_api_base_url

     ```

 4. **Run the application**

     

       ``` npm start ```

5. **Usage**

  - **Product Browsing**: Navigate to the product list to view and select items.

  - **Cart Management**: Add items to your cart and adjust quantities.

  - **Checkout and Payment**: Complete your purchase using the Razorpay integration.

  - **Order Confirmation**: Receive a confirmation screen post-payment, showing order details.