Payment Methods

Forms

About

A radio-group tile selector for choosing a payment method, such as card, bank transfer, cash on delivery, or wallet.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Payment Methods to your project and fits it to your theme.

Code

How Payment Methods is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import {
  PaymentMethods,
  type PaymentMethod,
} from "@/components/ui/payment-methods";

const methods: PaymentMethod[] = [
  { id: "card", label: "Card", description: "Visa, Mastercard", icon: "card" },
  {
    id: "bank",
    label: "Bank Transfer",
    description: "1-2 business days",
    icon: "bank",
  },
  {
    id: "cash",
    label: "Cash on delivery",
    description: "Pay when it arrives",
    icon: "cash",
  },
  {
    id: "wallet",
    label: "Wallet",
    description: "Pay from balance",
    icon: "wallet",
  },
];

export default function PaymentMethodsDemo() {
  const [selected, setSelected] = React.useState("card");

  return (
    <div className="w-full max-w-sm bg-background p-6">
      <PaymentMethods
        methods={methods}
        value={selected}
        onValueChange={setSelected}
      />
    </div>
  );
}