PaymentMethodSelector
Seletor de método de pagamento em cartões de rádio (Cartão, Pix, Boleto, Transferência).
Carregando...
Instalação
npx @kobana/ui add payment-method-selectorDependências instaladas automaticamente: card, radio-group, label (shadcn/ui), lucide-react
Importação
import { PaymentMethodSelector } from "@/components/kobana/payment-method-selector"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
methods | PaymentMethod[] | Cartão, Pix, Boleto, Transferência | Métodos de pagamento disponíveis |
value | string | — | Valor (value) do método atualmente selecionado |
onValueChange | (value: string) => void | — | Callback disparado ao selecionar um método |
disabled | boolean | false | Desabilita a seleção de métodos |
className | string | — | Classes adicionais aplicadas ao container |
Tipo PaymentMethod
| Campo | Tipo | Descrição |
|---|---|---|
value | string | Identificador único do método |
label | string | Título exibido para o método |
description | string? | Descrição opcional exibida abaixo do título |
icon | React.ReactNode? | Ícone opcional exibido à esquerda |
Uso
const [method, setMethod] = useState("pix")
<PaymentMethodSelector value={method} onValueChange={setMethod} />Use a prop methods para customizar as opções, seus rótulos, descrições e ícones:
import { CreditCard, QrCode } from "lucide-react"
<PaymentMethodSelector
value={method}
onValueChange={setMethod}
methods={[
{ value: "card", label: "Cartão", description: "Crédito", icon: <CreditCard className="h-5 w-5" /> },
{ value: "pix", label: "Pix", description: "Instantâneo", icon: <QrCode className="h-5 w-5" /> },
]}
/>O componente é totalmente controlado: forneça value e atualize-o em onValueChange. Ideal para fluxos de checkout que precisam apresentar os métodos de cobrança da Kobana.