UI Kits
Ecommerce

Checkout Summary

Order summary and checkout totals.

Add to UI Builder
Usage guidance

When to use it.

Keep price, availability, status, and primary purchase action easy to identify.

Accessibility

Implementation notes.

  • Expose price and status as text.
  • Keep purchase controls keyboard accessible.
  • Use descriptive labels for product imagery.
Release QA

Implementation checklist.

0/3
Handoff notes

Implementation notes for this component.

Quick section export
<section class="ap-checkout"><h3>Order summary</h3><div><span>Essential Toolkit</span><strong>$49.00</strong></div><div><span>Tax</span><strong>$3.92</strong></div><footer><span>Total</span><strong>$52.92</strong></footer><button>Continue to payment</button></section>
Related components

More in Ecommerce