# Minimal Payment Modal

> This component is a minimal and responsive payment modal that allows users to select a subscription plan and enter their card details to complete the payment. The selected plan dynamically updates the payment amount displayed on the submit button. It includes optional coupon code input, clean single-column input fields for cardholder name, card number, expiry, and CVC, and a compact design that works well on both desktop and mobile. The component emphasizes simplicity, clarity, and ease of use while keeping all essential payment interactions within a single dialog.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/minimal-payment-modal

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/minimal-payment-modal?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt