Inside a Checkout UI Extension component, import `useCartLines` from `@shopify/ui-extensions-react/checkout`.
Call `useCartLines()` to receive a reactive array of cart line objects, each containing merchandise ID, quantity, title, price, and any line-item attributes.
To read the entire checkout API surface (totals, buyer identity, discount codes), use the `useApi` hook (or the specific named hooks such as `useTotalAmount`, `useBuyerIdentity`) available from `@shopify/ui-extensions-react/checkout` — verify the current hook names in the Shopify Checkout UI Extensions API reference.
Render the cart data inside the extension's component using layout components (BlockStack, InlineStack, Text) from `@shopify/ui-extensions-react`.
For metafield data on line items or products, declare the metafield read access in the extension TOML under `[extensions.capabilities]` or the relevant metafield configuration block, then access via the metafield query capability.
Test data reading via `shopify app dev` — the local dev server hot-reloads the extension in the browser checkout editor, letting you inspect live hook values.
Known gotchas
Checkout UI Extension hooks are reactive and will re-render the component when the underlying cart changes (e.g., quantity update). Avoid expensive calculations directly in render — memoize derived values with `useMemo`.
Not all cart fields are available by default. Some fields (like certain metafields or customer-specific data) require explicit capability declarations in the extension TOML. Missing declarations return undefined or empty values at runtime.
The `useApi` surface differs from the Storefront API and the Admin API — it is a constrained read-only view of the checkout session. You cannot mutate cart state via `useCartLines`; use the write APIs (e.g., `applyAttributeChange`) for mutations.
Give your agent this knowledge — and 200+ more routes
One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp