# 🔧 CHECKOUT SYSTEM - TECHNICAL ARCHITECTURE

## System Architecture Overview

```
┌────────────────────────────────────────────────────────────────┐
│                    CHECKOUT SYSTEM (Fixed)                     │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ Frontend Layer                                            │  │
│  ├──────────────────────────────────────────────────────────┤  │
│  │ • checkout.php (HTML Form)                               │  │
│  │ • Bootstrap 5.3 Styling                                  │  │
│  │ • Font Awesome 6.5 Icons                                 │  │
│  │ • JavaScript Validation & UPI Screen                     │  │
│  │ • QR Code Generation (qrcode.js library)                │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ Backend Layer (PHP)                                       │  │
│  ├──────────────────────────────────────────────────────────┤  │
│  │ • Session Management (session_start)                      │  │
│  │ • Output Buffering (ob_start/ob_end)                     │  │
│  │ • Form Validation                                         │  │
│  │ • Order Creation                                          │  │
│  │ • Payment Method Routing                                  │  │
│  │ • Error Handling & Logging                               │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ Data Access Layer                                         │  │
│  ├──────────────────────────────────────────────────────────┤  │
│  │ • includes/db.php (MySQLi Connection)                    │  │
│  │ • includes/shopping-functions.php                         │  │
│  │   - createOrder()                                         │  │
│  │   - addOrderItems()                                       │  │
│  │   - clearCart()                                           │  │
│  │   - getCartItems()                                        │  │
│  │   - getCartTotal()                                        │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ Database Layer                                            │  │
│  ├──────────────────────────────────────────────────────────┤  │
│  │ Tables:                                                   │  │
│  │ • orders (id, user_id, total_price, status...)          │  │
│  │ • order_items (id, order_id, product_id, qty, price)    │  │
│  │ • payments (id, order_id, method, amount, status...)    │  │
│  │ • products (id, name, price, image...)                   │  │
│  │ • cart (id, product_id, quantity, price...)             │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ Payment Processing Layer                                  │  │
│  ├──────────────────────────────────────────────────────────┤  │
│  │ • check-upi-payment.php (Status Polling)                │  │
│  │ • verify-razorpay-payment.php (Verification)            │  │
│  │ • razorpay-webhook.php (Async Confirmation)             │  │
│  │ • Payment Gateway APIs                                   │  │
│  └──────────────────────────────────────────────────────────┘  │
│                                                                 │
│  ┌──────────────────────────────────────────────────────────┐  │
│  │ Confirmation Layer                                        │  │
│  ├──────────────────────────────────────────────────────────┤  │
│  │ • order-confirmation.php                                 │  │
│  │ • Displays order details                                 │  │
│  │ • Shows order items                                      │  │
│  │ • Print/Continue Shopping actions                        │  │
│  └──────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────────┘
```

## Request Flow Diagram

### Non-UPI Payment Methods
```
CLIENT                          SERVER                        DATABASE
  │                               │                               │
  │ 1. View checkout page         │                               │
  ├──────────────────────────────>│                               │
  │                               │ GET checkout.php              │
  │                               │ ob_start()                    │
  │                               │                               │
  │ 2. Fill form + Select Credit Card                            │
  │ 3. Click "Place Order"        │                               │
  ├──────────────────────────────>│                               │
  │                               │ POST checkout.php             │
  │                               │ Validate form                 │
  │                               │ Get cart items                │
  │                               ├──────────────────────────────>│
  │                               │ Query cart table              │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │                               │ createOrder()                 │
  │                               ├──────────────────────────────>│
  │                               │ INSERT INTO orders            │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │                               │ addOrderItems()               │
  │                               ├──────────────────────────────>│
  │                               │ INSERT INTO order_items       │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │                               │ clearCart()                   │
  │                               ├──────────────────────────────>│
  │                               │ DELETE FROM cart              │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │                               │ ob_end_clean()                │
  │                               │ header(Location: ...)         │
  │                               │ exit                          │
  │ 4. Redirect (302)             │                               │
  │<──────────────────────────────┤                               │
  │                               │                               │
  │ 5. Load confirmation page     │                               │
  ├──────────────────────────────>│                               │
  │                               │ GET order-confirmation.php    │
  │                               │                               │
  │                               │ Get order by ID               │
  │                               ├──────────────────────────────>│
  │                               │ SELECT FROM orders            │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │                               │ Get order items               │
  │                               ├──────────────────────────────>│
  │                               │ SELECT FROM order_items       │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │ 6. Display confirmation       │                               │
  │<──────────────────────────────┤                               │
  │                               │                               │
```

