---
title: "Saved cards and new card form"
description: "A checkout's payment step: saved cards as option cards and a new-card form that formats and checks what you type."
plan: Pro
docs: https://ui.edbn.me/docs/blocks/payment-method
---

# Saved cards and new card form

A checkout's payment step: saved cards as option cards and a new-card form that formats and checks what you type.

Saved cards are option cards with the default marked; an expired card is turned off. Add a new card opens the card fields below, with autofill hints. The card number groups as you type and names its network. Pay checks the number, expiry, security code and name first, and focuses the first problem. While paying the form is disabled. The sample Mastercard is declined, so the error shows above the button.

A Pro block 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/payment-method
```

## Dependencies
- npm: lucide-react@^1.33.0
- edbn: edbn-base, badge, button, checkbox, field, input, input-group, radio-group, spinner

## Source

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

## More cart & checkout blocks

All 5, with install commands: https://ui.edbn.me/docs/blocks/cart-and-checkout · https://ui.edbn.me/docs/blocks/cart-and-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