Checkout Summary

Component 14

About

An order total broken into subtotal, discount, tax and shipping line items, with charges that aren't known yet shown as "calculated at next step" instead of a false £0.00.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Checkout Summary to your project and fits it to your theme.

Code

How Checkout Summary is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Button } from "@/components/ui/button";
import { CheckoutSummary } from "@/components/ui/checkout-summary";

// Synthetic basket, mirroring the real usage in astralyx-ui's Storefront
// example (src/examples/shop.tsx): a chair plus two monitor arms.
const SUBTOTAL = 149_500 + 2 * 21_900;

export default function CheckoutSummaryDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-6 text-foreground">
      <div className="w-full max-w-sm">
        <CheckoutSummary
          subtotal={SUBTOTAL}
          currency="GBP"
          lines={[
            {
              id: "discount",
              label: "Discount — WELCOME10",
              amount: -Math.round(SUBTOTAL * 0.1),
              discount: true,
            },
            {
              id: "delivery",
              label: "Delivery",
              amount: null,
              note: "Depends on your address",
            },
            {
              id: "vat",
              label: "VAT (20%)",
              amount: Math.round(SUBTOTAL * 0.9 * 0.2),
            },
          ]}
          footer={<Button className="w-full">Continue to payment</Button>}
        />
      </div>
    </div>
  );
}