### UPI Payment Flow
```
CLIENT                          SERVER                        DATABASE
  │                               │                               │
  │ 1. View checkout page         │                               │
  ├──────────────────────────────>│                               │
  │                               │ GET checkout.php              │
  │                               │ ob_start()                    │
  │                               │                               │
  │ 2. Fill form + Select UPI     │                               │
  │ 3. Click "Place Order"        │                               │
  ├──────────────────────────────>│                               │
  │                               │ POST checkout.php             │
  │                               │ Validate form                 │
  │                               │ Get cart items                │
  │                               ├──────────────────────────────>│
  │                               │ Query cart                    │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │                               │ createOrder()                 │
  │                               ├──────────────────────────────>│
  │                               │ INSERT INTO orders            │
  │                               │ Get $order_id                 │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │                               │ addOrderItems()               │
  │                               ├──────────────────────────────>│
  │                               │ INSERT INTO order_items       │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │                               │ $order_created = true         │
  │                               │ ob_end_flush()                │
  │ 4. Page reload                │ Output HTML with JS vars      │
  │<──────────────────────────────┤                               │
  │                               │                               │
  │ 5. JavaScript detects:        │                               │
  │    orderCreated=true          │                               │
  │    orderId=X                  │                               │
  │    → showUPIPaymentScreen()    │                               │
  │                               │                               │
  │ 6. Display QR code            │                               │
  │    + "Waiting for payment..."  │                               │
  │                               │                               │
  │ 7. User scans QR code         │                               │
  │    with UPI app               │                               │
  │    → Sends payment             │                               │
  │                               │                               │
  │ 8. startPaymentStatusCheck()  │                               │
  │    Poll every 2 seconds        │                               │
  ├──────────────────────────────>│                               │
  │                               │ GET check-upi-payment.php     │
  │                               │ Query payments table          │
  │                               ├──────────────────────────────>│
  │                               │ SELECT FROM payments          │
  │                               │<──────────────────────────────┤
  │                               │                               │
  │ 9. Payment detected!          │                               │
  │    Show success message        │                               │
  │    Wait 2 seconds              │                               │
  │                               │                               │
  │ 10. Auto-redirect to           │                               │
  │     order-confirmation.php     │                               │
  ├──────────────────────────────>│                               │
  │                               │ GET order-confirmation.php    │
  │                               │ order_id=X                    │
  │                               │                               │
  │ 11. Display confirmation      │                               │
  │<──────────────────────────────┤                               │
  │                               │                               │
```

## Data Flow Diagram

```
┌─────────────────┐
│  User Browser   │
└────────┬────────┘
         │
         │ checkout.php (form input)
         ▼
┌─────────────────────────────────┐
│  PHP Form Processing            │
│  • Validate input               │
│  • Get cart items               │
│  • Determine flow               │
└────┬───────────────┬────────────┘
     │               │
     │ UPI           │ Non-UPI
     │               │
     ▼               ▼
┌──────────────┐  ┌──────────────────┐
│ Create Order │  │ Create Order     │
│ $order_id=X  │  │ $order_id=X      │
└──────┬───────┘  └────────┬─────────┘
       │                   │
       ▼                   ▼
┌──────────────┐  ┌──────────────────┐
│ Store items  │  │ Store items      │
│ Clear cart   │  │ Clear cart       │
│ Set flag:    │  │ Send redirect    │
│ $order_      │  │ header()         │
│ created=true │  │                  │
└──────┬───────┘  └────────┬─────────┘
       │                   │
       ▼                   │
┌──────────────────────┐   │
│ Page reloads with    │   │
│ JavaScript vars:     │   │
│ • orderCreated=true  │   │
│ • orderId=X          │   │
└──────┬───────────────┘   │
       │                   │
       ▼                   │
┌──────────────────────────┐
│ JavaScript Layer:        │
│ • Detects orderCreated   │
│ • Calls showUPI...()     │
│ • Generates QR code      │
│ • Starts polling         │
└──────┬───────────────────┘
       │
       ▼
┌──────────────────────────┐
│ User scans QR            │
│ Sends UPI payment        │
└──────┬───────────────────┘
       │
       ▼
┌──────────────────────────┐
│ JavaScript Polling       │
│ Checks payment status    │
│ every 2 seconds          │
└──────┬───────────────────┘
       │
       ├─→ Payment not yet received
       │   (Loop continues)
       │
       └─→ Payment received ✓
           │
           ▼
      ┌──────────────────┐
      │ Auto-redirect    │
      │ order-           │
      │ confirmation.php │
      │ ?order_id=X      │
      └────┬─────────────┘
           │
           ▼
      ┌──────────────────┐
      │ Display order    │
      │ confirmation     │
      │ page ✓           │
      └──────────────────┘

          OR (Non-UPI)

     ┌──────────────┐
     │ HTTP Redirect │
     │ order-        │
     │ confirmation  │
     │ ?order_id=X   │
     └────┬──────────┘
          │
          ▼
     ┌──────────────┐
     │ Display order│
     │ confirmation│
     │ page ✓      │
     └──────────────┘
```

