CHECKOUT COMPONENT

Multi-step checkout wizard with shipping, payment, and order review.

PROPS

PropTypeDescription
cartCartShopping cart data
onComplete(order) => voidCallback when checkout completes
showProgressBarbooleanShow progress indicator

Multi-Step Checkout Flow

Shipping
Delivery
Payment
1

Shipping Address

2

Shipping Method

3

Payment Details

1<Checkout
2  cart={cart}
3  steps={['shipping', 'delivery', 'payment']}
4  onComplete={(order) => router.push(`/orders/${order.id}`)}
5  showProgressBar
6/>

USAGE EXAMPLES

COMPLETE CHECKOUT IMPLEMENTATION

1import { Checkout } from '@/components/fanbace/checkout';
2import { useCart, useCheckout } from '@/lib/sdk';
3 
4export default function CheckoutPage() {
5  const { cart } = useCart();
6  const { processCheckout } = useCheckout();
7 
8  const handleComplete = async (data: CheckoutData) => {
9    const order = await processCheckout(data);
10    router.push(`/confirmation?order=${order.id}`);
11  };
12 
13  return <Checkout cart={cart} onComplete={handleComplete} />;
14}