PaymentMethodSelector
Radio-style selector for choosing one checkout payment method from a structured list.
Best for
Import
import { PaymentMethodSelector } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use PaymentMethodSelector when checkout offers several mutually exclusive payment options and the customer should compare them as distinct choices.
Composition notes
Pass a methods array with stable ids and keep the selected method in parent state. Optional descriptions and icons make comparisons easier, while disabled entries let you show unavailable methods without hiding them.
Behavior and theming guidance
Keep the option labels short and the descriptions practical. The selected and disabled states already have clear styling, so focus on feeding the component accurate availability and selection state.
Examples
Live examples you can edit directly in the sandbox.
Payment method cards
Use the selector when checkout needs one clear payment choice with optional descriptions and disabled states.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| methods | PaymentMethod[] | — | No description yet. |
| selected | string | — | No description yet. |
| onSelect | (methodId: string) => void | — | No description yet. |
| legend | string | — | Accessible legend for the fieldset |
| className | string | — | No description yet. |