Payment Methods 2 - Add payment method dialogPro
An empty-state billing card that opens a dialog to add a new card with name, number, expiry, CVC and a make-default checkbox, all as placeholder fields. Use it as the first-run experience on a billing page or anywhere users attach a payment method in context.
About Payment Methods 2
An empty-state billing card that opens a dialog to add a new card with name, number, expiry, CVC and a make-default checkbox, all as placeholder fields. Use it as the first-run experience on a billing page or anywhere users attach a payment method in context.
Payment Methods 2 is a payment methods block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 121 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- payment methods
- dialog
- add card
- billing
- empty state
- form
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add payment-methods-02Dependencies installed automatically: lucide-react.
Uses: button, checkbox, dialog, input, label, reveal, utils.
Usage
import PaymentMethods02 from "@/components/blocks/payment-methods-02"
export default function Page() {
return <PaymentMethods02 />
}