[Checkout UI Ext] Checkout data API examples + descriptions#4173
[Checkout UI Ext] Checkout data API examples + descriptions#4173SteveSill wants to merge 1 commit into2026-04-rcfrom
Conversation
🚨🚨🚨 Docs migration in progress 🚨🚨🚨We are actively migrating UI extension reference docs to MDX in the
During this migration, please be aware of the following:
Doc comments in Examples that previously lived in this repo are being moved to the What should I do?
Thanks for your patience while we complete the migration! 🙏 |
SteveSill
force-pushed
the
2026-04-checkout-data-examples
branch
4 times, most recently
from
9bb29df to
32dd732
Compare
SteveSill
force-pushed
the
2026-04-checkout-data-examples
branch
from
32dd732 to
8e8249b
Compare
SteveSill
added
the
#gsd:49303
SteveSill
changed the title
Add 17 new Preact code examples for checkout data APIs that previously had no examples or fewer than two. New examples (2 per API): - Addresses: read shipping address, read billing address - Buyer Identity: display customer info, display B2B company - Checkout Token: access token, display support reference - Cost: order cost summary, free shipping progress - Discounts: display codes, apply/remove codes - Gift Cards: display applied cards, apply a card - Note: display note, add/update note Additional examples (1 each): - Cart Lines, Customer Privacy, Order Also updates 10 existing example titles to imperative verbs. Made-with: Cursor
SteveSill
force-pushed
the
2026-04-checkout-data-examples
branch
from
8e8249b to
860ec64
Compare
timtrevor-shopify
left a comment
timtrevor-shopify
left a comment
There was a problem hiding this comment.
Couple of minor comments, Steve, otherwise LGTM!
| ...createExample('cost/order-summary', { | ||
| title: 'Display an order cost summary', | ||
| description: | ||
| 'Use `useSubtotalAmount`, `useTotalShippingAmount`, `useTotalTaxAmount`, and `useTotalAmount` to render a full cost breakdown. Shipping and tax are conditionally rendered since they may be unavailable on earlier checkout steps.', |
There was a problem hiding this comment.
I'm not completely clear what 'conditionally rendered' means here - is that just a fancy way of saying if it's there we'll show it, otherwise we won't?
| ...createExample('discounts/discount-codes', { | ||
| title: 'Display applied discount codes', | ||
| description: | ||
| 'Use the `useDiscountCodes` hook to list all active codes on the checkout. Each code is rendered in a stack, and the extension returns nothing when no codes are applied.', |
There was a problem hiding this comment.
I assume 'stack' here means the Polaris stack component? Might be worth spelling this out explicitly, as 'stack' obviously has other connotations to devs.
| ...createExample('note/display-note', { | ||
| title: 'Display the order note', | ||
| description: | ||
| 'Use the `useNote` hook to read the note attached to the checkout. The note is displayed in a banner only when one exists, and the extension renders nothing otherwise.', |
There was a problem hiding this comment.
| 'Use the `useNote` hook to read the note attached to the checkout. The note is displayed in a banner only when one exists, and the extension renders nothing otherwise.', | |
| 'Use the `useNote` hook to read a note if one is attached to the checkout. The note is displayed in a banner only when one exists, and the extension renders nothing otherwise.', |
2 participants
Closes https://github.com/shop/issues-learn/issues/1044
Summary
New examples (2 per API)
Additional examples (1 per API, bringing count to 2+)
Existing title updates
Changed 10 existing example titles from gerunds/noun phrases to imperative verbs (e.g. "Reading the selected shipping option" → "Read the selected shipping option", "Delivery groups" → "Read delivery groups").