Next Pay Flow

A modern subscription management platform built with Next.js 15, featuring secure payment processing with Razorpay and Google OAuth authentication.

ScreenShots

Login Page

Dashboard Page

Payment for professional plan

Updated Subscription

Features

• Authentication System

  • Google OAuth integration with NextAuth.js
  • Google One Tap login support
  • Secure session management with MongoDB adapter

• Payment Integration

  • Razorpay payment gateway integration
  • Secure payment verification with HMAC signature validation
  • Multiple subscription plans (Basic, Professional, Business)
  • Real-time payment status updates
  • Payment history with invoice generation
  • PDF invoice downloads for completed transactions
  • Advanced rate limiting protection for payment endpoints

• Dashboard & UI

  • Modern, responsive dashboard with Framer Motion animations
  • Dark/Light theme support
  • Real-time subscription status display
  • Account management interface
  • Custom error pages (404, 500)
  • Interactive plan comparison table

• User Management

  • Account settings page with profile updates
  • Subscription management and billing history
  • Account deletion with GDPR compliance
  • User preferences management

• Support System

  • Beautiful contact form with glass morphism design
  • Email notifications via Resend
  • User information auto-populated in support requests
  • Direct email communication channel

• Database Integration

  • MongoDB for user and subscription data
  • Optimized database queries with proper ObjectId handling
  • Session-based user plan updates

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS 4
• Animation: Framer Motion
• Authentication: NextAuth.js with Google OAuth
• Database: MongoDB with official Node.js driver
• Payments: Razorpay
• Email: Resend for transactional emails
• PDF Generation: jsPDF with jsPDF-AutoTable
• UI Components: Shadcn/ui, Lucide React icons
• Styling: Tailwind CSS with custom theme support
• Notifications: Sonner for toast notifications
• Rate Limiting: Upstash Redis with @upstash/ratelimit for production-grade API protection

Project Structure

src/
├── app/
│   ├── api/
│   │   ├── auth/[...nextauth]/     # NextAuth configuration
│   │   ├── payments/               # Payment API routes
│   │   │   ├── create-order/       # Order creation
│   │   │   ├── verify-payment/     # Payment verification
│   │   │   ├── history/            # Payment history
│   │   │   └── invoice/            # PDF invoice generation
│   │   ├── user/                   # User management APIs
│   │   │   ├── update-profile/     # Profile updates
│   │   │   └── delete-account/     # Account deletion
│   │   └── support/                # Support system
│   │       └── send-message/       # Email support requests
│   ├── dashboard/                  # User dashboard
│   │   ├── billing/                # Payment history & invoices
│   │   ├── settings/               # Account settings
│   │   └── support/                # Support contact page
│   ├── login/                      # Login page
│   ├── error.tsx                   # Global error handler
│   └── not-found.tsx               # 404 page
├── components/
│   ├── auth/                       # Authentication components
│   ├── dashboard/                  # Dashboard comparison table
│   ├── providers/                  # React providers
│   ├── theme/                      # Theme toggle components
│   └── ui/                         # Reusable UI components
└── lib/                           # Utility functions and configurations
    ├── mongodb.ts                  # MongoDB client configuration
    ├── razorpay.ts                 # Razorpay client setup
    └── rate-limit.ts               # Rate limiting configuration

Setup Instructions

1. Clone the repository

   git clone https://github.com/yourusername/next-pay-flow.git
   cd next-pay-flow

2. Install dependencies

   npm install

3. Environment Variables Create a .env file in the root directory with the following variables:

   # MongoDB Configuration
   MONGODB_URI=your-mongodb-connection-string
   
   # Google OAuth (Server-side)
   GOOGLE_CLIENT_ID=your-google-client-id
   GOOGLE_CLIENT_SECRET=your-google-client-secret
   
   # Google OAuth (Client-side - Only Client ID is safe to expose)
   NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
   
   # NextAuth Configuration
   NEXTAUTH_SECRET=your-nextauth-secret-key
   
   # Razorpay Configuration
   RAZORPAY_KEY_ID=your-razorpay-key-id
   RAZORPAY_KEY_SECRET=your-razorpay-secret-key
   NEXT_PUBLIC_RAZORPAY_KEY_ID=your-razorpay-key-id
   RAZORPAY_WEBHOOK_SECRET=your-webhook-secret (optional)
   
   # Email Configuration (Resend)
   RESEND_API_KEY=your-resend-api-key
   
   # Upstash Redis Configuration (for Rate Limiting)
   UPSTASH_REDIS_REST_URL=your-upstash-redis-url
   UPSTASH_REDIS_REST_TOKEN=your-upstash-redis-token
   
   # Application Environment
   NODE_ENV=development

   Important Notes:

   • Get Resend API key from: https://resend.com (Free tier: 3,000 emails/month)
   • Get Google OAuth credentials from: https://console.cloud.google.com
   • Get Razorpay keys from: https://dashboard.razorpay.com
   • Get Upstash Redis credentials from: https://upstash.com (Free tier: 10,000 requests/day)
   • Never expose GOOGLE_CLIENT_SECRET or RAZORPAY_KEY_SECRET to the client
   • Generate NEXTAUTH_SECRET using: openssl rand -base64 32

   Setting up Upstash Redis:

   1. Go to https://upstash.com and create a free account
   2. Create a new Redis database (select any region close to you)
   3. Copy the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN from the database details
   4. Add them to your .env file

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

Key Implementation Details

Authentication Flow

• Integrated NextAuth.js with MongoDB adapter for persistent sessions
• Custom session callbacks to include user subscription data
• Google OAuth and Google One Tap for seamless login experience

Payment Processing

• Secure order creation with Razorpay API
• Client-side payment modal integration
• Server-side payment verification using HMAC signatures
• Automatic user plan updates upon successful payment

Database Design

• User documents with embedded subscription objects
• Proper ObjectId handling for MongoDB queries
• Session-based real-time data updates

Security Features

• CSRF protection with NextAuth
• Payment signature verification
• Environment variable protection for sensitive data
• Secure API route implementations
• Production-grade rate limiting with Upstash Redis
  • Serverless-compatible - Works perfectly in Vercel/Netlify/AWS Lambda
  • User-based rate limiting for authenticated endpoints (prevents per-user abuse)
  • IP-based rate limiting for public endpoints (webhook protection)
  • Sliding window algorithm - More accurate than fixed windows
  • Configurable limits per endpoint:
    • Create Order: 5 requests/minute per user
    • Verify Payment: 10 requests/minute per user
    • Webhook: 100 requests/minute per IP
  • Advanced headers: Retry-After, X-RateLimit-Limit, X-RateLimit-Reset
  • Built-in analytics for monitoring rate limit hits

API Endpoints

Authentication

• /api/auth/* - NextAuth endpoints (sign in, sign out, session)

Payments

• POST /api/payments/create-order - Create Razorpay order (Rate limited: 5 req/min per user)
• POST /api/payments/verify-payment - Verify and process payment (Rate limited: 10 req/min per user)
• GET /api/payments/history - Get user payment history
• POST /api/payments/invoice - Generate and download PDF invoice
• POST /api/payments/webhook - Handle Razorpay webhooks (Rate limited: 100 req/min per IP)

User Management

• POST /api/user/update-profile - Update user profile information
• DELETE /api/user/delete-account - Delete user account (GDPR compliant)

Support

• POST /api/support/send-message - Send support request via email

Deployment

The application is ready for deployment on platforms like Vercel, with proper environment variable configuration for production MongoDB and Razorpay credentials.

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

License

MIT License - see LICENSE file for details