ShippingMethodSelector

React SDK guidance for ShippingMethodSelector.

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

When to use it

Use ShippingMethodSelector during checkout when the customer needs to choose one delivery method and understand the price or delivery-speed tradeoff.

Composition notes

Pass a methods array with price and optional estimatedDays, then keep the selected method in parent state. currency, locale, and labels.freeShipping help the selector align with the rest of the checkout language.

Behavior and theming guidance

Keep the options practical and easy to compare. This surface should help the customer choose quickly, not decode shipping jargon.

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=ShippingMethodSelector.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

ShippingMethodSelector

# ShippingMethodSelector > 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/shipping-method-selector](https://sdk.enad.io/components/commerce/shipping-method-selector). ## When to use it Use `ShippingMethodSelector` during checkout when the customer needs to choose one delivery method and understand the price or delivery-speed tradeoff. ## Composition notes Pass a `methods` array with price and optional `estimatedDays`, then keep the selected method in parent state. `currency`, `locale`, and `labels.freeShipping` help the selector align with the rest of the checkout language. ## Behavior and theming guidance Keep the options practical and easy to compare. This surface should help the customer choose quickly, not decode shipping jargon. ## 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=ShippingMethodSelector. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes