Checkout flow composed from steppers, order summaries, delivery and contact details, payment controls and a receipt state.
Keep the order, delivery and contact details visible while the customer chooses a payment method. Use a single labelled radio group and place secondary and primary actions together at the end of the form.
Completed
Completed
Current step
<section aria-labelledby="checkout-title">
<ol class="stepper stepper-horizontal mb-3" role="list" aria-label="Checkout progress">
<li class="stepper-item is-completed"><span class="stepper-marker" aria-hidden="true">1</span><div class="stepper-content"><strong class="stepper-label">Cart</strong><p class="stepper-status">Completed</p></div></li>
<li class="stepper-item is-completed"><span class="stepper-marker" aria-hidden="true">2</span><div class="stepper-content"><strong class="stepper-label">Delivery</strong><p class="stepper-status">Completed</p></div></li>
<li class="stepper-item" aria-current="step"><span class="stepper-marker" aria-hidden="true">3</span><div class="stepper-content"><strong class="stepper-label">Payment</strong><p class="stepper-status">Current step</p></div></li>
</ol>
<form
class="card shadow-sm border-primary w-100 mx-auto"
action="/orders"
method="post"
data-demo-form
data-demo-success-message="Checkout example submitted"
aria-labelledby="checkout-title">
<header class="card-header">
<h3 class="h4 card-title mb-0" id="checkout-title">Review and pay</h3>
<p class="card-subtitle mb-0">Check your details before placing the order.</p>
</header>
<div class="card-body pt-3 d-flex flex-column gap-4">
<div class="grid gap-4">
<div class="col-12 col-lg-7 d-flex flex-column gap-3">
<section aria-labelledby="checkout-order-summary">
<h4 class="h5" id="checkout-order-summary">Order summary</h4>
<ul class="list" aria-label="Items in this order">
<li class="list-item align-items-start">
<span class="list-item-text"><strong>Design systems handbook</strong><span class="text-muted">Hardcover · Quantity 1</span></span>
<strong>€89</strong>
</li>
<li class="list-item align-items-start">
<span class="list-item-text"><strong>Accessibility field guide</strong><span class="text-muted">Paperback · Quantity 1</span></span>
<strong>€49</strong>
</li>
</ul>
<div class="d-flex flex-column gap-1 border-top pt-2 mt-2">
<div class="d-flex justify-content-between gap-3"><span>Subtotal</span><span>€138</span></div>
<div class="d-flex justify-content-between gap-3"><span>Standard delivery</span><span>€9</span></div>
<div class="d-flex justify-content-between gap-3 h5 mb-0 pt-1"><span>Total</span><span>€147</span></div>
</div>
</section>
<div class="alert bg-primary">
<div class="alert-content">
<p class="alert-title">Secure checkout</p>
<p class="alert-message">Your payment details are encrypted during submission.</p>
</div>
</div>
<fieldset class="border border-0 min-w-0 p-0 m-0">
<legend class="form-label is-required">Payment method</legend>
<div class="d-flex flex-column gap-2">
<div class="form-check border border-primary bg-primary bg-opacity-10 rounded p-3">
<input class="form-check-input" id="checkoutPaymentCard" name="paymentMethod" type="radio" value="saved-card" checked required />
<label class="form-label" for="checkoutPaymentCard">Card ending in 2048</label>
</div>
<div class="form-check border rounded p-3">
<input class="form-check-input" id="checkoutPaymentBank" name="paymentMethod" type="radio" value="bank-transfer" required />
<label class="form-label" for="checkoutPaymentBank">Bank transfer</label>
</div>
</div>
</fieldset>
</div>
<aside class="col-12 col-lg-5 d-flex flex-column gap-3" aria-label="Delivery and contact details">
<section class="border rounded p-3" aria-labelledby="checkout-delivery-title">
<div class="d-flex justify-content-between align-items-start gap-3">
<div>
<h4 class="h5 mb-1" id="checkout-delivery-title">Delivery</h4>
<p class="text-muted mt-0 mb-2">Standard · Expected September 16–18</p>
</div>
<a href="/checkout/delivery">Edit</a>
</div>
<address class="mb-0"><span>John Doe<br />24 Example Street<br />10115 Berlin<br />Germany</span></address>
</section>
<section class="border rounded p-3" aria-labelledby="checkout-contact-title">
<div class="d-flex justify-content-between align-items-start gap-3">
<h4 class="h5 mb-2" id="checkout-contact-title">Contact</h4>
<a href="/checkout/delivery#contact">Edit</a>
</div>
<p class="mb-1"><a href="mailto:john.doe@example.com">john.doe@example.com</a></p>
<p class="mb-0"><a href="tel:+49305550142">+49 30 555 0142</a></p>
</section>
<div>
<label class="form-label is-required" for="checkoutEmail">Receipt email</label>
<input class="form-control" id="checkoutEmail" name="email" type="email" value="john.doe@example.com" autocomplete="email" required />
</div>
</aside>
</div>
<footer class="d-flex flex-column flex-sm-row gap-2">
<button class="btn btn-outline btn-secondary" type="button" data-toast="Checkout saved for later"><span>Save for later</span></button>
<button class="btn btn-solid btn-primary flex-sm-fill" type="submit"><span>Place order · €147</span></button>
</footer>
</div>
</form>
</section>After payment, replace the form with a clear confirmation state. Repeat the order number, amount, delivery destination and receipt destination so the customer can verify what happens next.
Order confirmed
Order #CU-1048 · September 11, 2026
Payment received
A receipt was sent to john.doe@example.com.
Visa ending in 2048
Expected September 16–18
John Doe<section aria-labelledby="checkout-confirmation-title">
<nav aria-label="Checkout progress">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/cart">Cart</a></li>
<li class="breadcrumb-item"><a href="/checkout/delivery">Delivery</a></li>
<li class="breadcrumb-item"><a href="/checkout/payment">Payment</a></li>
<li class="breadcrumb-item is-active" aria-current="page">Confirmation</li>
</ol>
</nav>
<article class="card shadow-sm border-success w-100 w-lg-75 mx-auto">
<header class="card-header">
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-2">
<div>
<p class="text-success mb-1"><strong>Order confirmed</strong></p>
<h3 class="h4 card-title mb-0" id="checkout-confirmation-title">Thank you, John</h3>
</div>
<span class="badge bg-success">Paid</span>
</div>
<p class="card-subtitle mb-0">Order #CU-1048 · September 11, 2026</p>
</header>
<div class="card-body pt-3 d-flex flex-column gap-4">
<div class="alert bg-success">
<div class="alert-content">
<p class="alert-title">Payment received</p>
<p class="alert-message">A receipt was sent to <span>john.doe@example.com</span>.</p>
</div>
</div>
<div class="grid gap-4">
<section class="col-12 col-md-7" aria-labelledby="receipt-summary-title">
<h4 class="h5" id="receipt-summary-title">Receipt summary</h4>
<div class="d-flex flex-column gap-2">
<div class="d-flex justify-content-between gap-3"><span>2 items</span><span>€138</span></div>
<div class="d-flex justify-content-between gap-3"><span>Standard delivery</span><span>€9</span></div>
<div class="d-flex justify-content-between gap-3 border-top pt-2 h5 mb-0"><span>Total paid</span><span>€147</span></div>
<p class="text-muted mb-0">Visa ending in 2048</p>
</div>
</section>
<section class="col-12 col-md-5 border rounded p-3" aria-labelledby="receipt-delivery-title">
<h4 class="h5 mb-1" id="receipt-delivery-title">Delivery details</h4>
<p class="text-muted mt-0 mb-2">Expected September 16–18</p>
<address class="mb-0"><span>John Doe<br />24 Example Street<br />10115 Berlin<br />Germany</span></address>
</section>
</div>
<footer class="d-flex flex-column flex-sm-row gap-2">
<button class="btn btn-outline btn-primary" type="button" data-toast="Receipt download started"><span>Download receipt</span></button>
<a class="btn btn-solid btn-primary flex-sm-fill" href="/shop">Continue shopping</a>
</footer>
</div>
</article>
</section>