DocsDocsSDKs

Price

React SDK guidance for Price.

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 Price anywhere money formatting needs to stay consistent across locales, currencies, and sale states. It keeps product cards, cart rows, and order summaries from each re-implementing the same formatting and discount logic.

Sale behavior

If both amount and original are present, the component can communicate discount state without extra formatting work in the calling surface. showDiscountBadge and colorSalePrice let you tune that presentation for denser contexts like search results or quieter contexts like order review.

Do not pre-format display strings unless you have to

Prefer passing numeric values and locale data into Price. That preserves consistent formatting rules and prevents drift between grids, PDPs, carts, and checkout summaries.

Commerce guidance

Price is intentionally narrow. Keep tax messaging, financing copy, and delivery disclaimers outside the component so the money display stays portable.

When a surface needs extra commercial context, compose those labels around Price instead of turning it into a full merchandising block.

Review notes

These notes define scoped usage boundaries without claiming exact prop or runtime truth beyond SDK package reference.

Price stays narrowly scoped to localized numeric money display. The component can communicate amount, comparison, and sale presentation; the caller owns tax, shipping, financing, promotion rules, and jurisdiction-specific commerce copy.

  • Prefer numeric money values and locale/currency data over preformatted strings so grids, PDPs, cart rows, and summaries do not drift.
  • Compose tax, delivery, financing, and promotion copy around Price instead of turning the component into a full offer or checkout summary.
  • Treat examples as display guidance, not authoritative pricing or discount-rule computation.

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

Implementation notes

  • Price displays numeric localized money. Keep tax, financing, delivery, and promotion copy outside this component.

Price

# Price > 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/price](https://sdk.enad.io/components/commerce/price). ## When to use it Use `Price` anywhere money formatting needs to stay consistent across locales, currencies, and sale states. It keeps product cards, cart rows, and order summaries from each re-implementing the same formatting and discount logic. ## Sale behavior If both `amount` and `original` are present, the component can communicate discount state without extra formatting work in the calling surface. `showDiscountBadge` and `colorSalePrice` let you tune that presentation for denser contexts like search results or quieter contexts like order review. > **Do not pre-format display strings unless you have to** > > Prefer passing numeric values and locale data into `Price`. That preserves consistent formatting > rules and prevents drift between grids, PDPs, carts, and checkout summaries. ## Commerce guidance `Price` is intentionally narrow. Keep tax messaging, financing copy, and delivery disclaimers outside the component so the money display stays portable. When a surface needs extra commercial context, compose those labels around `Price` instead of turning it into a full merchandising block. ## Review notes These notes define scoped usage boundaries without claiming exact prop or runtime truth beyond SDK package reference. `Price` stays narrowly scoped to localized numeric money display. The component can communicate amount, comparison, and sale presentation; the caller owns tax, shipping, financing, promotion rules, and jurisdiction-specific commerce copy. - Prefer numeric money values and locale/currency data over preformatted strings so grids, PDPs, cart rows, and summaries do not drift. - Compose tax, delivery, financing, and promotion copy around `Price` instead of turning the component into a full offer or checkout summary. - Treat examples as display guidance, not authoritative pricing or discount-rule computation. ## 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=Price. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes - `Price` displays numeric localized money. Keep tax, financing, delivery, and promotion copy outside this component.