A radio list of payment methods with a highlight that slides to the selection and a detail panel that expands under it.
Enter your card on the next step.
Pay from your bank app after checkout.
Your balance is applied first.
npx shadcn@latest add https://hyperblur.dev/r/pay-method-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-method-picker.tsx.
import { PayMethodPicker } from "@/components/hyperblur/pay-method-picker"
<PayMethodPicker defaultValue="bank" onChange={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| methods | PayMethod[] | card, bank transfer, wallet, cash voucher | Methods to list. Each has id, label, and optional description, detail, badge, icon (card, bank, wallet, voucher) and disabled. |
| value | string | Controlled id of the selected method. Pair with onChange. | |
| defaultValue | string | Initially selected id when uncontrolled. Defaults to the first method. | |
| onChange | (id: string) => void | Called when the selection changes by click or arrow keys. | |
| accent | string | "#2f7bff" | Highlight, icon and radio dot color. |
| label | string | "Payment method" | Accessible name of the radio group. |