E-commerce

Multi-step Checkout

A four-step 'Almost yours.' checkout: contact and Lebanese address with inline validation, delivery zones priced by city with speed options, a calendar and time windows, payment by cash on delivery (USD or LBP), card with live brand detection, Luhn check and a flipping card preview, or a simulated Whish link, then a review with edit links and an order confirmation.

Full screen Add this to my project

Use the Live / Loading / Empty / Error switch at the top of the demo to see every state.

Why it matters

A checkout built for how Lebanon actually buys — cash on delivery, landmark-based addresses, zone pricing and LBP/USD — with validation that catches mistakes before the driver leaves, so fewer abandoned carts and failed deliveries.

How it works

01A progress stepper tracks Details → Delivery → Payment → Review; completed steps stay clickable and every field validates inline with a clickable error summary.
02Delivery fee follows the city's zone and speed (standard is free over $500); the calendar blocks Sundays and fully booked days, and time windows fill up.
03Card number formatting, brand detection (Visa, Mastercard, Amex, Discover), Luhn, expiry and CVC checks run in the browser only — nothing is stored or sent; promo code SITESUP10 takes 10% off.