Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/payment-method-selector.

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.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=PaymentMethodSelector.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes