# Configuration When you create a [checkout UI extension](/api/checkout-ui-extensions/), an [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is automatically generated in your extension's directory. This guide describes [extension targeting](#targets), [capabilities](#capabilities), [metafields](#metafields), and the [settings](#settings-definition) you can configure in the app extension configuration. ## How it works You define properties for your checkout UI extension in the extension configuration file. The `shopify.extension.toml` file contains the extension's configuration, which includes the extension name, targets, metafields, capabilities, and settings. When an extension is published to Shopify, the contents of the settings file are pushed alongside the extension. ### 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" [extensions.capabilities] network_access = true block_progress = true api_access = true [extensions.capabilities.collect_buyer_consent] sms_marketing = true customer_privacy = true [[extensions.metafields]] namespace = "my-namespace" key = "my-key" [[extensions.metafields]] namespace = "my-namespace" key = "my-other-key" [extensions.settings] [[extensions.settings.fields]] key = "field_key" type = "boolean" name = "field-name" [[extensions.settings.fields]] key = "field_key_2" type = "number_integer" name = "field-name-2" ``` - [Learn more](/docs/apps/app-extensions/configuration): App extension configuration ## Targets [Targets](/docs/api/checkout-ui-extensions/extension-targets-overview) represent where your checkout UI extension will be injected. You may have one or many targets defined in your app extension configuration using the `targeting` field. Along with the `target`, Shopify needs to know which code to execute for it. You specify the path to your code file by using the `module` property. ### Supporting a single extension target Your code should have a default export if it only supports a single extension target. ### Single extension target ```toml # ... [[extensions.targeting]] target = "purchase.checkout.block.render" module = "./Block.jsx" # ... ``` ```jsx // ... export default reactExtension( 'purchase.checkout.block.render', <Extension />, ); function Extension() { // ... } ``` ### Supporting multiple extension targets You can support multiple extension targets within a single configuration file. However, you must provide a separate file per extension target using the `export default` declaration. ### Multiple extension targets ```toml # ... [[extensions.targeting]] target = "purchase.checkout.actions.render-before" module = "./Actions.jsx" [[extensions.targeting]] target = "purchase.checkout.shipping-option-item.render-after" module = "./ShippingOptions.jsx" # ... ``` ```jsx // ... // ./Actions.jsx export default reactExtension( 'purchase.checkout.actions.render-before', <Extension />, ); function Extension() { // ... } ``` ```jsx // ... // ./ShippingOptions.jsx export default reactExtension( 'purchase.checkout.shipping-option-item.render-after', <Extension />, ); function Extension() { // ... } ``` ## Capabilities Defines the [capabilities](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-extension) associated with your extension. | Property | Description | |---|---| | [`api_access`](#api-access) | Allows your extension to query the Storefront API. | [`network_access`](#network-access) | Allows your extension make external network calls. | [`block_progress`](#block-progress) | States that your extension might block the buyer's progress. | [`collect_buyer_consent`](#collect-buyer-consent) | Allows your extension to collect buyer consent for specific policies such as SMS marketing. ### Capabilities ```toml # ... [extensions.capabilities] api_access = true network_access = true block_progress = true [extensions.capabilities.collect_buyer_consent] sms_marketing = true customer_privacy = true # ... ``` ## Storefront API access The following section describes the use cases of the `api_access` capability and the [Storefront API](/api/storefront) access scopes. ### Enable Storefront API access ```toml # ... [extensions.capabilities] api_access = true # ... ``` - [See](/docs/api/checkout-ui-extensions/apis/storefront-api#examples): API access examples ## Network access The following section describes use cases for requesting network access, alternatives to requesting network access, and steps for completing a request for network access. > Caution: > If your extension specifies the `network_access` capability, you must request access in order to publish your extension. ### Enable network access ```toml # ... [extensions.capabilities] network_access = true # ... ``` ## Block progress The following section describes blocking the buyer's progress through checkout, and how you can detect whether the merchant has allowed it. ### Enable progress blocking ```toml # ... [extensions.capabilities] block_progress = true # ... ``` - [See](/docs/api/checkout-ui-extensions/apis/buyer-journey#examples): Blocking examples ## Collect buyer consent If your extension utilizes the [ConsentCheckbox](/docs/api/checkout-ui-extensions/components/forms/consentcheckbox) or [ConsentPhoneField](/docs/api/checkout-ui-extensions/components/forms/consentphonefield) components to render a customized UI for collecting buyer consent, you must first declare that capability in your configuration file. ### Collect buyer consent ```toml # ... [extensions.capabilities.collect_buyer_consent] sms_marketing = true customer_privacy = true # ... ``` ## Metafields Defines the [metafields](/docs/apps/custom-data/metafields) that are available to your extension. Each extension target uses the metafields defined in `[[extensions.metafields]]` unless they specify their own `[[extensions.targeting.metafields]]`. Supported resource metafield types include: | Resource | Description | |---| --- | | `cart` | The cart associated with the current checkout. | | `company` | The company for B2B checkouts. | | `companyLocation` | The company's location for B2B checkouts. | | `customer` | The customer account that is interacting with the current checkout. | | `product` | The products that the customer intends to purchase. | | `shop` | The shop that is associated with the current checkout. | | `shopUser` | The Shop App user that is associated with the current checkout if there is one. | | `variant` | The product variants that the customer intends to purchase. | You retrieve these metafields in your extension by reading [`appMetafields`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-appmetafields). > Tip: > You may write to `cart` metafields by using [`applyMetafieldsChange`](/docs/api/checkout-ui-extensions/apis/checkoutapi#properties-propertydetail-applymetafieldchange) with `type: "updateCartMetafield"`. ### Metafields ```toml # ... # The metafields for the extension [[extensions.metafields]] namespace = "my-namespace" key = "my-key" [[extensions.metafields]] namespace = "my-namespace" key = "my-other-key" [[extensions.targeting]] target = "purchase.checkout.actions.render-before" module = "./Actions.jsx" # For the above target, use these metafields [[extensions.targeting.metafields]] namespace = "my-namespace" key = "my-target-key" [[extensions.targeting]] target = "purchase.checkout.shipping-option-item.render-after" module = "./ShippingOptions.jsx" ``` - [Hook](/docs/api/checkout-ui-extensions/react-hooks/metafields/useappmetafields): useAppMetafields - [Hook](/docs/api/checkout-ui-extensions/react-hooks/metafields/useapplymetafieldschange): useApplyMetafieldsChange ## Settings definition The settings for a checkout UI extension define a set of fields that the merchant can set a value for from the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). You can use validation options to apply additional constraints to the data that the setting can store, such as a minimum or maximum value. Each settings definition can include up to 20 settings. > Note: > All setting inputs are optional. You should code the extension so that it still works if the merchant hasn't set a value for the setting. ## Example settings definition The following example shows a settings definition that defines a setting named `banner_title` of type `single_line_text_field`. When the merchant sets a value for this setting from the checkout editor, Shopify validates that the provided value is between 5 and 20 characters in length Learn more about the settings api by completing our [custom banners example](/apps/checkout/custom-banners/add-custom-banner). ### Example settings ```toml api_version = "2023-07" [[extensions]] type = "ui_extension" name = "My checkout extension" handle = "checkout-ui" [extensions.settings] [[extensions.settings.fields]] key = "banner_title" type = "single_line_text_field" name = "Banner title" description = "Enter a title for the banner." [[extensions.settings.fields.validations]] name = "min" value = "5" [[extensions.settings.fields.validations]] name = "max" value = "20" ``` - [See](/docs/api/checkout-ui-extensions/apis/standardapi#example-settings): Settings example code ## Preloads definition For specific targets, you must provide the URL of assets or pages loaded by UI components within its extension. This allows Shopify to preload them as early as possible and ensure a performant experience for buyers. Currently, the only supported property is `chat` for the [`Chat` component](/docs/api/checkout-ui-extensions/latest/components/overlays/chat). The `chat` property specifies the URL for the iframe used in this extension target. The URL can be absolute or relative. Relative URLs are resolved against the app URL defined in the app configuration. For example, * if the app URL is `https://example.com` and `chat = "/my-chat-application"`, the resolved URL will be `https://example.com/my-chat-application`. * if `chat = "https://my-chat-application.com"`, the resolved URL will be `https://my-chat-application.com`. ### Extension target preloads ```toml # ... [[extensions.targeting]] target = "purchase.checkout.chat.render" module = "./Block.jsx" [extensions.targeting.preloads] chat = "https://my-chat-application.com" # ... ``` ```jsx // ... export default reactExtension( 'purchase.checkout.chat.render', <Extension />, ); function Extension() { // ... } ``` ## 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.