## Code Structure

```
checkout.php (878 lines)
│
├── PHP Backend (Lines 1-86)
│   ├── ob_start() - Output buffering
│   ├── Session & DB includes
│   ├── Error reporting setup
│   ├── Form validation
│   ├── Order creation
│   ├── Conditional payment routing
│   └── header.html include
│
├── HTML Structure (Lines 87-535)
│   ├── Banner section
│   ├── Checkout form
│   │   ├── Personal info fields
│   │   ├── Shipping fields
│   │   ├── Payment method options
│   │   ├── Payment details section
│   │   └── Submit button
│   └── Order summary sidebar
│
├── CSS Styles (Lines 100-420)
│   ├── Responsive layout
│   ├── Form styling
│   ├── Payment options styling
│   ├── Order summary styling
│   └── Mobile breakpoints
│
└── JavaScript (Lines 598-878)
    ├── Variable declarations
    │   ├── cartTotal
    │   ├── orderId
    │   ├── orderCreated
    │   └── paymentDetails
    │
    ├── QR Code Functions
    │   ├── generateUPIString()
    │   ├── generateQRCode()
    │   └── updateUPIDetails()
    │
    ├── Payment Screen Functions
    │   ├── showUPIPaymentScreen()
    │   └── startPaymentStatusCheck()
    │
    ├── Form Handling
    │   ├── DOMContentLoaded listener
    │   ├── Form validation
    │   └── Submit button handling
    │
    └── Event Listeners
        └── beforeunload cleanup
```

## Database Schema

```sql
-- Orders Table
CREATE TABLE orders (
  id INT PRIMARY KEY AUTO_INCREMENT,
  user_id INT NULL,  -- Allow NULL for guest orders
  total_price DECIMAL(10, 2),
  shipping_address TEXT,
  status ENUM('pending', 'processing', 'shipped', 'delivered'),
  order_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

-- Order Items Table
CREATE TABLE order_items (
  id INT PRIMARY KEY AUTO_INCREMENT,
  order_id INT NOT NULL,
  product_id INT NOT NULL,
  quantity INT,
  price DECIMAL(10, 2),
  FOREIGN KEY (order_id) REFERENCES orders(id),
  FOREIGN KEY (product_id) REFERENCES products(id)
);

-- Payments Table
CREATE TABLE payments (
  id INT PRIMARY KEY AUTO_INCREMENT,
  order_id INT NOT NULL,
  amount DECIMAL(10, 2),
  method VARCHAR(50),
  status VARCHAR(50),
  transaction_id VARCHAR(255),
  payment_date TIMESTAMP,
  FOREIGN KEY (order_id) REFERENCES orders(id)
);

-- Cart Table
CREATE TABLE cart (
  id INT PRIMARY KEY AUTO_INCREMENT,
  user_id INT,
  product_id INT NOT NULL,
  quantity INT,
  price DECIMAL(10, 2),
  FOREIGN KEY (product_id) REFERENCES products(id)
);
```

## State Management

```javascript
Global State Variables:
│
├── cartTotal: number
│   └── Total cart amount in currency
│
├── upiId: string
│   └── UPI merchant ID
│
├── orderCreated: boolean
│   └── Set by PHP, detected by JS
│   └── Controls UPI payment screen display
│
├── orderId: number | null
│   └── Set by PHP after order creation
│   └── Used for redirect and payment confirmation
│
├── paymentDetails: object
│   └── Contains payment method info
│   └── Updated based on user selection
│
├── statusCheckInterval: interval ID
│   └── Stores interval for payment polling
│   └── Cleared when payment confirmed or user leaves
│
└── Tracking Variables
    ├── userName, userEmail, etc.
    └── Updated from form inputs
```

---

**Architecture created to ensure reliable, scalable checkout system** ✅
