PayFlow is a React-based payment gateway management application that simulates the complete payment lifecycle. It enables users to create and manage payments, monitor transactions, manage account information, and submit support requests through a clean and responsive interface.

• Overview
• Version Information
• Live Demo
• Features
• Technology Stack
• Project Structure
• Prerequisites
• Installation
• Usage
• Known Limitations

https://payment-gateway-application.vercel.app

Email: admin@payflow.com Password: password1234

PayFlow demonstrates the core functionality of a payment gateway management system. The application includes user authentication, payment creation, transaction tracking, payment analytics, profile management, password management, and customer support.

The project uses React, Context API, and a service layer backed by localStorage to simulate backend operations, making it suitable for learning, technical documentation, and portfolio demonstrations.

• User Login
• User Registration

• Payment Statistics
• Monthly Payment Chart
• Recent Payments
• Notifications

• Create New Payment
• Payment History
• Payment Details
• Search Payments
• Filter by Status
• Export Payments to CSV
• Pagination

• Profile Management
• Change Password

• Contact Support
• Support Ticket Tracking
• View Ticket Details
• Frequently Asked Questions (FAQ)

• Responsive Design
• Toast Notifications

• React
• JavaScript (ES6+)
• Context API
• React Router
• CSS3
• Recharts
• React Toastify
• localStorage

src/
├── components/            # Reusable UI components
├── context/               # React Context providers
├── layouts/               # Application layouts
├── pages/
│   ├── Authentication/
│   │   ├── Login/
│   │   └── Signup/
│   ├── Dashboard/
│   ├── NewPayment/
│   ├── PaymentHistory/
│   ├── PaymentSuccess/
│   ├── Profile/
│   ├── Settings/
│   ├── ContactSupport/
│   ├── SupportTickets/
│   └── FAQ/
├── services/              # Business logic and localStorage operations
├── styles/                # Global styles
├── App.js
└── index.js

Before running the application, ensure the following software is installed on your system:

• Node.js (v18 or later recommended)
• npm (included with Node.js)
• A modern web browser (Google Chrome, Microsoft Edge, or Mozilla Firefox)

Clone the repository.

git clone https://github.com/ship123456/Payment-Gateway-Application

Navigate to the project directory.

cd payment-gateway

Install the required dependencies.

npm install

Start the development server.

npm start

The application will be available at:

http://localhost:3000

1. Sign in using an existing account or create a new account.
2. View payment statistics on the Dashboard.
3. Create a new payment transaction.
4. View, search, filter, and export payment history.
5. Manage your profile information.
6. Change your account password.
7. Submit support tickets and monitor their status.
8. Browse frequently asked questions from the FAQ page.

• Uses localStorage instead of a backend database.
• Authentication is simulated.
• No real payment gateway integration.
• Data is stored locally and is not synchronized across devices.