Customer Shop & Checkout Portal

E-commerce front-end and checkout engine validations.

1. Catalog Browsing & PDP Variants

The Product Listing Page (PLP) features infinite scroll and faceted sidebars filtering by size, brand, price, color, and gender. The Product Detail Page (PDP) uses an interactive variant selector. Selecting a specific color variant swaps the gallery with color-specific Cloudinary images, and selecting a size checks the stock levels for that size in real-time.

2. Step-by-Step Checkout Pipeline

Step 1

Shipping Address Details

Customers enter shipping coordinates. Zod schema applies validation rules. Full Name, Address, City, and State are required. PIN code (ZIP) must match the Indian 6-digit PIN regex ^\d{6}$ (auto-populating city/state). Mobile phone number must match the Indian 10-digit mobile regex ^[6-9]\d{9}$.

Step 2

Shipping Options & Coupon Validation

Choose from shipping methods defined in global settings. Apply coupon codes (flat, percentage, or free shipping). The checkout queries /api/coupons/validate with the cart subtotal, validating expiration dates, min-cart requirements, and maximum usage thresholds.

Step 3

Payment Selection & Gateway Checkout

Options are populated dynamically from settings: Cash on Delivery (COD) or Online. Accepting store policies is mandatory. If Pay Online is selected, Next.js triggers the Razorpay Checkout modal, loading the Razorpay SDK dynamically. Prefilled contact details are transmitted for a seamless payment experience.

3. Razorpay Signature Verification & Safety Handlers

When a customer pays, Razorpay returns a `payment_id`, `order_id`, and `signature`. The server-side route `/api/orders/verify-payment` verifies the signature using an HMAC-SHA256 hash containing:

crypto.createHmac("sha256", process.env.RAZORPAY_KEY_SECRET)
  .update(razorpay_order_id + "|" + razorpay_payment_id)
  .digest("hex") === razorpay_signature;

Order Safety Rollbacks: If the user dismisses the payment modal midway or payment fails, an API handler cancels the order draft and immediately rolls back the reserved SKU stocks to prevent database inventory leaks.

4. Customer Loyalty Points System

The platform features a premium Customer Loyalty Points rewards system to incentivize repeated purchases:

Point Accumulation: Customers automatically earn 5% of the total order value in points when their order status is transitioned to DELIVERED.
Redemption System: At Checkout, if a customer has a points balance, a redemption panel appears. They can choose to redeem points (worth ₹1 each) which are immediately applied as a discount on their order total.
Loyalty Dashboard: Under the customer account page, users can view their current tier, points transaction logs, rules, and tiers progress.
Reversals: If an order is returned or refunded, points earned from that order are automatically deducted from their balance.

5. Flash Sales Storefront Flow

Sellers can schedule high-visibility Flash Sales with direct count-downs:

Announcement Banner: When a flash sale is active, a red announcement banner ticks at the top of the store with a real-time countdown timer.
Catalog Displays: Product cards display a flashing ⚡ FLASH DEAL badge and display the discounted price highlighted.
Product Details Countdown: The product page renders a dedicated countdown widget ticking down to the exact second of campaign expiration.
Server Verification: To prevent customer cart tempering, checkout APIs cross-reference items with active database flash campaigns, verifying discount rates server-side.

6. Recently Viewed, Sharing & Reviews

Recently Viewed Products: Dynamically tracks viewed items locally, presenting a responsive carousel on catalog pages for easier navigation.
Social Product Share: Integrates the native Web Share API (on mobile) or copies direct product URLs with custom clipboard notifications for easy sharing.
Enhanced Reviews: Supports interactive star ratings, user image uploads, and lists rating summaries with percentage bars.