import React, { useState } from ‘react’;
import { CreditCard, Check, ShieldCheck, ChevronDown, Tag, UserCircle } from ‘lucide-react’;
const InputField = ({ label, required, type = “text”, placeholder = “”, className = “” }) => (
);
const SelectField = ({ label, required, options, className = “” }) => (
);
export default function App() {
const [shipToDifferent, setShipToDifferent] = useState(false);
const [paymentMethod, setPaymentMethod] = useState(‘bacs’);
const [showCoupon, setShowCoupon] = useState(false);
const cartItems = [
{ id: 1, name: “Premium Wireless Headphones”, quantity: 1, price: 299.00 },
{ id: 2, name: “Ergonomic Desk Chair”, quantity: 1, price: 199.50 },
{ id: 3, name: “USB-C Charging Cable (2m)”, quantity: 2, price: 15.00 }
];
const subtotal = cartItems.reduce((acc, item) => acc + (item.price * item.quantity), 0);
const shipping = 15.00;
const tax = subtotal * 0.08; // 8% mock tax
const total = subtotal + shipping + tax;
return (
{/* Header / Page Title */}
Checkout
Securely complete your purchase.
{/* WooCommerce style notices */}
Have a coupon?
{showCoupon && (
)}
{/* Left Column: Billing Details */}
Billing details
{/* Right Column: Order Summary & Payment */}
Your order
| Product | Subtotal |
|---|---|
|
{item.name} × {item.quantity} | ${(item.price * item.quantity).toFixed(2)} |
| Subtotal | ${subtotal.toFixed(2)} |
| Shipping | Flat rate: ${shipping.toFixed(2)} |
| Tax | ${tax.toFixed(2)} |
| Total | ${total.toFixed(2)} |
{/* Payment Gateway Area */}
{/* BACS Payment */}
{paymentMethod === ‘bacs’ && (
)}
{/* Check Payments */}
{paymentMethod === ‘cheque’ && (
)}
{/* Cash on Delivery */}
{paymentMethod === ‘cod’ && (
)}
{/* Credit Card / Stripe Mock */}
{paymentMethod === ‘stripe’ && (
)}
Guaranteed safe & secure checkout
);
}