---
title: "Checkout page"
description: "Kiln & Co.'s one-page checkout: contact, delivery and payment on the left, and an order summary that stays in view on the right."
plan: Pro
docs: https://ui.edbn.me/docs/templates/checkout-page
---

# Checkout page

Kiln & Co.'s one-page checkout: contact, delivery and payment on the left, and an order summary that stays in view on the right.

A quiet header with the wordmark, a secure-checkout note and Back to cart, then the email, the saved address with its shipping options, and saved cards or a new card down the left. The order summary with its discount code sits on the right and stays in view as the form scrolls. The delivery choice and the discount code feed one total, so the summary and the Pay button always agree; screen readers hear each change. Pay checks the email and the card first and disables the form while it pays; the sample Mastercard is declined, so its error shows above the button. Below 1024px the page is one column and the summary folds into a Show order summary bar at the top.

A Pro page template built on Base UI and Tailwind CSS v4.

## Installation

This is a Pro item. Once per project, create a token at https://ui.edbn.me/dashboard/tokens, put it in `.env.local` as `EDBN_TOKEN`, and add the registry to `components.json`:

```json
{
  "registries": {
    "@edbn": {
      "url": "https://ui.edbn.me/r/{name}.json",
      "headers": { "Authorization": "Bearer ${EDBN_TOKEN}" }
    }
  }
}
```

Then install:

```bash
npx shadcn@4.19.0 add @edbn/checkout-page
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, aspect-ratio, badge, button, card, checkbox, collapsible, field, input, input-group, radio-group, separator, spinner, text-link

## Source

The source is part of Pro (https://ui.edbn.me/pricing). The install above adds it to the project, ready to edit.

## More checkout templates

All 1, with install commands: https://ui.edbn.me/docs/templates/checkout · https://ui.edbn.me/docs/templates/checkout.md

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt