# Payment Method Cart block

> Two-column shopping cart with order summary, coupon field, and payment method tiles

Cart review and checkout page: a thumbnail items Card with ButtonGroup quantity steppers beside a sticky rail of coupon InputGroup, Tooltip-explained Order Summary, and a four-tile payment RadioGroup. shadcn Card, Item, Tooltip, Empty. Order review.

- Type: Pro block
- Category: [Shopping Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-5
- MCP: `get_block("shopping-cart-5")`
- Built with: Button, Button Group, Card, Empty, Field, Input Group, Item, Radio Group, Separator, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A 4 logo tile payment method choice with a caption for the chosen one, ending a rail of coupon and summary cards

## Agent notes

- `handleCheckout` only sets the URL hash; the chosen `paymentMethod` stays in local state, so send it along with the order
- `PAYMENT_METHODS` holds 4 demo methods with fixed captions such as Card ending 4421 in Apple Wallet; swap in your own methods and their `logo`
- The header prints a fixed `ORDER_REFERENCE` and the summary adds one flat `DELIVERY_FEE`; replace both with real order data

## When not to use

- Per line delivery or pickup choices that change the fee rows in the summary: use [Pickup Option Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-4.md) (`get_block("shopping-cart-4")`)
- A free shipping progress bar and a Save For Later action on every line: use [Save-for-Later Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-1.md) (`get_block("shopping-cart-1")`)

## Install

```bash
npx shadcn@latest add @reui/shopping-cart-5
```

## About Shopping Cart blocks

### When to use

- A cart page where shoppers change quantities, remove lines and see the totals before paying
- A mini cart that drops from a header Cart button or slides in from the side after an add

### When not to use

- Rows of funds, coins, transactions or integrations, with no quantities or order total: use the [List blocks](https://web.dev.reui.io/blocks/application/list.md)
- A side panel over an app page for a record, a form or an assistant, with no prices: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)
- Taking contact, shipping address and card details to place and pay for the order: use the [Checkout blocks](https://web.dev.reui.io/blocks/ecommerce/checkout.md)

### Agent notes

- Lines live in local `useState` seeded from `CART_ITEMS` or `CART_LINES` in data.tsx; read them from your cart store and write each quantity change back
- The empty state's Restore Sample Cart button reloads the demo lines through `handleRestoreCart` or `handleRestore`; point it at your catalog
- Each priced file declares its own `formatCurrency` fixed to en-US and USD; change every copy to show another currency or locale

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.