DocsDocsSDKs

PurchaseActions

React SDK guidance for PurchaseActions.

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 PurchaseActions when the app wants the supported quantity-and-CTA family, but not the higher-level ProductHeroSection wrapper.

That usually means:

  • the storefront wants to own the exact action grouping
  • the quantity control and CTA layout need lower-level composition control
  • the page needs stock-state copy, size-guide links, notify-me buttons, or similar purchase-adjacent extensions without baking vendor-specific behavior into the SDK contract

Public anatomy

PurchaseActions is the action root of the PDP family.

Public parts:

  • PurchaseActions.Helper
  • PurchaseActions.Row
  • PurchaseActions.Quantity
  • PurchaseActions.Primary
  • PurchaseActions.Extensions
  • PurchaseActions.Secondary
  • PurchaseActions.Footer

Extension guidance

Treat size guides, back-in-stock prompts, find-in-store links, and similar flows as passed-in content.

That means:

  • the SDK owns the purchase layout surface
  • the app owns vendor-specific logic and integrations
  • the page can swap or remove extensions without changing the family contract

If the app needs a fully bespoke purchase area, drop down to the compound parts or provide custom actions.content through ProductHeroSection.

How it differs from ProductHeroSection

  • ProductHeroSection = section-first fast path
  • PurchaseActions = family root for lower-level purchase-action composition

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

Implementation notes

PurchaseActions

# PurchaseActions > 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/purchase-actions](https://sdk.enad.io/components/commerce/purchase-actions). ## When to use it Use `PurchaseActions` when the app wants the supported quantity-and-CTA family, but not the higher-level `ProductHeroSection` wrapper. That usually means: - the storefront wants to own the exact action grouping - the quantity control and CTA layout need lower-level composition control - the page needs stock-state copy, size-guide links, notify-me buttons, or similar purchase-adjacent extensions without baking vendor-specific behavior into the SDK contract ## Public anatomy `PurchaseActions` is the action root of the PDP family. Public parts: - `PurchaseActions.Helper` - `PurchaseActions.Row` - `PurchaseActions.Quantity` - `PurchaseActions.Primary` - `PurchaseActions.Extensions` - `PurchaseActions.Secondary` - `PurchaseActions.Footer` ## Extension guidance Treat size guides, back-in-stock prompts, find-in-store links, and similar flows as **passed-in content**. That means: - the SDK owns the purchase layout surface - the app owns vendor-specific logic and integrations - the page can swap or remove extensions without changing the family contract If the app needs a fully bespoke purchase area, drop down to the compound parts or provide custom `actions.content` through `ProductHeroSection`. ## How it differs from ProductHeroSection - `ProductHeroSection` = section-first fast path - `PurchaseActions` = family root for lower-level purchase-action composition ## 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=PurchaseActions. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes