# Checkout UI extensions Checkout UI extensions let app developers build custom functionality that merchants can install at defined points in the checkout flow, including product information, shipping, payment, order summary, and Shop Pay. > Shopify Plus: >Checkout UI extensions for the information, shipping and payment step are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan. ## Scaffolding an extension Use Shopify CLI to [generate a new extension](/apps/tools/cli/commands#generate-extension) in the directory of your app. ### Scaffolding ```bash npm init @shopify/app@latest cd your-app npm run shopify app generate extension ``` ```bash yarn create @shopify/app cd your-app yarn shopify app generate extension ``` ```bash pnpm create @shopify/app cd your-app pnpm shopify app generate extension ``` - [Watch](https://www.youtube.com/watch?v=jr_AIUDUSMw): Getting started video ## Extension Targets Extension targets provide locations where merchants can insert custom content. Static extension targets are tied to core checkout features like contact information, shipping methods, and order summary line items. Block extension targets can be displayed at any point in the checkout process and will always render regardless of which checkout features are available. An example is a field to capture order notes from the customer. Extension UIs are rendered using [remote UI](https://github.com/Shopify/remote-dom/tree/remote-ui), a fast and secure environment for custom [(non-DOM)](#security) UIs. ### Extension targets ```tsx import { reactExtension, Banner, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { return <Banner>Your extension</Banner>; } ``` ```js import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, api) => { const banner = root.createComponent( Banner, {}, 'Your extension', ); root.appendChild(banner); }, ); ``` - [Overview](/docs/api/checkout-ui-extensions/extension-targets-overview): Extension targets ## Configuration file When you create a checkout UI extension, the `shopify.extension.toml` file is automatically generated in your checkout UI extension directory. It contains the extension's configuration, which includes the extension name, extension targets, metafields, capabilities, and settings definition. ### shopify.extension.toml ```toml api_version = "2023-07" [[extensions]] type = "ui_extension" name = "My checkout extension" handle = "checkout-ui" [[extensions.targeting]] target = "purchase.checkout.block.render" module = "./Checkout.jsx" ``` - [Learn more](/docs/api/checkout-ui-extensions/configuration): Configuration guide ## Extension APIs APIs enable checkout UI extensions to get information about the checkout or related objects and to perform actions. For example, you can use the APIs to retrieve what's in customer carts so that you can offer related products. Extensions use JavaScript to read and write data and call external services, and natively render UIs built using Shopify's checkout components. ### Extension APIs ```tsx import { reactExtension, useShippingAddress, Banner, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.delivery-address.render-before', () => <Extension />, ); function Extension() { const {countryCode} = useShippingAddress(); if (countryCode !== 'CA') { return ( <Banner> Sorry, we can only ship to Canada at this time </Banner> ); } } ``` ```js import { extension, Banner, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.delivery-address.render-before', (root, api) => { renderApp(root, api); api.shippingAddress.subscribe(() => renderApp(root, api), ); }, ); function renderApp(root, api) { const {countryCode} = api.shippingAddress.current; // In case of a re-render, remove previous children. for (const child of root.children) { root.removeChild(child); } if (countryCode !== 'CA') { const banner = root.createComponent( Banner, {}, 'Sorry, we can only ship to Canada at this time', ); root.appendChild(banner); } } ``` - [API reference](/docs/api/checkout-ui-extensions/apis): Checkout extensions API ## UI components Checkout UI extensions declare their interface using supported UI components. Shopify renders the UI natively, so it's performant, accessible, and works in all of checkout's supported browsers. Checkout components are designed to be flexible, enabling you to layer and mix them to create highly-customized app extensions that feel seamless within the checkout experience. All components inherit a merchant's brand settings and the CSS cannot be altered or overridden. ### UI components ```tsx import { reactExtension, BlockStack, InlineStack, Button, Image, Text, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { return ( <InlineStack> <Image source="/url/for/image" /> <BlockStack> <Text size="large">Heading</Text> <Text size="small">Description</Text> </BlockStack> <Button onPress={() => { console.log('button was pressed'); }} > Button </Button> </InlineStack> ); } ``` ```js import { extension, BlockStack, Button, Image, InlineStack, Text, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, api) => { const inlineStack = root.createComponent( InlineStack, {}, [ root.createComponent(Image, { source: '/url/for/image', }), root.createComponent(BlockStack, {}, [ root.createComponent( Text, {size: 'large'}, 'Heading', ), root.createComponent( Text, {size: 'small'}, 'Description', ), ]), root.createComponent( Button, { onPress: () => { console.log('button was pressed'); }, }, 'Button', ), ], ); root.appendChild(inlineStack); }, ); ``` - [API reference](/docs/api/checkout-ui-extensions/components): Component library - [UI Reference](https://www.figma.com/community/file/1304881365343613949/checkout-and-account-components): Figma UI kit ## Security Checkout UI extensions are a safe and secure way to customize the appearance and functionality of the checkout page without compromising the security of checkout or customer data. - They run in an isolated sandbox, separate from the checkout page and other UI extensions. - They don't have access to sensitive payment information or the checkout page itself (HTML or other assets). - They are limited to specific UI components and APIs that are exposed by the platform. - They have limited access to [global web APIs](https://github.com/Shopify/ui-extensions/blob/unstable/documentation/runtime-environment.md). - Apps that wish to access [protected customer data](/docs/apps/store/data-protection/protected-customer-data), must submit an application and are subject to strict security guidelines and review proccesses by Shopify. - [Learn more](https://shopify.engineering/remote-rendering-ui-extensibility): Rendering extensions - [Learn more](/docs/apps/checkout/styling): Checkout styling ## Troubleshooting Find an end-to-end guide to testing your extensions in [Testing checkout UI extensions](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). If you're encountering errors when you run `dev` for an app that contains checkout UI extensions, follow this [troubleshooting guide](/apps/checkout/delivery-instructions/getting-started#troubleshooting). - [Learn more](/apps/checkout/delivery-instructions/getting-started#troubleshooting): Troubleshooting guide ## Resources ## References - [CartLineDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/apis/cartlinedetailsapi.txt): The API provided to extensions which target cart line details. - [CheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/apis/checkoutapi.txt): The API provided to extensions before the purchase is completed. - [ExtensionPoints](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/apis/extensionpoints.txt): The extension points and the APIs they provide. - [OrderStatusApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/apis/orderstatusapi.txt): The API provided to extension points on the order status page. - [PickupLocationsApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/apis/pickuplocationsapi.txt): The API provided to extensions rendering before and after local pickup locations. - [PickupPointsApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/apis/pickuppointsapi.txt): The API provided to extensions rendering before and after pickup points. - [ShippingMethodDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/apis/shippingmethoddetailsapi.txt): The API provided to extensions rendering after shipping method details and the expanded section of a selected shipping method. - [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/apis/standardapi.txt): The base API for all extension points. - [useExtensionApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/utilities/useextensionapi.txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension point, this object can contain different properties. For example, the `Checkout::CartLineDetails::RenderAfter` extension point will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Whereas others return the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object. For reference, see [ExtensionPoints](/docs/api/checkout-ui-extensions/apis/extensionpoints) to determine what API object will be returned by your extension point. - [useAppMetafields](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metafields/useappmetafields.txt): Returns the metafields configured with `shopify.ui.extension.toml`. - [useAttributeValues](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/attributes/useattributevalues.txt): Returns the values for the specified `attributes` applied to the checkout. - [useApplyAttributeChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/attributes/useapplyattributechange.txt): Returns a function to mutate the `attributes` property of the checkout. - [useAttributes](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/attributes/useattributes.txt): Returns the proposed `attributes` applied to the checkout. - [useCustomer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/buyer-identity/usecustomer.txt): Returns the current `Customer`. The value is `undefined` if the buyer isn't a known customer for this shop or if they haven't logged in yet. - [useEmail](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/buyer-identity/useemail.txt): Returns the email address of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data. - [usePhone](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/buyer-identity/usephone.txt): Returns the phone number of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data. - [useBuyerJourneyCompleted](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/buyer-journey/usebuyerjourneycompleted.txt): Returns true if the buyer completed submitting their order. For example, when viewing the order status page after submitting payment, the buyer will have completed their order. - [useBuyerJourneyIntercept](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/buyer-journey/usebuyerjourneyintercept.txt): Installs a function for intercepting and preventing progress on checkout. To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration. If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension. - [useBuyerJourney](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/buyer-journey/usebuyerjourney.txt): Returns the `buyerJourney` details on buyer progression in checkout. - [useExtensionCapability](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metadata/useextensioncapability.txt): Returns whether or not a given capability of an extension is granted. - [useExtensionCapabilities](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metadata/useextensioncapabilities.txt): Returns a list of an extension's granted capabilities. - [useApplyCartLinesChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/cart/useapplycartlineschange.txt): Returns a function to mutate the `lines` property of checkout. - [useCartLines](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/cart/usecartlines.txt): Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated. - [useTotalAmount](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/cart/usetotalamount.txt): Returns a `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated. - [useLocalizationCountry](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/localization/uselocalizationcountry.txt): Returns the country of the checkout, and automatically re-renders your component if the country changes. - [useCurrency](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/localization/usecurrency.txt): Returns the currency of the checkout, and automatically re-renders your component if the currency changes. - [useDeliveryGroups](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/delivery/usedeliverygroups.txt): Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes. - [useDiscountAllocations](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/reductions/usediscountallocations.txt): Returns the current discount allocations applied to the cart, and automatically re-renders your component if discount allocations changed. - [useApplyDiscountCodeChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/reductions/useapplydiscountcodechange.txt): Returns a function to add or remove discount codes. > Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves discount codes through a network call. - [useDiscountCodes](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/reductions/usediscountcodes.txt): Returns the current discount codes applied to the cart, and automatically re-renders your component if discount codes are added or removed. - [useExtensionData](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metadata/useextensiondata.txt): Returns the metadata about the extension. - [useExtensionEditor](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metadata/useextensioneditor.txt): Returns information about the editor where the extension is being rendered. - [useExtensionLanguage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/localization/useextensionlanguage.txt): Returns the buyer's language, as supported by the extension. - [useAppliedGiftCards](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/reductions/useappliedgiftcards.txt): Returns the current gift cards applied to the cart, and automatically re-renders your component if gift cards are added or removed. - [useApplyGiftCardChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/reductions/useapplygiftcardchange.txt): Returns a function to add or remove gift cards. > Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves gift card codes through a network call. - [useLanguage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/localization/uselanguage.txt): Returns the current language of the checkout, and automatically re-renders your component if the language changes. - [useMetafield](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metafields/usemetafield.txt): Returns a single filtered `Metafield` or `undefined`. - [useApplyMetafieldsChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metafields/useapplymetafieldschange.txt): Returns a function to mutate the `metafields` property of the checkout. - [useMetafields](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metafields/usemetafields.txt): Returns the current array of `metafields` applied to the checkout. You can optionally filter the list. - [useApplyNoteChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/notes/useapplynotechange.txt): Returns a function to mutate the `note` property of the checkout. - [useNote](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/notes/usenote.txt): Returns the proposed `note` applied to the checkout. - [useOrder](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/orders/useorder.txt): Returns the order information that's available post-checkout. - [useAvailablePaymentOptions](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/payments/useavailablepaymentoptions.txt): Returns all available payment options. - [useSelectedPaymentOptions](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/payments/useselectedpaymentoptions.txt): Returns payment options selected by the buyer. - [useSessionToken](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/sessions/usesessiontoken.txt): Provides access to session tokens, which can be used to verify token claims on your app's server. - [useSettings](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/storage/usesettings.txt): Returns the setting values defined by the merchant for the extension. - [useShippingAddress](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/buyer-identity/useshippingaddress.txt): Returns the proposed `shippingAddress` applied to the checkout. - [useShop](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/metadata/useshop.txt): Returns the `Shop` where the checkout is taking place. - [useStorage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/storage/usestorage.txt): Returns the key-value `Storage` interface for the extension point. - [useSubscription](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/utilities/usesubscription.txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [useTarget](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/cart/usetarget.txt): Returns the cart line the extension is attached to. This is only applicable to the `Checkout::CartLineDetails::RenderAfter` extension point. - [useTimezone](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/localization/usetimezone.txt): Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes. - [useTranslate](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/react-hooks/localization/usetranslate.txt): Returns the `I18nTranslate` interface used to translate strings. - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or `Checkbox` component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library takes care of applying the WAI-ARIA Accordion pattern automatically for the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Dialog pattern automatically for the activator and the modal content. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Popover Widget pattern automatically for the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/forms/textfield.txt): Use a text field to get text input from a customer. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library takes care of applying the WAI-ARIA Tooltip Widget pattern automatically for the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. - [CartLineItemApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/cartlineitemapi.txt): The API provided to extensions which target cart line items. - [CheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/checkoutapi.txt): The API provided to extensions before the purchase is completed. - [ExtensionTargets](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/extensiontargets.txt): The extension targets and the APIs they provide. - [OrderStatusApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/orderstatusapi.txt): The API provided to extension targets on the **Order status** page. - [PickupLocationListApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/pickuplocationlistapi.txt): The API provided to extensions rendering before and after local pickup locations. - [PickupPointListApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/pickuppointlistapi.txt): The API provided to extensions rendering before and after pickup points. - [ShippingOptionItemApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/shippingoptionitemapi.txt): The API provided to extensions rendering after shipping options and in the expanded section of a selected shipping option. - [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/standardapi.txt): The base API for all extension targets. - [useApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/useapi.txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). - [useAppMetafields](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/useappmetafields.txt): Returns the metafields configured with `shopify.extension.toml`. - [useAttributeValues](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useattributevalues.txt): Returns the values for the specified `attributes` applied to the checkout. - [useApplyAttributeChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useapplyattributechange.txt): Returns a function to mutate the `attributes` property of the checkout. - [useAttributes](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/attributes/useattributes.txt): Returns the proposed `attributes` applied to the checkout. - [useCustomer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usecustomer.txt): Returns the current `Customer`. The value is `undefined` if the buyer isn't a known customer for this shop or if they haven't logged in yet. - [useEmail](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useemail.txt): Returns the email address of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data. - [usePhone](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usephone.txt): Returns the phone number of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data. - [usePurchasingCompany](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/usepurchasingcompany.txt): Provides information about the company and its location that the business customer is purchasing on behalf of during a B2B checkout. It includes details that can be utilized to identify both the company and its corresponding location to which the business customer belongs. The value is `undefined` if a business customer isn't logged in. This function throws an error if the app doesn't have access to customer data. - [useBuyerJourneyCompleted](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourneycompleted.txt): Returns true if the buyer completed submitting their order. For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order. - [useBuyerJourneyIntercept](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourneyintercept.txt): Installs a function for intercepting and preventing progress on checkout. To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration. If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension. - [useBuyerJourney](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-journey/usebuyerjourney.txt): Returns the `buyerJourney` details on buyer progression in checkout. - [useExtensionCapability](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioncapability.txt): Returns whether or not a given capability of an extension is granted. - [useExtensionCapabilities](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioncapabilities.txt): Returns a list of an extension's granted capabilities. - [useApplyCartLinesChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/useapplycartlineschange.txt): Returns a function to mutate the `lines` property of checkout. - [useCartLines](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usecartlines.txt): Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated. - [useCheckoutSettings](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/usecheckoutsettings.txt): Returns the `checkoutSettings` applied to the checkout. - [useTotalAmount](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usetotalamount.txt): Returns a `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated. - [useLocalizationCountry](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/uselocalizationcountry.txt): Returns the country of the checkout, and automatically re-renders your component if the country changes. - [useCurrency](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usecurrency.txt): Returns the currency of the checkout, and automatically re-renders your component if the currency changes. - [useDeliveryGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/delivery/usedeliverygroup.txt): Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes. - [useDeliveryGroups](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/delivery/usedeliverygroups.txt): Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes. - [useDiscountAllocations](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/usediscountallocations.txt): Returns the current discount allocations applied to the cart, and automatically re-renders your component if discount allocations changed. - [useApplyDiscountCodeChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useapplydiscountcodechange.txt): Returns a function to add or remove discount codes. > Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves discount codes through a network call. - [useDiscountCodes](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/usediscountcodes.txt): Returns the current discount codes applied to the cart, and automatically re-renders your component if discount codes are added or removed. - [useExtensionApi](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/useextensionapi.txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead. - [useExtensionData](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensiondata.txt): Returns the metadata about the extension. > Caution: This is deprecated, use `useExtension()` instead. - [useExtensionEditor](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextensioneditor.txt): Returns information about the editor where the extension is being rendered. - [useExtensionLanguage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/useextensionlanguage.txt): Returns the buyer's language, as supported by the extension. - [useExtension](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useextension.txt): Returns the metadata about the extension. - [useAppliedGiftCards](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useappliedgiftcards.txt): Returns the current gift cards applied to the cart, and automatically re-renders your component if gift cards are added or removed. - [useApplyGiftCardChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/reductions/useapplygiftcardchange.txt): Returns a function to add or remove gift cards. > Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves gift card codes through a network call. - [useLanguage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/uselanguage.txt): Returns the current language of the checkout, and automatically re-renders your component if the language changes. - [useMetafield](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/usemetafield.txt): Returns a single filtered `Metafield` or `undefined`. - [useApplyMetafieldsChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/useapplymetafieldschange.txt): Returns a function to mutate the `metafields` property of the checkout. - [useMetafields](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metafields/usemetafields.txt): Returns the current array of `metafields` applied to the checkout. You can optionally filter the list. - [useApplyNoteChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/notes/useapplynotechange.txt): Returns a function to mutate the `note` property of the checkout. - [useNote](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/notes/usenote.txt): Returns the proposed `note` applied to the checkout. - [useOrder](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/orders/useorder.txt): Returns the order information that's available post-checkout. - [useAvailablePaymentOptions](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/payments/useavailablepaymentoptions.txt): Returns all available payment options. - [useSelectedPaymentOptions](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/payments/useselectedpaymentoptions.txt): Returns payment options selected by the buyer. - [useSessionToken](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/sessions/usesessiontoken.txt): Provides access to session tokens, which can be used to verify token claims on your app's server. - [useSettings](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/storage/usesettings.txt): Returns the setting values defined by the merchant for the extension. - [useApplyShippingAddressChange](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useapplyshippingaddresschange.txt): Returns a function to mutate the `shippingAddress` property of checkout. - [useShippingAddress](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/buyer-identity/useshippingaddress.txt): Returns the proposed `shippingAddress` applied to the checkout. - [useShop](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/metadata/useshop.txt): Returns the `Shop` where the checkout is taking place. - [useStorage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/storage/usestorage.txt): Returns the key-value `Storage` interface for the extension target. - [useSubscription](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/utilities/usesubscription.txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [useTarget](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/cart/usetarget.txt): Returns the cart line the extension is attached to. This hook can only be used by extensions in the `purchase.cart-line-item.line-components.render`, `purchase.checkout.cart-line-item.render-after`, `purchase.thank-you.cart-line-item.render-after`, and `customer-account.order-status.cart-line-item.render-after` extension targets. Until version `2023-04`, this hook returned a `PresentmentCartLine` object. - [useTimezone](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usetimezone.txt): Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes. - [useTranslate](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/react-hooks/localization/usetranslate.txt): Returns the `I18nTranslate` interface used to translate strings. - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or `Checkbox` component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library takes care of applying the WAI-ARIA Accordion pattern automatically for the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Dialog pattern automatically for the activator and the modal content. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Popover Widget pattern automatically for the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/forms/textfield.txt): Use a text field to get text input from a customer. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library takes care of applying the WAI-ARIA Tooltip Widget pattern automatically for the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. - [Addresses](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/addresses.txt): The API for interacting with addresses. - [Analytics](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/analytics.txt): The API for interacting with web pixels. - [Attributes](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/attributes.txt): The API for interacting with cart and checkout attributes. - [Buyer Identity](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/buyer-identity.txt): The API for interacting with the buyer identity. - [Buyer Journey](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/buyer-journey.txt): The API for interacting with the buyer journey. - [Cart Lines](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/cart-lines.txt): The API for interacting with the cart lines. - [Checkout Token](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/checkout-token.txt): The API for interacting with the token of a checkout. - [Cost](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/cost.txt): The API for interacting with the cost of a checkout. - [Delivery](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/delivery.txt): The APIs for interacting with delivery and shipping options. - [Discounts](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/discounts.txt): The API for interacting with discounts. - [Extension](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/extension.txt): The API for interacting with the metadata of an extension. - [Gift Cards](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/gift-cards.txt): The API for interacting with gift cards. - [Localization](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/localization.txt): The APIs for localizing your extension. - [Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/order.txt): The API for interacting with the order, available on the Order Status Page. - [Payments](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/payments.txt): The API for interacting with the payment options. - [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/settings.txt): The API for interacting with merchant settings. - [Shop](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/shop.txt): The API for interacting with shop. - [Storage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/storage.txt): The API for interacting with local storage. - [useApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/useapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). - [useExtensionApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/useextensionapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead. - [useSubscription()](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/usesubscription().txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [customer-account.order-status.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/block/customer-account-order-status-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the Order Status Page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/order-summary/customer-account-order-status-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element on the Order Status Page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/order-summary/customer-account-order-status-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the Order Status page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/information/customer-account-order-status-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the Order Status page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/navigation/purchase-checkout-actions-render-before.txt): A static extension target that is rendered immediately before any actions within each step. - [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/block/purchase-checkout-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/order-summary/purchase-checkout-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. - [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/order-summary/purchase-checkout-cart-line-list-render-after.txt): A static extension target that is rendered after all line items. - [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/information/purchase-checkout-contact-render-after.txt): A static extension target that is rendered immediately after the contact form element. - [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/shipping/purchase-checkout-delivery-address-render-after.txt): A static extension target that is rendered after the shipping address form elements. - [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/shipping/purchase-checkout-delivery-address-render-before.txt): A static extension target that is rendered between the shipping address header and shipping address form elements. - [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/payments/purchase-checkout-payment-method-list-render-after.txt): A static extension target that renders below the list of payment methods. - [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/payments/purchase-checkout-payment-method-list-render-before.txt): A static extension target that renders between the payment heading and payment method list. - [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/local-pickup/purchase-checkout-pickup-location-list-render-after.txt): A static extension target that is rendered after pickup location options. - [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/local-pickup/purchase-checkout-pickup-location-list-render-before.txt): A static extension target that is rendered before pickup location options. - [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/pickup-points/purchase-checkout-pickup-point-list-render-after.txt): A static extension target that is rendered immediately after the pickup points. - [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/pickup-points/purchase-checkout-pickup-point-list-render-before.txt): A static extension target that is rendered immediately before the pickup points. - [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/order-summary/purchase-checkout-reductions-render-after.txt): A static extension target that is rendered in the order summary, after the discount form and discount tag elements. - [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/order-summary/purchase-checkout-reductions-render-before.txt): A static extension target that is rendered in the order summary, before the discount form element. - [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/shipping/purchase-checkout-shipping-option-item-details-render.txt): A static extension target that is rendered under the shipping method within the shipping method option list, for each option. - [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/shipping/purchase-checkout-shipping-option-item-render-after.txt): A static extension target that is rendered after the shipping method details within the shipping method option list, for each option. - [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/shipping/purchase-checkout-shipping-option-list-render-after.txt): A static extension target that is rendered after the shipping method options. - [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/shipping/purchase-checkout-shipping-option-list-render-before.txt): A static extension target that is rendered between the shipping method header and shipping method options. - [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/block/purchase-thank-you-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/order-summary/purchase-thank-you-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element on the **Thank you** page. - [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/order-summary/purchase-thank-you-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Thank you** page. - [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/targets/information/purchase-thank-you-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Thank you** page. - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [ConsentCheckbox](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/consentcheckbox.txt): Use buyer consent checkboxes for collecting the buyer's approval for a given policy. - [ConsentPhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/consentphonefield.txt): Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or `Checkbox` component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library takes care of applying the WAI-ARIA Accordion pattern automatically for the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Dialog pattern automatically for the activator and the modal content. - [PaymentIcon](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/media/paymenticon.txt): Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Popover Widget pattern automatically for the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ProductThumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/media/productthumbnail.txt): Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/forms/textfield.txt): Use a text field to get text input from a customer. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library takes care of applying the WAI-ARIA Tooltip Widget pattern automatically for the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. - [Addresses](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/addresses.txt): The API for interacting with addresses. - [Analytics](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/analytics.txt): The API for interacting with web pixels. - [Attributes](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/attributes.txt): The API for interacting with cart and checkout attributes. - [Buyer Identity](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/buyer-identity.txt): The API for interacting with the buyer identity. - [Buyer Journey](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/buyer-journey.txt): The API for interacting with the buyer journey. - [Cart Lines](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/cart-lines.txt): The API for interacting with the cart lines. - [Checkout Token](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/checkout-token.txt): The API for interacting with the token of a checkout. - [Cost](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/cost.txt): The API for interacting with the cost of a checkout. - [Delivery](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/delivery.txt): The APIs for interacting with delivery and shipping options. - [Discounts](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/discounts.txt): The API for interacting with discounts. - [Extension](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/extension.txt): The API for interacting with the metadata of an extension. - [Gift Cards](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/gift-cards.txt): The API for interacting with gift cards. - [Localization](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/localization.txt): The APIs for localizing your extension. - [Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/order.txt): The API for interacting with the order, available on the **Order status** page. - [Payments](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/payments.txt): The API for interacting with the payment options. - [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/settings.txt): The API for interacting with merchant settings. - [Shop](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/shop.txt): The API for interacting with shop. - [Storage](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/storage.txt): The API for interacting with local storage. - [useApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/useapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). - [useExtensionApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/useextensionapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead. - [useSubscription()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/usesubscription().txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [customer-account.order-status.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/block/customer-account-order-status-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Order status** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/order-summary/customer-account-order-status-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/order-summary/customer-account-order-status-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/information/customer-account-order-status-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/navigation/purchase-checkout-actions-render-before.txt): A static extension target that is rendered immediately before any actions within each step. - [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/block/purchase-checkout-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/order-summary/purchase-checkout-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. - [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/order-summary/purchase-checkout-cart-line-list-render-after.txt): A static extension target that is rendered after all line items. - [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/information/purchase-checkout-contact-render-after.txt): A static extension target that is rendered immediately after the contact form element. - [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/shipping/purchase-checkout-delivery-address-render-after.txt): A static extension target that is rendered after the shipping address form elements. - [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/shipping/purchase-checkout-delivery-address-render-before.txt): A static extension target that is rendered between the shipping address header and shipping address form elements. - [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/footer/purchase-checkout-footer-render-after.txt): A static extension target that is rendered below the footer. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/header/purchase-checkout-header-render-after.txt): A static extension target that is rendered below the header. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/payments/purchase-checkout-payment-method-list-render-after.txt): A static extension target that renders below the list of payment methods. - [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/payments/purchase-checkout-payment-method-list-render-before.txt): A static extension target that renders between the payment heading and payment method list. - [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/local-pickup/purchase-checkout-pickup-location-list-render-after.txt): A static extension target that is rendered after pickup location options. - [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/local-pickup/purchase-checkout-pickup-location-list-render-before.txt): A static extension target that is rendered before pickup location options. - [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/pickup-points/purchase-checkout-pickup-point-list-render-after.txt): A static extension target that is rendered immediately after the pickup points. - [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/pickup-points/purchase-checkout-pickup-point-list-render-before.txt): A static extension target that is rendered immediately before the pickup points. - [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/order-summary/purchase-checkout-reductions-render-after.txt): A static extension target that is rendered in the order summary, after the discount form and discount tag elements. - [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/order-summary/purchase-checkout-reductions-render-before.txt): A static extension target that is rendered in the order summary, before the discount form element. - [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/shipping/purchase-checkout-shipping-option-item-details-render.txt): A static extension target that is rendered under the shipping method within the shipping method option list, for each option. - [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/shipping/purchase-checkout-shipping-option-item-render-after.txt): A static extension target that is rendered after the shipping method details within the shipping method option list, for each option. - [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/shipping/purchase-checkout-shipping-option-list-render-after.txt): A static extension target that is rendered after the shipping method options. - [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/shipping/purchase-checkout-shipping-option-list-render-before.txt): A static extension target that is rendered between the shipping method header and shipping method options. - [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/block/purchase-thank-you-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/order-summary/purchase-thank-you-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element on the **Thank you** page. - [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/order-summary/purchase-thank-you-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Thank you** page. - [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/information/purchase-thank-you-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Thank you** page. - [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/footer/purchase-thank-you-footer-render-after.txt): A static extension target that is rendered below the footer on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/targets/header/purchase-thank-you-header-render-after.txt): A static extension target that is rendered below the header on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [ConsentCheckbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/consentcheckbox.txt): Use buyer consent checkboxes for collecting the buyer's approval for a given policy. - [ConsentPhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/consentphonefield.txt): Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or `Checkbox` component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library takes care of applying the WAI-ARIA Accordion pattern automatically for the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/map.txt): Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: - `https://*.[MERCHANT-DOMAIN].com` - `https://shop.app` - `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. - [MapMarker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/mapmarker.txt): MapMarker represents a specific location or point of interest on a map. - [MapPopover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/interactive/mappopover.txt): MapPopover provides additional information or context about a specific location or point of interest on a map. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Dialog pattern automatically for the activator and the modal content. - [PaymentIcon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/paymenticon.txt): Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library takes care of applying the WAI-ARIA Popover Widget pattern automatically for the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ProductThumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/media/productthumbnail.txt): Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/textfield.txt): Use a text field to get text input from a customer. - [ToggleButton](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/togglebutton.txt): Options inside a [ToggleButtonGroup](/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup). - [ToggleButtonGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/forms/togglebuttongroup.txt): `ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library takes care of applying the WAI-ARIA Tooltip Widget pattern automatically for the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. - [Addresses](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/addresses.txt): The API for interacting with addresses. - [Analytics](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/analytics.txt): The API for interacting with web pixels. - [Attributes](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/attributes.txt): The API for interacting with cart and checkout attributes. - [Buyer Identity](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/buyer-identity.txt): The API for interacting with the buyer identity. - [Buyer Journey](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/buyer-journey.txt): The API for interacting with the buyer journey. - [Cart Lines](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/cart-lines.txt): The API for interacting with the cart lines. - [Checkout Token](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/checkout-token.txt): The API for interacting with the token of a checkout. - [Cost](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/cost.txt): The API for interacting with the cost of a checkout. - [Customer Privacy](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/customer-privacy.txt): The API for interacting with a customer's privacy consent. It is similar to the [Customer Privacy API in storefront](/docs/api/customer-privacy). - [Delivery](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/delivery.txt): The APIs for interacting with delivery and shipping options. - [Discounts](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/discounts.txt): The API for interacting with discounts. - [Extension](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/extension.txt): The API for interacting with the metadata of an extension. - [Gift Cards](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/gift-cards.txt): The API for interacting with gift cards. - [Localization](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/localization.txt): The APIs for localizing your extension. - [Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/order.txt): The API for interacting with the order, available on the **Order status** page. - [Payments](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/payments.txt): The API for interacting with the payment options. - [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/settings.txt): The API for interacting with merchant settings. - [Shop](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/shop.txt): The API for interacting with shop. - [Storage](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/storage.txt): The API for interacting with local storage. - [useApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/useapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). - [useExtensionApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/useextensionapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead. - [useSubscription()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/apis/usesubscription().txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [customer-account.order-status.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/block/customer-account-order-status-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Order status** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/customer-account-order-status-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/customer-account-order-status-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/information/customer-account-order-status-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [purchase.address-autocomplete.format-suggestion](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-format-suggestion.txt): An extension target that formats the selected address suggestion provided by a [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-suggest) target. This formatted address is used to auto-populate the fields of the address form. It must return a [`formattedAddress`](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-format-suggestion#addressautocompleteformatsuggestionoutput-propertydetail-formattedaddress). > Caution: > This extension target is only necessary if the corresponding [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-suggest) target does not provide a `formattedAddress` for the suggestions. If a formatted address is provided with each suggestion, then this target will not be called. > > If the [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-suggest) target is not implemented, then this target will not work. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-suggest). This includes extension settings specified in the configuration file. - [purchase.address-autocomplete.suggest](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-suggest.txt): An extension target that provides address autocomplete suggestions for address forms at checkout. Suggestions are presented to customers for delivery, billing, and pickup point addresses. The extension target must return a list of address [`suggestions`](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-suggest#addressautocompletesuggestoutput-propertydetail-suggestions). If a formatted address is provided with each suggestion, then it will be used to auto-populate the fields in the address form when the customer selects a suggested address. Optionally, you can implement the [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-format-suggestion) extension target to format an address based on the address suggestion selected by the customer. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/2024-04/targets/address/purchase-address-autocomplete-format-suggestion). This includes extension settings specified in the configuration file. - [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/navigation/purchase-checkout-actions-render-before.txt): A static extension target that is rendered immediately before any actions within each step. - [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/block/purchase-checkout-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/purchase-checkout-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. - [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/purchase-checkout-cart-line-list-render-after.txt): A static extension target that is rendered after all line items. - [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/information/purchase-checkout-contact-render-after.txt): A static extension target that is rendered immediately after the contact form element. - [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/shipping/purchase-checkout-delivery-address-render-after.txt): A static extension target that is rendered after the shipping address form elements. - [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/shipping/purchase-checkout-delivery-address-render-before.txt): A static extension target that is rendered between the shipping address header and shipping address form elements. - [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/footer/purchase-checkout-footer-render-after.txt): A static extension target that is rendered below the footer. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/header/purchase-checkout-header-render-after.txt): A static extension target that is rendered below the header. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/payments/purchase-checkout-payment-method-list-render-after.txt): A static extension target that renders below the list of payment methods. - [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/payments/purchase-checkout-payment-method-list-render-before.txt): A static extension target that renders between the payment heading and payment method list. - [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/local-pickup/purchase-checkout-pickup-location-list-render-after.txt): A static extension target that is rendered after pickup location options. - [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/local-pickup/purchase-checkout-pickup-location-list-render-before.txt): A static extension target that is rendered before pickup location options. - [purchase.checkout.pickup-location-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/local-pickup/purchase-checkout-pickup-location-option-item-render-after.txt): A static extension target that is rendered after the pickup location details within the local pickup option list, for each option. - [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/pickup-points/purchase-checkout-pickup-point-list-render-after.txt): A static extension target that is rendered immediately after the pickup points. - [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/pickup-points/purchase-checkout-pickup-point-list-render-before.txt): A static extension target that is rendered immediately before the pickup points. - [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/purchase-checkout-reductions-render-after.txt): A static extension target that is rendered in the order summary, after the discount form and discount tag elements. - [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/purchase-checkout-reductions-render-before.txt): A static extension target that is rendered in the order summary, before the discount form element. - [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/shipping/purchase-checkout-shipping-option-item-details-render.txt): A static extension target that is rendered under the shipping method within the shipping method option list, for each option. - [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/shipping/purchase-checkout-shipping-option-item-render-after.txt): A static extension target that is rendered after the shipping method details within the shipping method option list, for each option. - [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/shipping/purchase-checkout-shipping-option-list-render-after.txt): A static extension target that is rendered after the shipping method options. - [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/shipping/purchase-checkout-shipping-option-list-render-before.txt): A static extension target that is rendered between the shipping method header and shipping method options. - [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/block/purchase-thank-you-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/purchase-thank-you-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element on the **Thank you** page. - [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/order-summary/purchase-thank-you-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Thank you** page. - [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/information/purchase-thank-you-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Thank you** page. - [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/footer/purchase-thank-you-footer-render-after.txt): A static extension target that is rendered below the footer on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/targets/header/purchase-thank-you-header-render-after.txt): A static extension target that is rendered below the header on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/feedback/badge.txt): Use badges to highlight contextual information, like a label or a status, about an object. An object can be anything that has a status or label attributed to it, like an order or subscription. - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [ConsentCheckbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/consentcheckbox.txt): Use buyer consent checkboxes for collecting the buyer's approval for a given policy. - [ConsentPhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/consentphonefield.txt): Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or `Checkbox` component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library automatically applies the [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) to both the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/interactive/map.txt): Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: - `https://*.[MERCHANT-DOMAIN].com` - `https://shop.app` - `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. - [MapMarker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/interactive/mapmarker.txt): MapMarker represents a specific location or point of interest on a map. - [MapPopover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/interactive/mappopover.txt): MapPopover provides additional information or context about a specific location or point of interest on a map. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the modal content. - [PaymentIcon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/media/paymenticon.txt): Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the WAI-ARIA Popover Widget pattern to both the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ProductThumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/media/productthumbnail.txt): Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/overlays/sheet.txt): The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/2024-04/configuration#collect-buyer-consent) to be rendered. The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/textfield.txt): Use a text field to get text input from a customer. - [ToggleButton](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/togglebutton.txt): Options inside a [ToggleButtonGroup](/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup). - [ToggleButtonGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/togglebuttongroup.txt): `ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library automatically applies the [WAI-ARIA Tooltip Widget pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) to both the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. - [Addresses](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/addresses.txt): The API for interacting with addresses. - [Analytics](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/analytics.txt): The API for interacting with web pixels. - [Attributes](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/attributes.txt): The API for interacting with cart and checkout attributes. - [Buyer Identity](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/buyer-identity.txt): The API for interacting with the buyer identity. - [Buyer Journey](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/buyer-journey.txt): The API for interacting with the buyer journey. - [Cart Instructions](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/cart-instructions.txt): Instructions used to create the checkout. - [Cart Lines](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/cart-lines.txt): The API for interacting with the cart lines. - [Checkout Token](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/checkout-token.txt): The API for interacting with the token of a checkout. - [Cost](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/cost.txt): The API for interacting with the cost of a checkout. - [Customer Privacy](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/customer-privacy.txt): The API for interacting with a customer's privacy consent. It is similar to the [Customer Privacy API in storefront](/docs/api/customer-privacy). - [Delivery](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/delivery.txt): The APIs for interacting with delivery and shipping options. - [Discounts](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/discounts.txt): The API for interacting with discounts. - [Extension](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/extension.txt): The API for interacting with the metadata of an extension. - [Gift Cards](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/gift-cards.txt): The API for interacting with gift cards. - [Localization](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/localization.txt): The APIs for localizing your extension. - [Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/order.txt): The API for interacting with the order, available on the **Order status** page. - [Payments](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/payments.txt): The API for interacting with the payment options. - [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/settings.txt): The API for interacting with merchant settings. - [Shop](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/shop.txt): The API for interacting with shop. - [Storage](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/storage.txt): The API for interacting with local storage. - [useApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/useapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). - [useExtensionApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/useextensionapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead. - [useSubscription()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/usesubscription().txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [customer-account.order-status.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/block/customer-account-order-status-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Order status** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/order-summary/customer-account-order-status-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/order-summary/customer-account-order-status-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/information/customer-account-order-status-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Order status** page. > Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`. - [purchase.address-autocomplete.format-suggestion](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-format-suggestion.txt): An extension target that formats the selected address suggestion provided by a [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-suggest) target. This formatted address is used to auto-populate the fields of the address form. It must return a [`formattedAddress`](/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-format-suggestion#addressautocompleteformatsuggestionoutput-propertydetail-formattedaddress). > Caution: > This extension target is only necessary if the corresponding [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-suggest) target does not provide a `formattedAddress` for the suggestions. If a formatted address is provided with each suggestion, then this target will not be called. > > If the [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-suggest) target is not implemented, then this target will not work. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-suggest). This includes extension settings specified in the configuration file. - [purchase.address-autocomplete.suggest](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-suggest.txt): An extension target that provides address autocomplete suggestions for address forms at checkout. Suggestions are presented to customers for delivery, billing, and pickup point addresses. The extension target must return a list of address [`suggestions`](/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-suggest#addressautocompletesuggestoutput-propertydetail-suggestions). If a formatted address is provided with each suggestion, then it will be used to auto-populate the fields in the address form when the customer selects a suggested address. Optionally, you can implement the [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-format-suggestion) extension target to format an address based on the address suggestion selected by the customer. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/2024-07/targets/address/purchase-address-autocomplete-format-suggestion). This includes extension settings specified in the configuration file. - [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/navigation/purchase-checkout-actions-render-before.txt): A static extension target that is rendered immediately before any actions within each step. - [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/block/purchase-checkout-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/order-summary/purchase-checkout-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. - [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/order-summary/purchase-checkout-cart-line-list-render-after.txt): A static extension target that is rendered after all line items. - [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/information/purchase-checkout-contact-render-after.txt): A static extension target that is rendered immediately after the contact form element. - [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/shipping/purchase-checkout-delivery-address-render-after.txt): A static extension target that is rendered after the shipping address form elements. - [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/shipping/purchase-checkout-delivery-address-render-before.txt): A static extension target that is rendered between the shipping address header and shipping address form elements. - [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/footer/purchase-checkout-footer-render-after.txt): A static extension target that is rendered below the footer. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/header/purchase-checkout-header-render-after.txt): A static extension target that is rendered below the header. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/payments/purchase-checkout-payment-method-list-render-after.txt): A static extension target that renders below the list of payment methods. - [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/payments/purchase-checkout-payment-method-list-render-before.txt): A static extension target that renders between the payment heading and payment method list. - [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/local-pickup/purchase-checkout-pickup-location-list-render-after.txt): A static extension target that is rendered after pickup location options. - [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/local-pickup/purchase-checkout-pickup-location-list-render-before.txt): A static extension target that is rendered before pickup location options. - [purchase.checkout.pickup-location-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/local-pickup/purchase-checkout-pickup-location-option-item-render-after.txt): A static extension target that is rendered after the pickup location details within the local pickup option list, for each option. - [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/pickup-points/purchase-checkout-pickup-point-list-render-after.txt): A static extension target that is rendered immediately after the pickup points. - [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/pickup-points/purchase-checkout-pickup-point-list-render-before.txt): A static extension target that is rendered immediately before the pickup points. - [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/order-summary/purchase-checkout-reductions-render-after.txt): A static extension target that is rendered in the order summary, after the discount form and discount tag elements. - [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/order-summary/purchase-checkout-reductions-render-before.txt): A static extension target that is rendered in the order summary, before the discount form element. - [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/shipping/purchase-checkout-shipping-option-item-details-render.txt): A static extension target that is rendered under the shipping method within the shipping method option list, for each option. > Note: > - In split shipping scenarios, this target is duplicated for each delivery group (shipment), and its value is the selected shipping option for the delivery group. > - If you are collecting information in this target, you should consider that it needs to be scoped to a specific delivery group in split shipping scenarios. Alternatively, you can move your extension to `purchase.checkout.shipping-option-list.render-before` or `purchase.checkout.shipping-option-list.render-after`, which are not duplicated for each delivery group. - [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/shipping/purchase-checkout-shipping-option-item-render-after.txt): A static extension target that is rendered after the shipping method details within the shipping method option list, for each option. > Note: > In split shipping scenarios, this target will render within a Modal when `renderMode.overlay` is true. In this case, it is recommended to avoid using components that render an overlay such as Modals. - [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/shipping/purchase-checkout-shipping-option-list-render-after.txt): A static extension target that is rendered after the shipping method options. - [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/shipping/purchase-checkout-shipping-option-list-render-before.txt): A static extension target that is rendered between the shipping method header and shipping method options. - [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/block/purchase-thank-you-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/order-summary/purchase-thank-you-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element on the **Thank you** page. - [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/order-summary/purchase-thank-you-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Thank you** page. - [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/information/purchase-thank-you-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Thank you** page. - [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/footer/purchase-thank-you-footer-render-after.txt): A static extension target that is rendered below the footer on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/targets/header/purchase-thank-you-header-render-after.txt): A static extension target that is rendered below the header on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/badge.txt): Use badges to highlight contextual information, like a label or a status, about an object. An object can be anything that has a status or label attributed to it, like an order or subscription. - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [ConsentCheckbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/consentcheckbox.txt): Use buyer consent checkboxes for collecting the buyer's approval for a given policy. - [ConsentPhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/consentphonefield.txt): Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or `Checkbox` component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library automatically applies the [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) to both the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/map.txt): Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: - `https://*.[MERCHANT-DOMAIN].com` - `https://shop.app` - `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. - [MapMarker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/mapmarker.txt): MapMarker represents a specific location or point of interest on a map. - [MapPopover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/interactive/mappopover.txt): MapPopover provides additional information or context about a specific location or point of interest on a map. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the modal content. - [PaymentIcon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/paymenticon.txt): Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the WAI-ARIA Popover Widget pattern to both the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ProductThumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/media/productthumbnail.txt): Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. - [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/progress.txt): Use to visually represent the completion of a task or process. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/sheet.txt): The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/2024-07/configuration#collect-buyer-consent) to be rendered. The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/switch.txt): Use a switch to represent an on or off state that takes effect immediately when tapped. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/textfield.txt): Use a text field to get text input from a customer. - [ToggleButton](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebutton.txt): Options inside a [ToggleButtonGroup](/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup). - [ToggleButtonGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/forms/togglebuttongroup.txt): `ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library automatically applies the [WAI-ARIA Tooltip Widget pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) to both the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. - [Addresses](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/addresses.txt): The API for interacting with addresses. - [Analytics](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/analytics.txt): The API for interacting with web pixels. - [Attributes](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/attributes.txt): The API for interacting with cart and checkout attributes. - [Buyer Identity](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/buyer-identity.txt): The API for interacting with the buyer identity. - [Buyer Journey](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/buyer-journey.txt): The API for interacting with the buyer journey. - [Cart Instructions](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/cart-instructions.txt): Instructions used to create the checkout. - [Cart Lines](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/cart-lines.txt): The API for interacting with the cart lines. - [Checkout Token](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/checkout-token.txt): The API for interacting with the token of a checkout. - [Cost](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/cost.txt): The API for interacting with the cost of a checkout. - [Customer Privacy](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/customer-privacy.txt): The API for interacting with a customer's privacy consent. It is similar to the [Customer Privacy API in storefront](/docs/api/customer-privacy). - [Delivery](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/delivery.txt): The APIs for interacting with delivery and shipping options. - [Discounts](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/discounts.txt): The API for interacting with discounts. - [Extension](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/extension.txt): The API for interacting with the metadata of an extension. - [Gift Cards](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/gift-cards.txt): The API for interacting with gift cards. - [Localization](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/localization.txt): The APIs for localizing your extension. - [Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/order.txt): The API for interacting with the order confirmation, available on the **Thank You** page. - [Payments](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/payments.txt): The API for interacting with the payment options. - [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/settings.txt): The API for interacting with merchant settings. - [Shop](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/shop.txt): The API for interacting with shop. - [Storage](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/storage.txt): The API for interacting with local storage. - [UI](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/ui.txt): The API for interacting with the extension’s UI. - [useApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/useapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). - [useExtensionApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/useextensionapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead. - [useSubscription()](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/apis/usesubscription().txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [purchase.address-autocomplete.format-suggestion](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-format-suggestion.txt): An extension target that formats the selected address suggestion provided by a [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-suggest) target. This formatted address is used to auto-populate the fields of the address form. It must return a [`formattedAddress`](/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-format-suggestion#addressautocompleteformatsuggestionoutput-propertydetail-formattedaddress). > Caution: > This extension target is only necessary if the corresponding [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-suggest) target does not provide a `formattedAddress` for the suggestions. If a formatted address is provided with each suggestion, then this target will not be called. > > If the [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-suggest) target is not implemented, then this target will not work. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-suggest). This includes extension settings specified in the configuration file. - [purchase.address-autocomplete.suggest](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-suggest.txt): An extension target that provides address autocomplete suggestions for address forms at checkout. Suggestions are presented to customers for delivery, billing, and pickup point addresses. The extension target must return a list of address [`suggestions`](/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-suggest#addressautocompletesuggestoutput-propertydetail-suggestions). If a formatted address is provided with each suggestion, then it will be used to auto-populate the fields in the address form when the customer selects a suggested address. Optionally, you can implement the [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-format-suggestion) extension target to format an address based on the address suggestion selected by the customer. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/2024-10/targets/address/purchase-address-autocomplete-format-suggestion). This includes extension settings specified in the configuration file. - [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/navigation/purchase-checkout-actions-render-before.txt): A static extension target that is rendered immediately before any actions within each step. - [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/block/purchase-checkout-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/order-summary/purchase-checkout-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. > Caution: > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/order-summary/purchase-checkout-cart-line-list-render-after.txt): A static extension target that is rendered after all line items. - [purchase.checkout.chat.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/overlays/purchase-checkout-chat-render.txt): A static extension target that floats above checkout pages in the bottom right corner of the screen. > Note: This target only accepts the [Chat](/docs/api/checkout-ui-extensions/2024-10/components/overlays/chat) component. Any other components will not render. - [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/information/purchase-checkout-contact-render-after.txt): A static extension target that is rendered immediately after the contact form element. - [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/shipping/purchase-checkout-delivery-address-render-after.txt): A static extension target that is rendered after the shipping address form elements. - [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/shipping/purchase-checkout-delivery-address-render-before.txt): A static extension target that is rendered between the shipping address header and shipping address form elements. - [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/footer/purchase-checkout-footer-render-after.txt): A static extension target that is rendered below the footer. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/header/purchase-checkout-header-render-after.txt): A static extension target that is rendered below the header. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/payments/purchase-checkout-payment-method-list-render-after.txt): A static extension target that renders below the list of payment methods. - [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/payments/purchase-checkout-payment-method-list-render-before.txt): A static extension target that renders between the payment heading and payment method list. - [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/local-pickup/purchase-checkout-pickup-location-list-render-after.txt): A static extension target that is rendered after pickup location options. - [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/local-pickup/purchase-checkout-pickup-location-list-render-before.txt): A static extension target that is rendered before pickup location options. - [purchase.checkout.pickup-location-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/local-pickup/purchase-checkout-pickup-location-option-item-render-after.txt): A static extension target that is rendered after the pickup location details within the local pickup option list, for each option. - [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/pickup-points/purchase-checkout-pickup-point-list-render-after.txt): A static extension target that is rendered immediately after the pickup points. - [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/pickup-points/purchase-checkout-pickup-point-list-render-before.txt): A static extension target that is rendered immediately before the pickup points. - [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/order-summary/purchase-checkout-reductions-render-after.txt): A static extension target that is rendered in the order summary, after the discount form and discount tag elements. - [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/order-summary/purchase-checkout-reductions-render-before.txt): A static extension target that is rendered in the order summary, before the discount form element. - [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/shipping/purchase-checkout-shipping-option-item-details-render.txt): A static extension target that is rendered under the shipping method within the shipping method option list, for each option. > Note: > - In split shipping scenarios, this target is duplicated for each delivery group (shipment), and its value is the selected shipping option for the delivery group. > - If you are collecting information in this target, you should consider that it needs to be scoped to a specific delivery group in split shipping scenarios. Alternatively, you can move your extension to `purchase.checkout.shipping-option-list.render-before` or `purchase.checkout.shipping-option-list.render-after`, which are not duplicated for each delivery group. - [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/shipping/purchase-checkout-shipping-option-item-render-after.txt): A static extension target that is rendered after the shipping method details within the shipping method option list, for each option. > Note: > In split shipping scenarios, this target will render within a Modal when `renderMode.overlay` is true. In this case, it is recommended to avoid using components that render an overlay such as Modals. - [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/shipping/purchase-checkout-shipping-option-list-render-after.txt): A static extension target that is rendered after the shipping method options. - [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/shipping/purchase-checkout-shipping-option-list-render-before.txt): A static extension target that is rendered between the shipping method header and shipping method options. - [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/block/purchase-thank-you-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/order-summary/purchase-thank-you-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. > Caution: > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/order-summary/purchase-thank-you-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Thank you** page. - [purchase.thank-you.chat.render](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/overlays/purchase-thank-you-chat-render.txt): A static extension target that floats above the Thank you page in the bottom right corner of the screen. > Note: This target only accepts the [Chat](/docs/api/checkout-ui-extensions/latest/components/overlays/chat) component. Any other components will not render. - [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/information/purchase-thank-you-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Thank you** page. - [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/footer/purchase-thank-you-footer-render-after.txt): A static extension target that is rendered below the footer on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/targets/header/purchase-thank-you-header-render-after.txt): A static extension target that is rendered below the header on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/feedback/badge.txt): Use badges to highlight contextual information, like a label or a status, about an object. An object can be anything that has a status or label attributed to it, like an order or subscription. - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Chat](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/overlays/chat.txt): Use the Chat component to create real-time chat applications. > Note: The Chat component can only be added to the chat targets of [checkout](/docs/api/checkout-ui-extensions/latest/targets/overlays/purchase-checkout-chat-render) and [Thank you](/docs/api/checkout-ui-extensions/latest/targets/overlays/purchase-thank-you-chat-render) pages. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [ConsentCheckbox](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/consentcheckbox.txt): Use buyer consent checkboxes for collecting the buyer's approval for a given policy. - [ConsentPhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/consentphonefield.txt): Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or a form control (`Checkbox` or `Switch`) component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library automatically applies the [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) to both the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/interactive/map.txt): Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: - `https://*.[MERCHANT-DOMAIN].com` - `https://shop.app` - `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. - [MapMarker](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/interactive/mapmarker.txt): MapMarker represents a specific location or point of interest on a map. - [MapPopover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/interactive/mappopover.txt): MapPopover provides additional information or context about a specific location or point of interest on a map. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the modal content. - [PaymentIcon](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/media/paymenticon.txt): Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the WAI-ARIA Popover Widget pattern to both the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ProductThumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/media/productthumbnail.txt): Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. - [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/feedback/progress.txt): Use to visually represent the completion of a task or process. - [QRCode](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/other/qrcode.txt): Used to quickly access scannable data. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/overlays/sheet.txt): The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/2024-10/configuration#collect-buyer-consent) to be rendered. The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/switch.txt): Use a switch to represent an on or off state that takes effect immediately when tapped. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/textfield.txt): Use a text field to get text input from a customer. - [ToggleButton](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/togglebutton.txt): Options inside a [ToggleButtonGroup](/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup). - [ToggleButtonGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/forms/togglebuttongroup.txt): `ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library automatically applies the [WAI-ARIA Tooltip Widget pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) to both the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. - [Addresses](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/addresses.txt): The API for interacting with addresses. - [Analytics](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/analytics.txt): The API for interacting with web pixels. - [Attributes](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/attributes.txt): The API for interacting with cart and checkout attributes. - [Buyer Identity](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/buyer-identity.txt): The API for interacting with the buyer identity. - [Buyer Journey](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/buyer-journey.txt): The API for interacting with the buyer journey. - [Cart Instructions](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/cart-instructions.txt): Instructions used to create the checkout. - [Cart Lines](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/cart-lines.txt): The API for interacting with the cart lines. - [Checkout Token](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/checkout-token.txt): The API for interacting with the token of a checkout. - [Cost](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/cost.txt): The API for interacting with the cost of a checkout. - [Customer Privacy](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/customer-privacy.txt): The API for interacting with a customer's privacy consent. It is similar to the [Customer Privacy API in storefront](/docs/api/customer-privacy). - [Delivery](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/delivery.txt): The APIs for interacting with delivery and shipping options. - [Discounts](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/discounts.txt): The API for interacting with discounts. - [Extension](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/extension.txt): The API for interacting with the metadata of an extension. - [Gift Cards](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/gift-cards.txt): The API for interacting with gift cards. - [Localization](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/localization.txt): The APIs for localizing your extension. - [Localized Fields](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/localized-fields.txt): The API for interacting with localized fields. - [Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/order.txt): The API for interacting with the order confirmation, available on the **Thank You** page. - [Payments](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/payments.txt): The API for interacting with the payment options. - [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/settings.txt): The API for interacting with merchant settings. - [Shop](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/shop.txt): The API for interacting with shop. - [Storage](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/storage.txt): The API for interacting with local storage. - [UI](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/ui.txt): The API for interacting with the extension’s UI. - [useApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/useapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). - [useExtensionApi()](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/useextensionapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead. - [useSubscription()](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/apis/usesubscription().txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [purchase.address-autocomplete.format-suggestion](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-format-suggestion.txt): An extension target that formats the selected address suggestion provided by a [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-suggest) target. This formatted address is used to auto-populate the fields of the address form. It must return a [`formattedAddress`](/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-format-suggestion#addressautocompleteformatsuggestionoutput-propertydetail-formattedaddress). > Caution: > This extension target is only necessary if the corresponding [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-suggest) target does not provide a `formattedAddress` for the suggestions. If a formatted address is provided with each suggestion, then this target will not be called. > > If the [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-suggest) target is not implemented, then this target will not work. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-suggest). This includes extension settings specified in the configuration file. - [purchase.address-autocomplete.suggest](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-suggest.txt): An extension target that provides address autocomplete suggestions for address forms at checkout. Suggestions are presented to customers for delivery, billing, and pickup point addresses. The extension target must return a list of address [`suggestions`](/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-suggest#addressautocompletesuggestoutput-propertydetail-suggestions). If a formatted address is provided with each suggestion, then it will be used to auto-populate the fields in the address form when the customer selects a suggested address. Optionally, you can implement the [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-format-suggestion) extension target to format an address based on the address suggestion selected by the customer. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/2025-01/targets/address/purchase-address-autocomplete-format-suggestion). This includes extension settings specified in the configuration file. - [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/navigation/purchase-checkout-actions-render-before.txt): A static extension target that is rendered immediately before any actions within each step. - [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/block/purchase-checkout-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/order-summary/purchase-checkout-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. > Caution: > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/order-summary/purchase-checkout-cart-line-list-render-after.txt): A static extension target that is rendered after all line items. - [purchase.checkout.chat.render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/overlays/purchase-checkout-chat-render.txt): A static extension target that floats above checkout pages in the bottom right corner of the screen. > Note: This target only accepts the [Chat](/docs/api/checkout-ui-extensions/2025-01/components/overlays/chat) component. Any other components will not render. - [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/information/purchase-checkout-contact-render-after.txt): A static extension target that is rendered immediately after the contact form element. - [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/shipping/purchase-checkout-delivery-address-render-after.txt): A static extension target that is rendered after the shipping address form elements. - [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/shipping/purchase-checkout-delivery-address-render-before.txt): A static extension target that is rendered between the shipping address header and shipping address form elements. - [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/footer/purchase-checkout-footer-render-after.txt): A static extension target that is rendered below the footer. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/header/purchase-checkout-header-render-after.txt): A static extension target that is rendered below the header. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/payments/purchase-checkout-payment-method-list-render-after.txt): A static extension target that renders below the list of payment methods. - [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/payments/purchase-checkout-payment-method-list-render-before.txt): A static extension target that renders between the payment heading and payment method list. - [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/local-pickup/purchase-checkout-pickup-location-list-render-after.txt): A static extension target that is rendered after pickup location options. - [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/local-pickup/purchase-checkout-pickup-location-list-render-before.txt): A static extension target that is rendered before pickup location options. - [purchase.checkout.pickup-location-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/local-pickup/purchase-checkout-pickup-location-option-item-render-after.txt): A static extension target that is rendered after the pickup location details within the local pickup option list, for each option. - [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/pickup-points/purchase-checkout-pickup-point-list-render-after.txt): A static extension target that is rendered immediately after the pickup points. - [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/pickup-points/purchase-checkout-pickup-point-list-render-before.txt): A static extension target that is rendered immediately before the pickup points. - [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/order-summary/purchase-checkout-reductions-render-after.txt): A static extension target that is rendered in the order summary, after the discount form and discount tag elements. - [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/order-summary/purchase-checkout-reductions-render-before.txt): A static extension target that is rendered in the order summary, before the discount form element. - [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/shipping/purchase-checkout-shipping-option-item-details-render.txt): A static extension target that is rendered under the shipping method within the shipping method option list, for each option. > Note: > - In split shipping scenarios, this target is duplicated for each delivery group (shipment), and its value is the selected shipping option for the delivery group. > - If you are collecting information in this target, you should consider that it needs to be scoped to a specific delivery group in split shipping scenarios. Alternatively, you can move your extension to `purchase.checkout.shipping-option-list.render-before` or `purchase.checkout.shipping-option-list.render-after`, which are not duplicated for each delivery group. - [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/shipping/purchase-checkout-shipping-option-item-render-after.txt): A static extension target that is rendered after the shipping method details within the shipping method option list, for each option. > Note: > In split shipping scenarios, this target will render within a Modal when `renderMode.overlay` is true. In this case, it is recommended to avoid using components that render an overlay such as Modals. - [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/shipping/purchase-checkout-shipping-option-list-render-after.txt): A static extension target that is rendered after the shipping method options. - [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/shipping/purchase-checkout-shipping-option-list-render-before.txt): A static extension target that is rendered between the shipping method header and shipping method options. - [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/block/purchase-thank-you-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/order-summary/purchase-thank-you-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. > Caution: > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/order-summary/purchase-thank-you-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Thank you** page. - [purchase.thank-you.chat.render](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/overlays/purchase-thank-you-chat-render.txt): A static extension target that floats above the Thank you page in the bottom right corner of the screen. > Note: This target only accepts the [Chat](/docs/api/checkout-ui-extensions/2025-01/components/overlays/chat) component. Any other components will not render. - [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/information/purchase-thank-you-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Thank you** page. - [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/footer/purchase-thank-you-footer-render-after.txt): A static extension target that is rendered below the footer on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/targets/header/purchase-thank-you-header-render-after.txt): A static extension target that is rendered below the header on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/feedback/badge.txt): Use badges to highlight contextual information, like a label or a status, about an object. An object can be anything that has a status or label attributed to it, like an order or subscription. - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Chat](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/overlays/chat.txt): Use the Chat component to create real-time chat applications. > Note: The Chat component can only be added to the chat targets of [checkout](/docs/api/checkout-ui-extensions/latest/targets/overlays/purchase-checkout-chat-render) and [Thank you](/docs/api/checkout-ui-extensions/latest/targets/overlays/purchase-thank-you-chat-render) pages. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [ClipboardItem](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/utilities/clipboarditem.txt): Enables clipboard functionality when its `id` is referenced by the `activateTarget` property of a `Button`, `Pressable`, or `Link` component. When activated, it copies the text to the clipboard and displays a `Tooltip` confirmation. `ClipboardItem` is a non-rendering component. - [ConsentCheckbox](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/consentcheckbox.txt): Use buyer consent checkboxes for collecting the buyer's approval for a given policy. - [ConsentPhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/consentphonefield.txt): Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or a form control (`Checkbox` or `Switch`) component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library automatically applies the [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) to both the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/interactive/map.txt): Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: - `https://*.[MERCHANT-DOMAIN].com` - `https://shop.app` - `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. - [MapMarker](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/interactive/mapmarker.txt): MapMarker represents a specific location or point of interest on a map. - [MapPopover](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/interactive/mappopover.txt): MapPopover provides additional information or context about a specific location or point of interest on a map. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the modal content. - [PaymentIcon](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/media/paymenticon.txt): Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the WAI-ARIA Popover Widget pattern to both the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ProductThumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/media/productthumbnail.txt): Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. - [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/feedback/progress.txt): Use to visually represent the completion of a task or process. - [QRCode](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/other/qrcode.txt): Used to quickly access scannable data. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/overlays/sheet.txt): The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/2025-01/configuration#collect-buyer-consent) to be rendered. The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/switch.txt): Use a switch to represent an on or off state that takes effect immediately when tapped. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/textfield.txt): Use a text field to get text input from a customer. - [ToggleButton](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/togglebutton.txt): Options inside a [ToggleButtonGroup](/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup). - [ToggleButtonGroup](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/forms/togglebuttongroup.txt): `ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library automatically applies the [WAI-ARIA Tooltip Widget pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) to both the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/2025-01/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way. - [Addresses](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/addresses.txt): The API for interacting with addresses. - [Analytics](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/analytics.txt): The API for interacting with web pixels. - [Attributes](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/attributes.txt): The API for interacting with cart and checkout attributes. - [Buyer Identity](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/buyer-identity.txt): The API for interacting with the buyer identity. - [Buyer Journey](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/buyer-journey.txt): The API for interacting with the buyer journey. - [Cart Instructions](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/cart-instructions.txt): Instructions used to create the checkout. - [Cart Lines](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/cart-lines.txt): The API for interacting with the cart lines. - [Checkout Token](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/checkout-token.txt): The API for interacting with the token of a checkout. - [Cost](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/cost.txt): The API for interacting with the cost of a checkout. - [Customer Privacy](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/customer-privacy.txt): The API for interacting with a customer's privacy consent. It is similar to the [Customer Privacy API in storefront](/docs/api/customer-privacy). - [Delivery](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/delivery.txt): The APIs for interacting with delivery and shipping options. - [Discounts](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/discounts.txt): The API for interacting with discounts. - [Extension](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/extension.txt): The API for interacting with the metadata of an extension. - [Gift Cards](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/gift-cards.txt): The API for interacting with gift cards. - [Localization](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/localization.txt): The APIs for localizing your extension. - [Localized Fields](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/localized-fields.txt): The API for interacting with localized fields. - [Metafields](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/metafields.txt): The API for interacting with metafields. - [Note](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/note.txt): The API for interacting with the note applied to checkout. - [Order](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/order.txt): The API for interacting with the order confirmation, available on the **Thank You** page. - [Payments](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/payments.txt): The API for interacting with the payment options. - [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/storefront-api.txt): Querying the Storefront API. - [Session Token](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/session-token.txt): The API for interacting with session tokens. - [Settings](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/settings.txt): The API for interacting with merchant settings. - [Shop](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/shop.txt): The API for interacting with shop. - [Storage](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/storage.txt): The API for interacting with local storage. - [UI](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/ui.txt): The API for interacting with the extension’s UI. - [useApi()](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/useapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). - [useExtensionApi()](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/useextensionapi().txt): Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead. - [useSubscription()](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/apis/usesubscription().txt): Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout. > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout. - [purchase.address-autocomplete.format-suggestion](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-format-suggestion.txt): An extension target that formats the selected address suggestion provided by a [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-suggest) target. This formatted address is used to auto-populate the fields of the address form. It must return a [`formattedAddress`](/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-format-suggestion#addressautocompleteformatsuggestionoutput-propertydetail-formattedaddress). > Caution: > This extension target is only necessary if the corresponding [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-suggest) target does not provide a `formattedAddress` for the suggestions. If a formatted address is provided with each suggestion, then this target will not be called. > > If the [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-suggest) target is not implemented, then this target will not work. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.suggest`](/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-suggest). This includes extension settings specified in the configuration file. - [purchase.address-autocomplete.suggest](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-suggest.txt): An extension target that provides address autocomplete suggestions for address forms at checkout. Suggestions are presented to customers for delivery, billing, and pickup point addresses. The extension target must return a list of address [`suggestions`](/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-suggest#addressautocompletesuggestoutput-propertydetail-suggestions). If a formatted address is provided with each suggestion, then it will be used to auto-populate the fields in the address form when the customer selects a suggested address. Optionally, you can implement the [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-format-suggestion) extension target to format an address based on the address suggestion selected by the customer. > Note: > - This target does not support rendering UI components. > - This extension can only be developed as a JavaScript extension using the `ui-extensions` library. > - The [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is shared between this extension target and [`purchase.address-autocomplete.format-suggestion`](/docs/api/checkout-ui-extensions/unstable/targets/address/purchase-address-autocomplete-format-suggestion). This includes extension settings specified in the configuration file. - [purchase.checkout.actions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/navigation/purchase-checkout-actions-render-before.txt): A static extension target that is rendered immediately before any actions within each step. - [purchase.checkout.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/block/purchase-checkout-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.checkout.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/order-summary/purchase-checkout-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. > Caution: > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - [purchase.checkout.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/order-summary/purchase-checkout-cart-line-list-render-after.txt): A static extension target that is rendered after all line items. - [purchase.checkout.chat.render](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/overlays/purchase-checkout-chat-render.txt): A static extension target that floats above checkout pages in the bottom right corner of the screen. > Note: This target only accepts the [Chat](/docs/api/checkout-ui-extensions/unstable/components/overlays/chat) component. Any other components will not render. - [purchase.checkout.contact.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/information/purchase-checkout-contact-render-after.txt): A static extension target that is rendered immediately after the contact form element. - [purchase.checkout.delivery-address.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/shipping/purchase-checkout-delivery-address-render-after.txt): A static extension target that is rendered after the shipping address form elements. - [purchase.checkout.delivery-address.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/shipping/purchase-checkout-delivery-address-render-before.txt): A static extension target that is rendered between the shipping address header and shipping address form elements. - [purchase.checkout.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/footer/purchase-checkout-footer-render-after.txt): A static extension target that is rendered below the footer. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/header/purchase-checkout-header-render-after.txt): A static extension target that is rendered below the header. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.checkout.payment-method-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/payments/purchase-checkout-payment-method-list-render-after.txt): A static extension target that renders below the list of payment methods. - [purchase.checkout.payment-method-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/payments/purchase-checkout-payment-method-list-render-before.txt): A static extension target that renders between the payment heading and payment method list. - [purchase.checkout.pickup-location-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/local-pickup/purchase-checkout-pickup-location-list-render-after.txt): A static extension target that is rendered after pickup location options. - [purchase.checkout.pickup-location-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/local-pickup/purchase-checkout-pickup-location-list-render-before.txt): A static extension target that is rendered before pickup location options. - [purchase.checkout.pickup-location-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/local-pickup/purchase-checkout-pickup-location-option-item-render-after.txt): A static extension target that is rendered after the pickup location details within the local pickup option list, for each option. - [purchase.checkout.pickup-point-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/pickup-points/purchase-checkout-pickup-point-list-render-after.txt): A static extension target that is rendered immediately after the pickup points. - [purchase.checkout.pickup-point-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/pickup-points/purchase-checkout-pickup-point-list-render-before.txt): A static extension target that is rendered immediately before the pickup points. - [purchase.checkout.reductions.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/order-summary/purchase-checkout-reductions-render-after.txt): A static extension target that is rendered in the order summary, after the discount form and discount tag elements. - [purchase.checkout.reductions.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/order-summary/purchase-checkout-reductions-render-before.txt): A static extension target that is rendered in the order summary, before the discount form element. - [purchase.checkout.shipping-option-item.details.render](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/shipping/purchase-checkout-shipping-option-item-details-render.txt): A static extension target that is rendered under the shipping method within the shipping method option list, for each option. > Note: > - In split shipping scenarios, this target is duplicated for each delivery group (shipment), and its value is the selected shipping option for the delivery group. > - If you are collecting information in this target, you should consider that it needs to be scoped to a specific delivery group in split shipping scenarios. Alternatively, you can move your extension to `purchase.checkout.shipping-option-list.render-before` or `purchase.checkout.shipping-option-list.render-after`, which are not duplicated for each delivery group. - [purchase.checkout.shipping-option-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/shipping/purchase-checkout-shipping-option-item-render-after.txt): A static extension target that is rendered after the shipping method details within the shipping method option list, for each option. > Note: > In split shipping scenarios, this target will render within a Modal when `renderMode.overlay` is true. In this case, it is recommended to avoid using components that render an overlay such as Modals. - [purchase.checkout.shipping-option-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/shipping/purchase-checkout-shipping-option-list-render-after.txt): A static extension target that is rendered after the shipping method options. - [purchase.checkout.shipping-option-list.render-before](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/shipping/purchase-checkout-shipping-option-list-render-before.txt): A static extension target that is rendered between the shipping method header and shipping method options. - [purchase.thank-you.block.render](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/block/purchase-thank-you-block-render.txt): A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). - [purchase.thank-you.cart-line-item.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/order-summary/purchase-thank-you-cart-line-item-render-after.txt): A static extension target that renders on every line item, inside the details under the line item properties element. > Caution: > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - [purchase.thank-you.cart-line-list.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/order-summary/purchase-thank-you-cart-line-list-render-after.txt): A static extension target that is rendered after all line items on the **Thank you** page. - [purchase.thank-you.chat.render](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/overlays/purchase-thank-you-chat-render.txt): A static extension target that floats above the Thank you page in the bottom right corner of the screen. > Note: This target only accepts the [Chat](/docs/api/checkout-ui-extensions/unstable/components/overlays/chat) component. Any other components will not render. - [purchase.thank-you.customer-information.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/information/purchase-thank-you-customer-information-render-after.txt): A static extension target that is rendered after a purchase below the customer information on the **Thank you** page. - [purchase.thank-you.footer.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/footer/purchase-thank-you-footer-render-after.txt): A static extension target that is rendered below the footer on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [purchase.thank-you.header.render-after](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/header/purchase-thank-you-header-render-after.txt): A static extension target that is rendered below the header on the **Thank you** page. > Tip: > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. > See: [Spinner](/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](/docs/api/checkout-ui-extensions/components/structure/blockspacer). - [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/feedback/badge.txt): Use badges to highlight contextual information, like a label or a status, about an object. An object can be anything that has a status or label attributed to it, like an order or subscription. - [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/feedback/banner.txt): Use banners to communicate important messages to customers in a prominent way. - [BlockLayout](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/blocklayout.txt): BlockLayout is used to lay out content over multiple rows. By default, all rows fill the available block space, sharing it equally. - [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/blockspacer.txt): BlockSpacer is used to create empty block space, typically when variable spacing is needed between multiple elements. Note that you should favor BlockStack when spacing between all elements is the same. - [BlockStack](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/blockstack.txt): BlockStack is used to vertically stack elements. - [Button](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/actions/button.txt): Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”. - [Chat](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/chat.txt): Use the Chat component to create real-time chat applications. > Note: The Chat component can only be added to the chat targets of [checkout](/docs/api/checkout-ui-extensions/latest/targets/overlays/purchase-checkout-chat-render) and [Thank you](/docs/api/checkout-ui-extensions/latest/targets/overlays/purchase-thank-you-chat-render) pages. - [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/checkbox.txt): Use checkboxes to give customers a single binary option, such as signing up for marketing, or agreeing to terms and conditions. - [Choice](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/choice.txt): Options inside a `ChoiceList`. The wrapping `ChoiceList` component will dictate if the choice renders as radio buttons or checkboxes. - [ChoiceList](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/choicelist.txt): Use choice lists to present a list of choices where buyers can make a single selection or multiple selections. - [ClipboardItem](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/clipboarditem.txt): Enables clipboard functionality when its `id` is referenced by the `activateTarget` property of a `Button`, `Pressable`, or `Link` component. When activated, it copies the text to the clipboard and displays a `Tooltip` confirmation. `ClipboardItem` is a non-rendering component. - [ConsentCheckbox](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/consentcheckbox.txt): Use buyer consent checkboxes for collecting the buyer's approval for a given policy. - [ConsentPhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/consentphonefield.txt): Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout. - [DateField](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/datefield.txt): Use a date field to get a date input from a customer. - [DatePicker](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/datepicker.txt): The DatePicker component is a calendar picker UI that allows users to select a single date or a date range - [Disclosure](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/interactive/disclosure.txt): Disclosure is an optionally controlled component used to put long sections of information under content blocks that users can expand or collapse by pressing an activator. The activator can be specified as children using an action component (`Button`, `Link` or `Pressable`) or a form control (`Checkbox` or `Switch`) component. The content blocks can be specified as children inside a structure component (`View`, `InlineLayout`, `BlockStack`, `Grid`, etc.). The library automatically applies the [WAI-ARIA Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) to both the activator and the toggled content. - [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/divider.txt): A divider separates content and represents a thematic break between elements. - [DropZone](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/dropzone.txt): DropZone allows file uploads through drag-and-drop functionality into a designated area on a page, or by activating a button. At present, DropZone does not offer image upload preview capabilities. The use of object URLs directly in an image component is not possible due to the extension and host operating on separate domains. Any element focused within the Dropzone component, including child elements such as the 'Add file' button, will initiate the file selector when the Enter or Spacebar key is pressed. - [Form](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/form.txt): The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript. - [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/grid.txt): Grid is used to lay out content in a matrix of rows and columns. - [GridItem](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/griditem.txt): GridItem can be used as children of Grid. It offers a way to span the element across a number of columns and rows. - [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/titles-and-text/heading.txt): Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method. Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies. - [HeadingGroup](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/titles-and-text/headinggroup.txt): Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group. - [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/media/icon.txt): Icons are pictograms or graphic symbols. They can act as wayfinding tools or as a means of communicating functionality. - [Image](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/media/image.txt): Image is used for large format, responsive images. - [InlineLayout](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/inlinelayout.txt): InlineLayout is used to lay out content over multiple columns. By default, all columns are of equal size and fill the available inline space. Content does not wrap on new rows when not enough columns have been explicitly set, instead they are added as new column and fill the remaining inline space. - [InlineSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/inlinespacer.txt): InlineSpacer is used to create empty inline space, typically when variable spacing is needed between multiple elements. Note that you should favor InlineStack when spacing between all elements is the same. - [InlineStack](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/inlinestack.txt): InlineStack is used to lay out a horizontal row of elements. Elements always wrap. - [Link](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/actions/link.txt): Link makes text interactive so customers can perform an action, such as navigating to another location. - [List](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/other/list.txt): Lists display a set of related content. Each list item usually begins with a bullet or a number. - [ListItem](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/other/listitem.txt): List items are used as children of the `List` component. They usually begins with a bullet or a number. - [Map](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/interactive/map.txt): Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: - `https://*.[MERCHANT-DOMAIN].com` - `https://shop.app` - `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. - [MapMarker](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/interactive/mapmarker.txt): MapMarker represents a specific location or point of interest on a map. - [MapPopover](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/interactive/mappopover.txt): MapPopover provides additional information or context about a specific location or point of interest on a map. - [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/modal.txt): Modals are a special type of overlay that shift focus towards a specific action/set of information before the main flow can proceed. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the modal content. - [PaymentIcon](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/media/paymenticon.txt): Payment icons can be used for displaying payment-related information or features such as a user’s saved or available payment methods. - [PhoneField](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/phonefield.txt): A PhoneField is an input field that merchants can type into optimized for phone numbers with a country code base auto-formatting. The country code is required for the initial render of the field but it can be overriden later by the user either by selecting a country in the country selection dropdown or by manually editing the country phone code directly in the text field. - [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/popover.txt): Popovers are similar to tooltips. They are small overlays that open on demand after a user interaction. The difference is that the popover can contain more content, without cluttering the page. They must be specified inside the `overlay` prop of an activator component (`Button`, `Link` or `Pressable`). The library automatically applies the WAI-ARIA Popover Widget pattern to both the activator and the popover content. - [Pressable](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/actions/pressable.txt): Pressable is a generic interactive component. It shares the same styling properties as View but also adds pressable behavior, meaning that you can execute some logic in response to user interaction. Use this component for creating interactive elements without the default styling that comes with `Button` and `Link`. - [ProductThumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/media/productthumbnail.txt): Product thumbnail is a representation of a product image. It provides a visual preview of the item, so buyers can quickly identify products. - [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/feedback/progress.txt): Use to visually represent the completion of a task or process. - [QRCode](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/other/qrcode.txt): Used to quickly access scannable data. - [ScrollView](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/scrollview.txt): ScrollView is a container for long form content, such as order summary line items, that allows for scrolling so customers can expose more content as they view. - [Select](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/select.txt): Selects let buyers choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. - [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/sheet.txt): The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/unstable/configuration#collect-buyer-consent) to be rendered. The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content. - [SkeletonImage](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/feedback/skeletonimage.txt): SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page. - [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/feedback/skeletontext.txt): SkeletonText is used to provide a low fidelity representation of text content before it appears on the page. Optionally you can use any text content inside `SkeletonText` to be used as a base for the rendered skeleton - [SkeletonTextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/feedback/skeletontextblock.txt): SkeletonTextBlock is used to provide a low fidelity representation of a block of text before it appears on the page. Optionally you can use any text content inside `SkeletonTextBlock` to be used as a base for the rendered skeleton - [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/feedback/spinner.txt): Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server. - [Stepper](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/stepper.txt): Use a stepper to increase or decrease a value, like changing the quantity from 1 to 2. - [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/switch.txt): Use a switch to represent an on or off state that takes effect immediately when tapped. - [Tag](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/other/tag.txt): A Tag is used to help label, organize or categorize objects. It is commonly used in Checkout to display the discounts applied to a cart. - [Text](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/titles-and-text/text.txt): Text is used to visually style and provide semantic value for a small piece of text content. - [TextBlock](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/titles-and-text/textblock.txt): Text block is used to render a block of text that occupies the full width available, like a paragraph. - [TextField](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/textfield.txt): Use a text field to get text input from a customer. - [ToggleButton](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/togglebutton.txt): Options inside a [ToggleButtonGroup](/docs/api/checkout-ui-extensions/components/forms/togglebuttongroup). - [ToggleButtonGroup](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/forms/togglebuttongroup.txt): `ToggleButtonGroup` allows you to make a single choice out of the number of options provided. This is similar to the [ChoiceList](/docs/api/checkout-ui-extensions/components/forms/choicelist) component, but without controls such as checkbox or radio button. You can utilize our layout components to arrange `ToggleButtonGroup`. - [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/overlays/tooltip.txt): Tooltips are floating labels that briefly explain the function of a user interface element. They must be specified inside the `overlay` prop of an activator component. Currently, activator components are `Button`, `Link`, and `Pressable`. The library automatically applies the [WAI-ARIA Tooltip Widget pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) to both the activator and the tooltip content. Expect screen readers to read the tooltip content when the user focuses the activator. - [View](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/structure/view.txt): View is a generic container component. Its contents will always be their “natural” size, so this component can be useful in layout components (like `Grid`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit. - [StyleHelper](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/utilities/stylehelper.txt): This is a helper for authoring conditional values for property styles. Write complex conditional styles based on one or more conditions, such as viewport sizes and interactive states, in a concise and expressive way.