--- title: purchase.checkout.payment-method-list.render-before description: >- A static extension target that renders between the payment heading and payment method list. api_version: 2026-04 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/payments/purchase-checkout-payment-method-list-render-before md: >- https://shopify.dev/docs/api/checkout-ui-extensions/latest/targets/payments/purchase-checkout-payment-method-list-render-before.md --- # purchase.​checkout.​payment-method-list.​render-before **Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data) for some properties.:** A static extension target that renders between the payment heading and payment method list. ### Support Components (55) APIs (24) ### Supported components * [Abbreviation](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/abbreviation) * [Badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/banner) * [Box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/box) * [Button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/button) * [Checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/checkbox) * [Chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/chip) * [Choice list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/choice-list) * [Clickable](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clickable) * [Clickable chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clickable-chip) * [Clipboard item](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/clipboard-item) * [Consent checkbox](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/consent-checkbox) * [Consent phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/consent-phone-field) * [Date field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/date-field) * [Date picker](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/date-picker) * [Details](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/details) * [Divider](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/divider) * [Drop zone](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/drop-zone) * [Email field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/email-field) * [Form](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/form) * [Grid](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/grid) * [Heading](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/heading) * [Icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/image) * [Link](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/link) * [Map](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/map) * [Modal](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/modal) * [Money field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/money-field) * [Number field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/number-field) * [Ordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/ordered-list) * [Paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/paragraph) * [Password field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/password-field) * [Payment icon](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/payment-icon) * [Phone field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/phone-field) * [Popover](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/popover) * [Press button](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/actions/press-button) * [Product thumbnail](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/product-thumbnail) * [Progress](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/progress) * [Qr code](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/media-and-visuals/qr-code) * [Query container](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/query-container) * [Scroll box](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/scroll-box) * [Section](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/section) * [Select](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/select) * [Sheet](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/sheet) * [Skeleton paragraph](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/skeleton-paragraph) * [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/feedback-and-status-indicators/spinner) * [Stack](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/layout-and-structure/stack) * [Switch](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/switch) * [Text](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/text) * [Text area](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/text-area) * [Text field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/text-field) * [Time](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/time) * [Tooltip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/overlays/tooltip) * [Unordered list](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/typography-and-content/unordered-list) * [Url field](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/web-components/forms/url-field) ### Available APIs * [Addresses API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/addresses-api) * [Analytics API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/analytics-api) * [Attributes API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/attributes-api) * [Buyer Identity API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/buyer-identity-api) * [Buyer Journey API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/buyer-journey-api) * [Cart Instructions API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cart-instructions-api) * [Cart Lines API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cart-lines-api) * [Checkout Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/checkout-token-api) * [Cost API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/cost-api) * [Customer Privacy API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/customer-privacy-api) * [Delivery API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/delivery-api) * [Discounts API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/discounts-api) * [Extension API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/extension-api) * [Gift Cards API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/gift-cards-api) * [Localization API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/localization-api) * [Localized Fields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/localized-fields-api) * [Metafields API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/metafields-api) * [Note API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/note-api) * [Payments API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/checkout-apis/payments-api) * [Session Token API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/session-token-api) * [Settings API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/settings-api) * [Shop API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/shop-api) * [Storage API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/storage-api) * [Storefront API](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/target-apis/platform-apis/storefront-api) ## CheckoutApi The API object provided to this and other `purchase.checkout` extension targets. * **applyCartLinesChange** **(change: CartLineChange) => Promise\** **required** Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/cart-lines#standardapi-propertydetail-lines) property updates with the new state. **Note:** This method returns an error if the \cart instruction\ \\lines.can\Add\Cart\Line\\ is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay. * **applyDiscountCodeChange** **(change: DiscountCodeChange) => Promise\** **required** Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/discounts#standardapi-propertydetail-discountcodes) property updates with the new state. **Caution:** \> See \security considerations\ if your extension retrieves discount codes through a network call. **Note:** This method returns an error if the \cart instruction\ \\discounts.can\Update\Discount\Codes\\ is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay. * **applyGiftCardChange** **(change: GiftCardChange) => Promise\** **required** Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/gift-cards#standardapi-propertydetail-appliedgiftcards) property updates with the new state. **Caution:** \> See \security considerations\ if your extension retrieves gift card codes through a network call. **Note:** This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay. * **applyMetafieldChange** **(change: MetafieldChange) => Promise\** **required** Creates, updates, or removes a cart metafield on the checkout. On success, the [`metafields`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/metafields#standardapi-propertydetail-metafields) property updates to reflect the change. Cart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](https://shopify.dev/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled. **Note:** This method returns an error if the \cart instruction\ \\metafields.can\Set\Cart\Metafields\\ is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay. * **applyNoteChange** **(change: NoteChange) => Promise\** **required** Sets or removes the buyer's note on the checkout. On success, the [`note`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/note#standardapi-propertydetail-note) property updates to reflect the change. **Note:** This method returns an error if the \cart instruction\ \\notes.can\Update\Note\\ is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay. * **applyShippingAddressChange** **(change: ShippingAddressUpdateChange) => Promise\** Updates the buyer's shipping address on the checkout. The provided fields are merged into the existing address without prompting the buyer. On success, the `shippingAddress` property updates to reflect the change. **Note:** This method returns an error if the \cart instruction\ \\delivery.can\Select\Custom\Address\\ is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay. [](https://shopify.dev/apps/store/data-protection/protected-customer-data)Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * **applyAttributeChange** **(change: AttributeChange) => Promise\** **required** **deprecated** Updates or removes an attribute on the cart and checkout. On success, the [`attributes`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/attributes#standardapi-propertydetail-attributes) property updates to reflect the change. **Note:** This method returns an error if the \cart instruction\ \\attributes.can\Update\Attributes\\ is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay. **Deprecated:** Use cart metafields instead. ### AttributeChange The input for \`applyAttributeChange()\`. Pass either an \`AttributeUpdateChange\` (with \`type: 'updateAttribute'\`) to set the attribute or an \`AttributeRemoveChange\` (with \`type: 'removeAttribute'\`) to delete it. ```ts AttributeUpdateChange | AttributeRemoveChange ``` ### AttributeUpdateChange Updates an attribute on the cart and checkout. If an attribute with the provided key doesn't already exist, then it gets created. * key The key of the attribute to add or update. If an attribute with this key already exists, then its value is replaced. ```ts string ``` * type Identifies this as an attribute update or creation. Set this when creating a change to add or replace an attribute value. ```ts 'updateAttribute' ``` * value The new value for the attribute. ```ts string ``` ### AttributeRemoveChange Removes an attribute from the checkout. Pass this to \`applyAttributeChange()\` to delete an attribute by key. If the key doesn't exist, then the change has no effect. * key The key of the attribute to remove. ```ts string ``` * type Identifies this as an attribute removal. Set this when creating a change to delete an attribute by key. ```ts 'removeAttribute' ``` ### AttributeChangeResult The result of calling \`applyAttributeChange()\`. Use the \`type\` property to determine whether the change succeeded or failed. ```ts AttributeChangeResultSuccess | AttributeChangeResultError ``` ### AttributeChangeResultSuccess The result of a successful attribute change. The \`type\` property is \`'success'\`. * type Indicates that the attribute change was applied successfully. ```ts 'success' ``` ### AttributeChangeResultError The result of a failed attribute change. Check the \`message\` property for details about what went wrong. * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` * type Indicates that the attribute change couldn't be applied. Check the \`message\` property for details. ```ts 'error' ``` ### CartLineChange The input for \`applyCartLinesChange()\`. Use the \`type\` property to specify the operation. - \`CartLineAddChange\` (\`type: 'addCartLine'\`): Adds a new line item to the cart. - \`CartLineRemoveChange\` (\`type: 'removeCartLine'\`): Removes an existing line item. - \`CartLineUpdateChange\` (\`type: 'updateCartLine'\`): Updates an existing line item's quantity, variant, or attributes. ```ts CartLineAddChange | CartLineRemoveChange | CartLineUpdateChange ``` ### CartLineAddChange Adds a new line item to the cart. Pass this to \`applyCartLinesChange()\` to add a product variant with a specified quantity and optional attributes. * attributes Custom key-value attributes to attach to the new line item. ```ts Attribute[] ``` * merchandiseId The globally-unique identifier of the product variant to add. ```ts string ``` * parent The parent cart line to associate the new item with, identified by either \`lineId\` or \`merchandiseId\`. Use this when adding child items to a bundle. ```ts {lineId: string} | {merchandiseId: string} ``` * quantity The number of items to add. Must be a positive integer. ```ts number ``` * sellingPlanId The identifier of the \[selling plan]\(/docs/apps/build/purchase-options/subscriptions) to associate with this line item, such as a subscription or pre-order plan. ```ts string ``` * type Identifies this as a line item addition. Set this when creating a change to add a new product to the cart. ```ts 'addCartLine' ``` ### Attribute * key The identifier for the attribute. Each key must be unique within the set of attributes on the cart or checkout. If you call \`applyAttributeChange()\` with a key that already exists, then the existing value is replaced. ```ts string ``` * value The value associated with the attribute key. This is a freeform string that can store any information the buyer or app provides. ```ts string ``` ### CartLineRemoveChange Removes an existing line item from the cart. Pass this to \`applyCartLinesChange()\` to remove a specified quantity of a line item. * id The unique identifier of the cart line to remove. Look up the current ID from \`lines\` before calling, because cart line IDs aren't stable. ```ts string ``` * quantity The number of items to remove from this line. ```ts number ``` * type Identifies this as a line item removal. Set this when creating a change to remove a product from the cart. ```ts 'removeCartLine' ``` ### CartLineUpdateChange Updates an existing line item in the cart. Pass this to \`applyCartLinesChange()\` to change a line item's quantity, variant, selling plan, or attributes. * attributes The new custom key-value attributes for this line item. Replaces all existing attributes when provided. ```ts Attribute[] ``` * id The unique identifier of the cart line to update. Look up the current ID from \`lines\` before calling, because cart line IDs aren't stable. ```ts string ``` * merchandiseId The new product variant to swap in for this line item. Only provide this if you want to change the variant. ```ts string ``` * parent The parent cart line to associate this item with. Use this when updating the parent relationship for bundled items. ```ts {lineId: string} | {merchandiseId: string} ``` * quantity The new quantity for this line item. Only provide this if you want to change the quantity. ```ts number ``` * sellingPlanId The \[selling plan]\(/docs/apps/build/purchase-options/subscriptions) to associate with this line item. Pass \`null\` to remove the item from its current selling plan. ```ts SellingPlan['id'] | null ``` * type Identifies this as a line item update. Set this when creating a change to modify a line item's quantity, variant, or attributes. ```ts 'updateCartLine' ``` ### SellingPlan A \[selling plan]\(/docs/apps/build/purchase-options/subscriptions) represents a recurring or deferred purchasing option for a product, such as a subscription, pre-order, or try-before-you-buy plan. The merchant configures selling plans to define how and when the buyer is charged. * id A globally-unique identifier for the selling plan in the format \`gid://shopify/SellingPlan/\\`. Use this to reference the specific selling plan associated with a line item. ```ts string ``` * recurringDeliveries Whether purchasing through this selling plan results in multiple deliveries. \`true\` for subscription plans with recurring fulfillment, \`false\` for one-time pre-orders or try-before-you-buy plans. ```ts boolean ``` ### CartLineChangeResult The result of calling \`applyCartLinesChange()\`. Use the \`type\` property to determine whether the change succeeded or failed. ```ts CartLineChangeResultSuccess | CartLineChangeResultError ``` ### CartLineChangeResultSuccess The result of a successful cart line change. The \`type\` property is \`'success'\`. * type Indicates that the cart line change was applied successfully. ```ts 'success' ``` ### CartLineChangeResultError The result of a failed cart line change. Check the \`message\` property for details about what went wrong. * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` * type Indicates that the line item wasn't changed successfully. Refer to the \`message\` property for details about the error. ```ts 'error' ``` ### DiscountCodeChange The input for \`applyDiscountCodeChange()\`. Pass either a \`DiscountCodeAddChange\` (with \`type: 'addDiscountCode'\`) to apply a code or a \`DiscountCodeRemoveChange\` (with \`type: 'removeDiscountCode'\`) to remove it. ```ts DiscountCodeAddChange | DiscountCodeRemoveChange ``` ### DiscountCodeAddChange Applies a discount code to the checkout. Pass this to \`applyDiscountCodeChange()\` to add a code. * code The discount code to apply. Codes are case-insensitive. ```ts string ``` * type Identifies this as a discount code addition. Set this when creating a change to apply a discount code to the checkout. ```ts 'addDiscountCode' ``` ### DiscountCodeRemoveChange Removes a discount code from the checkout. Pass this to \`applyDiscountCodeChange()\` to remove a code. * code The discount code to remove. Codes are case-insensitive. ```ts string ``` * type Identifies this as a discount code removal. Set this when creating a change to remove a discount code from the checkout. ```ts 'removeDiscountCode' ``` ### DiscountCodeChangeResult The result of calling \`applyDiscountCodeChange()\`. Use the \`type\` property to determine whether the change succeeded or failed. ```ts DiscountCodeChangeResultSuccess | DiscountCodeChangeResultError ``` ### DiscountCodeChangeResultSuccess The result of a successful discount code change. The \`type\` property is \`'success'\`. * type Indicates that the discount code change was applied successfully. ```ts 'success' ``` ### DiscountCodeChangeResultError The result of a failed discount code change. Check the \`message\` property for details about what went wrong. * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` * type Indicates that the discount code change couldn't be applied. Check the \`message\` property for details. ```ts 'error' ``` ### GiftCardChange The input for \`applyGiftCardChange()\`. Pass either a \`GiftCardAddChange\` (with \`type: 'addGiftCard'\`) to apply a gift card or a \`GiftCardRemoveChange\` (with \`type: 'removeGiftCard'\`) to remove it. ```ts GiftCardAddChange | GiftCardRemoveChange ``` ### GiftCardAddChange Applies a gift card to the checkout. Pass this to \`applyGiftCardChange()\` to add a gift card. * code The full gift card code to apply to the checkout. ```ts string ``` * type Identifies this as a gift card addition. Set this when creating a change to apply a gift card to the checkout. ```ts 'addGiftCard' ``` ### GiftCardRemoveChange Removes a gift card from the checkout. Pass this to \`applyGiftCardChange()\` to remove a gift card. * code The gift card code to remove. You can pass either the full code or just the last four characters. ```ts string ``` * type Identifies this as a gift card removal. Set this when creating a change to remove a gift card from the checkout. ```ts 'removeGiftCard' ``` ### GiftCardChangeResult The result of calling \`applyGiftCardChange()\`. Use the \`type\` property to determine whether the change succeeded or failed. ```ts GiftCardChangeResultSuccess | GiftCardChangeResultError ``` ### GiftCardChangeResultSuccess The result of a successful gift card change. The \`type\` property is \`'success'\`. * type Indicates that the gift card change was applied successfully. ```ts 'success' ``` ### GiftCardChangeResultError The result of a failed gift card change. Check the \`message\` property for details about what went wrong. * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` * type Indicates that the gift card change couldn't be applied. Check the \`message\` property for details. ```ts 'error' ``` ### MetafieldChange The input for \`applyMetafieldChange()\`. Use the \`type\` property to specify the operation. - \`MetafieldRemoveCartChange\` (\`type: 'removeCartMetafield'\`): Removes an existing cart \[metafield]\(/docs/apps/build/custom-data/metafields). - \`MetafieldUpdateCartChange\` (\`type: 'updateCartMetafield'\`): Creates or updates a cart metafield. ```ts MetafieldRemoveCartChange | MetafieldUpdateCartChange ``` ### MetafieldRemoveCartChange Removes a cart \[metafield]\(/docs/apps/build/custom-data/metafields). Pass this to \`applyMetafieldChange()\` to delete a metafield by key and namespace. * key The name of the metafield to remove. ```ts string ``` * namespace The namespace of the metafield to remove. ```ts string ``` * type Identifies this as a cart metafield removal. Set this when creating a change to delete an existing metafield by key and namespace. ```ts 'removeCartMetafield' ``` ### MetafieldUpdateCartChange Creates or updates a cart \[metafield]\(/docs/apps/build/custom-data/metafields). Pass this to \`applyMetafieldChange()\` to set a metafield value. If a metafield with the provided key and namespace doesn't already exist, then it gets created. * metafield The metafield data to set on the cart. If a metafield with this key and namespace already exists, then its value is replaced. ```ts { key: string; namespace?: string; value: string; type: string; } ``` * type Identifies this as a cart metafield creation or update. Set this when creating a change to set a metafield value. ```ts 'updateCartMetafield' ``` ### MetafieldChangeResult The result of calling \`applyMetafieldChange()\`. Use the \`type\` property to determine whether the change succeeded or failed. ```ts MetafieldChangeResultSuccess | MetafieldChangeResultError ``` ### MetafieldChangeResultSuccess The result of a successful metafield change. The \`type\` property is \`'success'\`. * type Indicates that the metafield change was applied successfully. ```ts 'success' ``` ### MetafieldChangeResultError The result of a failed metafield change. Check the \`message\` property for details about what went wrong. * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` * type Indicates that the metafield change couldn't be applied. Check the \`message\` property for details. ```ts 'error' ``` ### NoteChange The input for \`applyNoteChange()\`. Pass either a \`NoteUpdateChange\` (with \`type: 'updateNote'\`) to set the note or a \`NoteRemoveChange\` (with \`type: 'removeNote'\`) to clear it. ```ts NoteRemoveChange | NoteUpdateChange ``` ### NoteRemoveChange Clears the buyer's note from the checkout. Pass this to \`applyNoteChange()\` to remove any existing note. * type Identifies this as a note removal. Set this when creating a change to clear the buyer's note. ```ts 'removeNote' ``` ### NoteUpdateChange Sets or replaces the buyer's note on the checkout. Pass this to \`applyNoteChange()\` to update the note. * note The text to set as the buyer's note. This replaces any existing note entirely rather than appending to it. ```ts string ``` * type Identifies this as a note update. Set this when creating a change to set or replace the buyer's note. ```ts 'updateNote' ``` ### NoteChangeResult The result of calling \`applyNoteChange()\`. Use the \`type\` property to determine whether the change succeeded or failed. ```ts NoteChangeResultSuccess | NoteChangeResultError ``` ### NoteChangeResultSuccess The result of a successful note change. The \`type\` property is \`'success'\`. * type Indicates that the note change was applied successfully. ```ts 'success' ``` ### NoteChangeResultError The result of a failed note change. Check the \`message\` property for details about what went wrong. * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` * type Indicates that the note change couldn't be applied. Check the \`message\` property for details. ```ts 'error' ``` ### ShippingAddressUpdateChange Updates the buyer's shipping address on the checkout. Pass this to \`applyShippingAddressChange()\` to modify specific address fields without replacing the entire address. * address Fields to update in the shipping address. You only need to provide values for the fields you want to update. Any fields you don't list keep their current values. ```ts Partial ``` * type Identifies this as a shipping address update. This is the only supported change type for \`applyShippingAddressChange()\`. ```ts 'updateShippingAddress' ``` ### ShippingAddress * address1 The first line of the street address, including the street number and name. The value is \`undefined\` if the buyer hasn't entered an address yet. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * address2 The second line of the buyer's address, such as apartment number, suite, or unit. The value is \`undefined\` if the buyer didn't provide a second address line. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * city The city, town, or village of the address. The value is \`undefined\` if the buyer hasn't entered a city yet. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * company The buyer's company name. The value is \`undefined\` if the buyer didn't enter a company or the store doesn't collect company names. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * countryCode The two-letter country code in \[ISO 3166 Alpha-2]\(https://en.wikipedia.org/wiki/ISO\_3166-1\_alpha-2) format. The value is \`undefined\` if the buyer hasn't selected a country yet. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts CountryCode ``` * firstName The buyer's first name. Use this alongside \`lastName\` when you need to display or process name parts separately. The value is \`undefined\` if the buyer didn't provide a first name or the store doesn't collect split names. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * lastName The buyer's last name. Use this alongside \`firstName\` when you need to display or process name parts separately. The value is \`undefined\` if the buyer didn't provide a last name or the store doesn't collect split names. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * name The buyer's full name, typically a combination of first and last name. The value is \`undefined\` if the buyer didn't provide a name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * oneTimeUse Controls whether the address is saved to the buyer's account. When \`true\`, the address won't be saved and is only used for this checkout. When \`false\` or \`undefined\`, the address might be saved to the buyer's account for future use. ```ts boolean ``` * phone The phone number associated with the address, typically in international format. The value is \`undefined\` if the buyer didn't provide a phone number or the store doesn't collect phone numbers. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * provinceCode The province, state, prefecture, or region code of the address. The format varies by country. The value is \`undefined\` if the buyer hasn't selected one yet or the country doesn't have provinces. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * zip The postal code or ZIP code of the address, used for mail sorting and delivery routing. The value is \`undefined\` if the buyer hasn't entered one yet or the country doesn't use postal codes. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ### CountryCode ```ts 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ' ``` ### ShippingAddressChangeResult The result of calling \`applyShippingAddressChange()\`. Use the \`type\` property to determine whether the change succeeded or failed. On failure, the \`errors\` array contains field-level details. ```ts ShippingAddressChangeResultSuccess | ShippingAddressChangeResultError ``` ### ShippingAddressChangeResultSuccess The result of a successful shipping address change. The \`type\` property is \`'success'\` and \`errors\` is \`null\`. * errors Always \`null\` for a successful address change. Present so that you can check \`result.errors\` without narrowing the union type first. ```ts null ``` * type Indicates that the shipping address change was applied successfully. ```ts 'success' ``` ### ShippingAddressChangeResultError The result of a failed shipping address change. Check the \`errors\` array for field-level details about what went wrong. * errors The list of field-level errors that prevented the address change. Each entry identifies which address field failed and why. ```ts ShippingAddressChangeFieldError[] ``` * type Indicates that the shipping address change couldn't be applied. Check the \`errors\` array for field-level details. ```ts 'error' ``` ### ShippingAddressChangeFieldError An error corresponding to a particular field from a given change. Use the \`field\` property to determine which address field caused the error. * field The \`MailingAddress\` field that caused the error, such as \`'countryCode'\` or \`'zip'\`. The value is \`undefined\` if the error isn't specific to a single field. ```ts keyof MailingAddress ``` * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` ### MailingAddress * address1 The first line of the street address, including the street number and name. The value is \`undefined\` if the buyer hasn't entered an address yet. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * address2 The second line of the buyer's address, such as apartment number, suite, or unit. The value is \`undefined\` if the buyer didn't provide a second address line. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * city The city, town, or village of the address. The value is \`undefined\` if the buyer hasn't entered a city yet. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * company The buyer's company name. The value is \`undefined\` if the buyer didn't enter a company or the store doesn't collect company names. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * countryCode The two-letter country code in \[ISO 3166 Alpha-2]\(https://en.wikipedia.org/wiki/ISO\_3166-1\_alpha-2) format. The value is \`undefined\` if the buyer hasn't selected a country yet. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts CountryCode ``` * firstName The buyer's first name. Use this alongside \`lastName\` when you need to display or process name parts separately. The value is \`undefined\` if the buyer didn't provide a first name or the store doesn't collect split names. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * lastName The buyer's last name. Use this alongside \`firstName\` when you need to display or process name parts separately. The value is \`undefined\` if the buyer didn't provide a last name or the store doesn't collect split names. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * name The buyer's full name, typically a combination of first and last name. The value is \`undefined\` if the buyer didn't provide a name. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * phone The phone number associated with the address, typically in international format. The value is \`undefined\` if the buyer didn't provide a phone number or the store doesn't collect phone numbers. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * provinceCode The province, state, prefecture, or region code of the address. The format varies by country. The value is \`undefined\` if the buyer hasn't selected one yet or the country doesn't have provinces. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * zip The postal code or ZIP code of the address, used for mail sorting and delivery routing. The value is \`undefined\` if the buyer hasn't entered one yet or the country doesn't use postal codes. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ## StandardApi The base API object provided to this and other `purchase.checkout` and `purchase.thank-you` extension targets. * **analytics** **Analytics** **required** Tracks custom events and sends visitor information to [Web Pixels](https://shopify.dev/docs/apps/marketing). Use `publish()` to emit events and `visitor()` to submit buyer contact details. * **appliedGiftCards** **SubscribableSignalLike\** **required** The gift cards that have been applied to the checkout. Each entry includes the last four characters of the gift card code, the amount used at checkout, and the card's remaining balance. * **applyTrackingConsentChange** **ApplyTrackingConsentChangeType** **required** Enables setting and updating customer privacy consent settings and tracking consent metafields. **Note:** Requires the \\\customer\\_privacy\\ capability\ to be set to \true\. [](https://shopify.dev/apps/store/data-protection/protected-customer-data)Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * **appMetafields** **SubscribableSignalLike\** **required** The metafields requested in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer. App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](https://shopify.dev/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information. [](https://shopify.dev/apps/store/data-protection/protected-customer-data)Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * **attributes** **SubscribableSignalLike\** **required** The custom key-value attributes attached to the cart or checkout. These are set by the buyer or by an extension using `applyAttributeChange()`. The list is empty if no attributes have been added. * **availablePaymentOptions** **SubscribableSignalLike\** **required** All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region. * **buyerJourney** **BuyerJourney** **required** Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues. Refer to [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/buyer-journey#examples) examples for more information. * **checkoutSettings** **SubscribableSignalLike\** **required** Settings applied to the buyer's checkout. * **checkoutToken** **SubscribableSignalLike\** **required** A stable ID that represents the current checkout. The value is `undefined` when the checkout hasn't been created on the server yet. Use this to correlate checkout sessions across your extension, web pixels, and backend systems. This matches the `data.checkout.token` field in a [checkout-related WebPixel event](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object). * **cost** **CartCost** **required** The cost breakdown for the current checkout, including subtotal, shipping, tax, and total amounts. These values update as the buyer progresses through checkout and costs like shipping and tax are calculated. * **customerPrivacy** **SubscribableSignalLike\** **required** Customer privacy consent settings and a flag denoting if consent has previously been collected. * **deliveryGroups** **SubscribableSignalLike\** **required** The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items. * **discountAllocations** **SubscribableSignalLike\** **required** The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](https://shopify.dev/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered. * **discountCodes** **SubscribableSignalLike\** **required** The discount codes currently applied to the checkout. The list is empty if no discount codes have been applied. Use `applyDiscountCodeChange()` to add or remove codes. * **extension** **Extension\** **required** Metadata about the running extension, including the current target, API version, capabilities, and editor context. Use this to conditionally render content based on where the extension is running. * **i18n** **I18n** **required** Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Use alongside [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/localization) to build fully localized extensions. * **instructions** **SubscribableSignalLike\** **required** The cart instructions used to create the checkout and possibly limit extension capabilities. These instructions should be checked before performing any actions that might be affected by them. For example, if you intend to add a discount code via the `applyDiscountCodeChange` method, check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout. **Caution:** As of version \2024-07\, UI extension code must check for instructions before calling select APIs in case those APIs aren\'t available. See the \update guide\ for more information. * **lines** **SubscribableSignalLike\** **required** The list of line items the buyer intends to purchase. Each entry includes the merchandise, quantity, cost, and any custom attributes. Use `applyCartLinesChange()` to add, remove, or update line items. * **localization** **Localization** **required** The buyer's language, country, currency, and timezone context. For formatting and translation helpers, use the [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/localization#standardapi-propertydetail-i18n) object instead. * **note** **SubscribableSignalLike\** **required** A note left by the customer to the merchant, either in their cart or during checkout. The value is `undefined` if the buyer hasn't entered a note. Use this to display or react to order-level instructions such as delivery preferences or gift messages. * **query** **\>(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError\[]; }>** **required** The method used to query the Storefront GraphQL API with a prefetched token. Refer to [Storefront API access examples](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/storefront-api) for more information. * **selectedPaymentOptions** **SubscribableSignalLike\** **required** The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card). * **sessionToken** **SessionToken** **required** The session token providing a set of claims as a signed JSON Web Token (JWT). The token has a TTL of five minutes. If the previous token expires, this value reflects a new session token with a new signature and expiry. Refer to [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/session-token) for more information. * **settings** **SubscribableSignalLike\** **required** The settings matching the settings definition written in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/configuration) file. Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/apis/settings#examples) for more information. **Note:** When an extension is being installed in the editor, the settings are empty until a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings. * **shop** **Shop** **required** The store where the checkout is taking place, including the shop name, storefront URL, `.myshopify.com` subdomain, and a globally-unique ID. * **storage** **Storage** **required** Key-value storage that persists across page loads within the current checkout session. Data is shared across all activated extension targets of this extension. **Caution:** Data persistence isn\'t guaranteed and storage is cleared when the buyer starts a new checkout. * **version** **Version** **required** The renderer version being used for the extension. * **billingAddress** **SubscribableSignalLike\** The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. The subscribable value is `undefined` if the billing address hasn't been provided yet. [](https://shopify.dev/apps/store/data-protection/protected-customer-data)Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * **buyerIdentity** **BuyerIdentity** Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data. [](https://shopify.dev/apps/store/data-protection/protected-customer-data)Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * **localizedFields** **SubscribableSignalLike\** Additional region-specific fields required during checkout, such as tax identification numbers (Brazil's CPF/CNPJ) or customs credentials. The property is available only if the extension has access to protected customer data. The array is empty if the current checkout doesn't require any localized fields. * **shippingAddress** **SubscribableSignalLike\** The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. When available, the subscribable value is `undefined` if delivery isn't required. [](https://shopify.dev/apps/store/data-protection/protected-customer-data)Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). * **extensionPoint** **Target** **required** **deprecated** The identifier that specifies where in Shopify's UI your code is being injected. This is one of the targets you've included in your extension's configuration file. **Deprecated:** Deprecated as of version `2023-07`, use `extension.target` instead. ### Analytics Tracks custom events and sends visitor information to \[Web Pixels]\(/docs/apps/marketing). Use \`publish()\` to emit events and \`visitor()\` to submit buyer contact details. * publish Publishes a custom event to \[Web Pixels]\(/docs/apps/marketing). Returns \`true\` when the event is successfully dispatched. ```ts (name: string, data: Record) => Promise ``` * visitor Submits buyer contact details for attribution and analytics purposes. ```ts (data: { email?: string; phone?: string; }) => Promise ``` ### VisitorResult Represents a visitor result. ```ts VisitorSuccess | VisitorError ``` ### VisitorSuccess Represents a successful visitor result. * type Indicates that the visitor information was validated and submitted. ```ts 'success' ``` ### VisitorError Represents an unsuccessful visitor result. * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` * type Indicates that the visitor information is invalid and wasn't submitted. Common causes include using the wrong data type or omitting a required property. ```ts 'error' ``` ### SubscribableSignalLike Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern. This interface extends \`ReadonlySignalLike\` with deprecated fields that are still supported for backwards compatibility. * current The current value of the signal. Equivalent to \`.value\`, accessing this property subscribes to changes when used in a reactive context. ```ts T ``` * destroy Cleans up the subscription and releases any resources held by this signal. After calling \`destroy()\`, the signal stops receiving updates from the main thread. ```ts () => Promise ``` * subscribe Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value. ```ts (fn: (value: T) => void) => () => void ``` * value The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup. ```ts T ``` ### AppliedGiftCard * amountUsed The amount of the applied gift card that's used when the checkout is completed. This might be less than \`balance\` if the order total is lower than the card's remaining balance. ```ts Money ``` * balance The current balance of the applied gift card before checkout completion. This reflects the full remaining value on the card, not just the amount being applied to this order. ```ts Money ``` * lastCharacters The last four characters of the applied gift card's code. The full code isn't exposed for security reasons. Use this value to display which card is applied. ```ts string ``` ### Money * amount The decimal amount of the price. For example, \`29.99\` represents twenty-nine dollars and ninety-nine cents. ```ts number ``` * currencyCode The three-letter currency code in \[ISO 4217]\(https://en.wikipedia.org/wiki/ISO\_4217) format. ```ts CurrencyCode ``` ### CurrencyCode ```ts 'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL' ``` ### ApplyTrackingConsentChangeType * visitorConsent ```ts VisitorConsentChange ``` Promise\ ```ts Promise ``` ### VisitorConsentChange * analytics The visitor's consent for analytics tracking. \`true\` means the visitor actively granted consent, \`false\` means actively denied, and \`undefined\` means no decision has been made yet. ```ts boolean ``` * marketing The visitor's consent for marketing and targeted advertising. \`true\` means the visitor actively granted consent, \`false\` means actively denied, and \`undefined\` means no decision has been made yet. ```ts boolean ``` * metafields Tracking consent metafield data to be saved. If the value is \`null\`, the metafield is deleted. ```ts TrackingConsentMetafieldChange[] ``` * preferences The visitor's consent for storing preferences such as language and currency. \`true\` means the visitor actively granted consent, \`false\` means actively denied, and \`undefined\` means no decision has been made yet. ```ts boolean ``` * saleOfData The visitor's consent for the sale or sharing of their personal data with third parties. \`true\` means the visitor actively granted consent, \`false\` means actively denied, and \`undefined\` means no decision has been made yet. ```ts boolean ``` * type Identifies this as a visitor consent change. This is the only supported change type for \`applyTrackingConsentChange()\`. ```ts 'changeVisitorConsent' ``` ### TrackingConsentMetafieldChange * key The identifier for the tracking consent metafield to update. ```ts string ``` * value The new value to store in the metafield. Set to \`null\` to delete the metafield. ```ts string | null ``` ### TrackingConsentChangeResult ```ts TrackingConsentChangeResultSuccess | TrackingConsentChangeResultError ``` ### TrackingConsentChangeResultSuccess The returned result of a successful tracking consent preference update. * type Indicates that the tracking consent update was applied successfully. ```ts 'success' ``` ### TrackingConsentChangeResultError The returned result of an unsuccessful tracking consent preference update with a message detailing the type of error that occurred. * message A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer. ```ts string ``` * type Indicates that the tracking consent update couldn't be applied. Check the \`message\` property for details. ```ts 'error' ``` ### AppMetafieldEntry An entry that pairs a Shopify resource with one of its \[metafields]\(/docs/apps/build/custom-data/metafields). Each entry contains a \`target\` identifying which resource the metafield belongs to and a \`metafield\` object with the actual data. * metafield The metafield data, including the namespace, key, value, and content type. Use the \`namespace\` and \`key\` together to uniquely identify the metafield within its resource. ```ts AppMetafield ``` * target The Shopify resource that this metafield is attached to, including the resource type (such as \`'product'\` or \`'customer'\`) and its globally-unique ID. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data) when the type is \`customer\`, \`company\` or \`companyLocation\`. ```ts AppMetafieldEntryTarget ``` ### AppMetafield Represents a custom \[metafield]\(/docs/apps/build/custom-data/metafields) attached to a resource such as a product, variant, customer, or shop. * key The identifier for the metafield within its namespace, such as \`'ingredients'\` or \`'shipping\_weight'\`. ```ts string ``` * namespace The namespace that the metafield belongs to. Namespaces group related metafields and prevent naming collisions between different apps. App owned metafield namespaces are returned using the \`$app\` format. See \[app owned metafields]\(/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information. ```ts string ``` * type The metafield's \[type name]\(/docs/apps/build/custom-data/metafields/list-of-data-types), such as \`'single\_line\_text\_field'\` or \`'json'\`. This is the full type identifier, whereas \`valueType\` is a simplified category. ```ts string ``` * value The value of a metafield, stored as a string regardless of the underlying type. For JSON metafields, parse the string to access structured data. ```ts string ``` * valueType The metafield's information type. - \`'boolean'\`: A true or false value. - \`'float'\`: A decimal number value. - \`'integer'\`: A whole number value. - \`'json\_string'\`: A JSON-encoded string value. - \`'string'\`: A plain text value. ```ts 'boolean' | 'float' | 'integer' | 'json_string' | 'string' ``` ### AppMetafieldEntryTarget The Shopify resource that a metafield is attached to. Each entry identifies a specific resource by its type and globally-unique ID, so you can trace where the data comes from. * id The globally-unique identifier of the Shopify resource, in \[GID]\(/docs/api/usage/gids) format. Use this value to match the metafield to a specific resource in your extension or when querying the \[Storefront API]\(/docs/api/storefront). ```ts string ``` * type The kind of Shopify resource this metafield belongs to: - \`'customer'\`: The customer who placed the order. - \`'product'\`: A product in the merchant's catalog. - \`'shop'\`: The merchant's shop. - \`'shopUser'\`: A staff member or collaborator account on the shop. - \`'variant'\`: A specific variant of a product. - \`'company'\`: A \[B2B]\(/docs/apps/build/b2b) company associated with the order. - \`'companyLocation'\`: A location belonging to a \[B2B]\(/docs/apps/build/b2b) company. - \`'cart'\`: The cart associated with the checkout. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data) when the type is \`customer\`, \`company\` or \`companyLocation\`. ```ts | 'customer' | 'product' | 'shop' | 'shopUser' | 'variant' | 'company' | 'companyLocation' | 'cart' ``` ### PaymentOption A payment option presented to the buyer. * handle A session-scoped identifier for this payment option. This handle isn't globally unique; it's specific to the current checkout session or the shop. ```ts string ``` * type The type of the payment option. Shops can be configured to support many different payment options. Some options are available only to buyers in specific regions. | Type | Description | |---|---| | \`creditCard\` | A vaulted or manually entered credit card. | | \`deferred\` | A \[deferred payment]\(https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. | | \`local\` | A \[local payment option]\(https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market | | \`manualPayment\` | A manual payment option such as an in-person retail transaction. | | \`offsite\` | A payment processed outside of Shopify's checkout, excluding integrated wallets. | | \`other\` | Another type of payment not defined here. | | \`paymentOnDelivery\` | A payment collected on delivery. | | \`redeemable\` | A redeemable payment option such as a gift card or store credit. | | \`wallet\` | An integrated wallet such as PayPal, Google Pay, or Apple Pay. | | \`customOnsite\` | A custom payment option that's processed through a checkout extension with a payments app. | ```ts | 'creditCard' | 'deferred' | 'local' | 'manualPayment' | 'offsite' | 'other' | 'paymentOnDelivery' | 'redeemable' | 'wallet' | 'customOnsite' ``` ### BuyerIdentity Information about the buyer who is completing the checkout. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). The \`customer\` and \`purchasingCompany\` properties require level 1 access. The \`email\` and \`phone\` properties require level 2 access. * customer The buyer's customer account, including their ID and whether they've accepted marketing. The value is \`undefined\` if the buyer isn't a known customer for this shop or if they haven't logged in yet. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts SubscribableSignalLike ``` * email The email address the buyer provided during checkout. The value is \`undefined\` if the app doesn't have access to customer data. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts SubscribableSignalLike ``` * phone The phone number the buyer provided during checkout. The value is \`undefined\` if no phone number was provided or the app doesn't have access to customer data. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts SubscribableSignalLike ``` * purchasingCompany The company and company location that a B2B (business-to-business) customer is purchasing on behalf of. Use this to identify the business context of the order. The value is \`undefined\` if the buyer isn't a B2B customer. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts SubscribableSignalLike ``` ### Customer Information about a customer who has previously purchased from this shop. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). * acceptsEmailMarketing Whether the customer has opted in to email marketing. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts boolean ``` * acceptsMarketing Whether the customer has opted in to receiving marketing communications from the merchant, such as email campaigns and promotional offers. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). > Caution: This field is deprecated and will be removed in a future version. Use \`acceptsEmailMarketing\` or \`acceptsSmsMarketing\` instead. ```ts boolean ``` * acceptsSmsMarketing Whether the customer has opted in to SMS marketing. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts boolean ``` * email The email address associated with the customer's account. The value is \`undefined\` if the app doesn't have the required access level. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * firstName The customer's first name. The value is \`undefined\` if the app doesn't have the required access level. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * fullName The customer's full name, typically a combination of first and last name. The value is \`undefined\` if the app doesn't have the required access level. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * id A globally-unique identifier for the customer in the format \`gid://shopify/Customer/\\`. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * image The customer's profile image, such as a Gravatar avatar. Use this to personalize the extension UI for the logged-in buyer. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts ImageDetails ``` * lastName The customer's last name. The value is \`undefined\` if the app doesn't have the required access level. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * ordersCount The number of orders the customer has previously placed with this shop. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts number ``` * phone The phone number associated with the customer's account. The value is \`undefined\` if no phone number is on file or the app doesn't have the required access level. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * storeCreditAccounts The store credit accounts owned by this customer that can be used as payment during checkout. Each account has a balance representing available store credit. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts StoreCreditAccount[] ``` ### ImageDetails * altText The alternative text for the image, used for accessibility. The value is \`undefined\` if the merchant hasn't provided alt text. ```ts string ``` * url The fully-qualified URL of the image. Use this to render the product or variant image in your extension. ```ts string ``` ### PurchasingCompany The company and location that the \[B2B]\(/docs/apps/build/b2b) customer is purchasing on behalf of. This is present only when the buyer is logged in as a business customer. * company The company the B2B customer belongs to. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts Company ``` * location The specific company location associated with this B2B purchase. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts CompanyLocation ``` ### Company * externalId A merchant-defined external identifier for the company. The value is \`undefined\` if the merchant hasn't set one. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * id A globally-unique identifier for the company in the format \`gid://shopify/Company/\\`. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * name The company's display name. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ### CompanyLocation * externalId A merchant-defined external identifier for the company location. The value is \`undefined\` if the merchant hasn't set one. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * id A globally-unique identifier for the company location in the format \`gid://shopify/CompanyLocation/\\`. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` * name The display name of the company location. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ### BuyerJourney Provides details on the buyer's progression through the checkout. * activeStep The step of checkout the buyer is currently on. The value is \`undefined\` if the current step can't be determined. ```ts SubscribableSignalLike ``` * completed Whether the buyer has completed submitting their order. When \`true\`, the buyer is on the order status page after submitting payment. When \`false\`, the buyer is still in the checkout flow. ```ts SubscribableSignalLike ``` * intercept Installs a function for intercepting and preventing progress on checkout. This returns a promise that resolves to a teardown function. Calling the teardown function removes the interceptor. To block checkout progress, you must set the \[block\_progress]\(/docs/api/checkout-ui-extensions/2026-04/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. If the merchant hasn't allowed your extension to block checkout progress, show a warning in the \[checkout editor]\(/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor). ```ts (interceptor: Interceptor) => Promise<() => void> ``` * steps All possible steps the buyer can take to complete checkout. These steps vary depending on whether the checkout is one-page or three-page, and on the shop's configuration. ```ts SubscribableSignalLike ``` ### BuyerJourneyStepReference What step of checkout the buyer is currently on. * handle The handle identifying which step the buyer is on, such as \`'information'\`, \`'shipping'\`, or \`'payment'\`. See \`BuyerJourneyStepHandle\` for all values. ```ts BuyerJourneyStepHandle ``` ### BuyerJourneyStepHandle \| handle | Description | |---|---| | \`cart\` | The cart page. | | \`checkout\` | A one-page checkout, including Shop Pay. | | \`information\` | The contact information step of a three-page checkout. | | \`shipping\` | The shipping step of a three-page checkout. | | \`payment\` | The payment step of a three-page checkout. | | \`review\` | The step after payment where the buyer confirms the purchase. Not all shops are configured to have a review step. | | \`thank-you\` | The page displayed after the purchase, thanking the buyer. | | \`unknown\` | An unknown step in the buyer journey. | ```ts 'cart' | 'checkout' | 'information' | 'shipping' | 'payment' | 'review' | 'thank-you' | 'unknown' ``` ### Interceptor A function for intercepting and preventing navigation on checkout. You can block navigation by returning an object with \`{behavior: 'block', reason: 'your reason here', errors?: ValidationError\[]}\`. If you do, then you're expected to also update some part of your UI to reflect the reason why navigation was blocked, either by targeting checkout UI fields, passing errors to the page level, or rendering the errors in your extension. * interceptorProps ```ts InterceptorProps ``` InterceptorRequest | Promise\ ```ts InterceptorRequest | Promise ``` ### InterceptorProps * canBlockProgress Whether the interceptor can block the buyer's progress through checkout. When \`true\`, the merchant has granted your extension the \`block\_progress\` capability. When \`false\`, you can still validate but can't prevent the buyer from continuing. ```ts boolean ``` ### InterceptorRequest ```ts InterceptorRequestAllow | InterceptorRequestBlock ``` ### InterceptorRequestAllow * behavior Indicates that the interceptor allows the buyer's journey to continue. ```ts 'allow' ``` * perform This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once. ```ts (result: InterceptorResult) => void | Promise ``` ### InterceptorResult ```ts InterceptorResultAllow | InterceptorResultBlock ``` ### InterceptorResultAllow * behavior Indicates that the buyer was allowed to progress through checkout. ```ts 'allow' ``` ### InterceptorResultBlock * behavior Indicates that some part of the checkout UI intercepted and prevented the buyer's progress. The buyer typically needs to take some action to resolve this issue and to move on to the next step. ```ts 'block' ``` ### InterceptorRequestBlock * behavior Indicates that the interceptor blocks the buyer's journey from continuing. ```ts 'block' ``` * errors Used to pass errors to the checkout UI, outside your extension's UI boundaries. ```ts ValidationError[] ``` * perform This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once. ```ts (result: InterceptorResult) => void | Promise ``` * reason The reason for blocking the interceptor request. This value isn't presented to the buyer, so it doesn't need to be localized. The value is used only for Shopify's own internal debugging and metrics. ```ts string ``` ### ValidationError * message The error message to display to the buyer. Use this to explain what went wrong and how to fix it. ```ts string ``` * target The checkout UI field that the error is associated with. When provided, checkout highlights the matching field so the buyer knows where to fix the issue. The value is \`undefined\` if the error isn't tied to a specific field. ```ts string ``` ### BuyerJourneyStep * disabled Whether this step is disabled. When \`true\`, the buyer hasn't reached this step yet and can't navigate to it. When \`false\`, the step is accessible. For example, if the buyer hasn't reached the \`shipping\` step yet, then \`shipping\` is disabled. ```ts boolean ``` * handle The handle that uniquely identifies the buyer journey step, such as \`'information'\`, \`'shipping'\`, or \`'payment'\`. ```ts BuyerJourneyStepHandle ``` * label The localized label of the buyer journey step, suitable for rendering in navigation UI. ```ts string ``` * to The URL of the buyer journey step, using the \`shopify:\` protocol. ```ts string ``` ### CheckoutSettings Settings describing the behavior of the buyer's checkout. * orderSubmission The type of order created when the buyer completes checkout. - \`'DRAFT\_ORDER'\`: The checkout creates a draft order that the merchant must manually confirm before fulfillment. Common for B2B checkouts with deferred payment terms. - \`'ORDER'\`: The checkout creates a confirmed order immediately upon completion. ```ts 'DRAFT_ORDER' | 'ORDER' ``` * paymentTermsTemplate The payment terms configured by the merchant for B2B orders, such as net-30 or net-60. The value is \`undefined\` if no payment terms are configured. ```ts PaymentTermsTemplate ``` * shippingAddress Settings that control how the shipping address behaves during checkout, such as whether the buyer can edit the address. ```ts ShippingAddressSettings ``` ### PaymentTermsTemplate A payment terms template configured by the merchant, defining when payment is due for B2B orders. Common examples include "Net 30" (due in 30 days) or "Due on receipt". * dueDate The due date for payment in \[ISO 8601]\(https://en.wikipedia.org/wiki/ISO\_8601) format (\`YYYY-MM-DDTHH:mm:ss.sssZ\`). The value is \`undefined\` if the payment terms don't have a fixed due date. ```ts string ``` * dueInDays The number of days the buyer has to pay after the order is placed, such as \`30\` for "Net 30" terms. The value is \`undefined\` if the payment terms aren't net-based. ```ts number ``` * id A globally-unique identifier for the payment terms template in the format \`gid://shopify/PaymentTermsTemplate/\\`. ```ts string ``` * name The name of the payment terms translated to the buyer's current language, such as "Net 30" or "Due on receipt". ```ts string ``` ### ShippingAddressSettings Settings describing the behavior of the shipping address. * isEditable Whether the buyer is allowed to edit the shipping address during checkout. When \`false\`, the shipping address is locked and can't be changed, which is common for B2B orders with a predefined ship-to address. ```ts boolean ``` ### CheckoutToken ```ts string ``` ### CartCost * subtotalAmount The sum of all line item prices at the current step of checkout, before shipping and taxes are applied. Use this value to display the base cost of the items the buyer purchased. ```ts SubscribableSignalLike ``` * totalAmount The minimum total at the current step of checkout. Costs not yet calculated, such as shipping on the information step, aren't included. Gift cards and store credits are excluded from this total. ```ts SubscribableSignalLike ``` * totalShippingAmount The total shipping cost after shipping discounts have been applied. The value is \`undefined\` if shipping hasn't been calculated yet, such as when the buyer is still on the information step. ```ts SubscribableSignalLike ``` * totalTaxAmount The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is \`undefined\` if taxes haven't been calculated yet. ```ts SubscribableSignalLike ``` ### CustomerPrivacy * allowedProcessing Flags indicating whether each type of data processing is permitted, based on the visitor's consent, the merchant's privacy configuration, and the visitor's geographic location. ```ts AllowedProcessing ``` * metafields The tracking consent metafields that have been stored for this visitor. These contain app-specific consent data beyond the standard categories. ```ts TrackingConsentMetafield[] ``` * region The visitor's geographic location, used to determine whether more granular consent controls should be displayed based on regional privacy regulations. ```ts CustomerPrivacyRegion ``` * saleOfDataRegion Whether the visitor is located in a region that requires an explicit opt-out option for the sale or sharing of personal data, such as California (CCPA) or other jurisdictions with similar regulations. ```ts boolean ``` * shouldShowBanner Whether a consent banner should be displayed by default when the page loads. Use this as the initial open/expanded state of the consent banner. This is determined by the visitor's current privacy consent, the shop's \[region visibility configuration]\(https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located. ```ts boolean ``` * visitorConsent The visitor's current privacy consent settings. Each property represents a consent category and is \`true\` (actively granted), \`false\` (actively denied), or \`undefined\` (no decision made yet). ```ts VisitorConsent ``` ### AllowedProcessing * analytics Whether analytics data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Analytics data includes how the shop was used and what interactions occurred. ```ts boolean ``` * marketing Whether marketing data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Marketing data includes attribution and targeted advertising preferences. ```ts boolean ``` * preferences Whether preference data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Preference data includes language, currency, and sizing choices. ```ts boolean ``` * saleOfData Whether data can be shared with third parties based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. This typically applies to behavioral advertising data. ```ts boolean ``` ### TrackingConsentMetafield * key The identifier for the tracking consent metafield, such as \`'analyticsType'\` or \`'marketingType'\`. ```ts string ``` * value The value stored in the tracking consent metafield, such as \`'granular'\` or a stringified JSON object. ```ts string ``` ### CustomerPrivacyRegion * countryCode The buyer's country code in \[ISO 3166-1 alpha-2]\(https://en.wikipedia.org/wiki/ISO\_3166-1\_alpha-2) format. The value is \`undefined\` if geolocation failed. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts CountryCode ``` * provinceCode The buyer's province, state, or region code in \[ISO 3166-2]\(https://en.wikipedia.org/wiki/ISO\_3166-2) format. The value is \`undefined\` if geolocation failed or only the country was detected. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ### VisitorConsent * analytics The visitor's consent for analytics tracking. \`true\` means the visitor actively granted consent, \`false\` means actively denied, and \`undefined\` means no decision has been made yet. ```ts boolean ``` * marketing The visitor's consent for marketing and targeted advertising. \`true\` means the visitor actively granted consent, \`false\` means actively denied, and \`undefined\` means no decision has been made yet. ```ts boolean ``` * preferences The visitor's consent for storing preferences such as language and currency. \`true\` means the visitor actively granted consent, \`false\` means actively denied, and \`undefined\` means no decision has been made yet. ```ts boolean ``` * saleOfData The visitor's consent for the sale or sharing of their personal data with third parties. \`true\` means the visitor actively granted consent, \`false\` means actively denied, and \`undefined\` means no decision has been made yet. ```ts boolean ``` ### DeliveryGroup A group of cart lines that share the same set of delivery options. For example, physical items might form one delivery group while digital items form another. * deliveryOptions The delivery options available for this group, including shipping, pickup point, and pickup location options. The buyer selects one of these to determine how their items are delivered. ```ts DeliveryOption[] ``` * groupType Whether this group contains items for a one-time purchase or a subscription. Subscription delivery groups might have different shipping options. See \`DeliveryGroupType\` for possible values. ```ts DeliveryGroupType ``` * id A unique identifier for the delivery group. The value is \`undefined\` if the underlying delivery line doesn't have an ID assigned. ```ts string ``` * isDeliveryRequired Whether physical delivery is required for the items in this group. Digital-only groups don't require delivery. ```ts boolean ``` * selectedDeliveryOption The delivery option the buyer has selected for this group. The value is \`undefined\` if the buyer hasn't selected a delivery option yet. Contains a \`handle\` you can match against \`deliveryOptions\` entries. ```ts DeliveryOptionReference ``` * targetedCartLines The cart lines that belong to this delivery group. Each reference contains the cart line's \`id\`, which you can match against \`lines\` to get the full cart line details. ```ts CartLineReference[] ``` ### DeliveryOption A delivery option available to the buyer. Use the \`type\` property to determine which kind of option it is: - \`ShippingOption\` (\`type: 'shipping' | 'local'\`): Items shipped by a carrier or delivered locally by the merchant. - \`PickupPointOption\` (\`type: 'pickupPoint'\`): Items shipped to a third-party collection point for the buyer to pick up. - \`PickupLocationOption\` (\`type: 'pickup'\`): Items picked up directly from a merchant's store or warehouse. ```ts ShippingOption | PickupPointOption | PickupLocationOption ``` ### ShippingOption Represents a delivery option that's a shipping option. * carrier Information about the carrier providing this shipping option, including the carrier's display name. ```ts ShippingOptionCarrier ``` * code The carrier service code or rate identifier for this delivery option. ```ts string ``` * cost The cost of this delivery option before any shipping discounts are applied. Compare with \`costAfterDiscounts\` to show savings. ```ts Money ``` * costAfterDiscounts The cost of this delivery option after shipping discounts have been applied. This is the price the buyer actually pays for shipping. ```ts Money ``` * deliveryEstimate The estimated delivery time for this shipping option. Use the \`timeInTransit\` range to display an estimated arrival window to the buyer. ```ts DeliveryEstimate ``` * description Additional details about the delivery option provided by the carrier or merchant, such as estimated delivery windows or service level notes. ```ts string ``` * handle The unique identifier of the delivery option. Use this to match against \`DeliveryOptionReference.handle\` or \`DeliverySelectionGroup\` entries. ```ts string ``` * metafields Custom \[metafields]\(/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a \[Shopify Function]\(/docs/apps/build/functions). Use these to display additional information about the option. ```ts Metafield[] ``` * title The merchant-facing or carrier-provided display name for the delivery option, such as "Standard Shipping" or "Express". ```ts string ``` * type Identifies the delivery method. \`'shipping'\` means items are shipped by a carrier. \`'local'\` means the merchant handles delivery themselves, for example same-day local delivery. ```ts 'shipping' | 'local' ``` ### ShippingOptionCarrier * name The display name of the shipping carrier, such as "Canada Post" or "UPS". The value is \`undefined\` if the carrier name isn't available. ```ts string ``` ### DeliveryEstimate * timeInTransit The estimated time in transit for the delivery, expressed as a range in seconds. Undefined when the carrier doesn't provide an estimate. When present, either the lower or upper bound of the range might still be omitted. ```ts NumberRange ``` ### NumberRange * lower The lower bound of the range. Undefined if only an upper bound is provided. ```ts number ``` * upper The upper bound of the range. Undefined if only a lower bound is provided. ```ts number ``` ### Metafield Metadata associated with the checkout. See the \[metafields documentation]\(/docs/apps/build/custom-data/metafields) for more information on how metafields work. * key The name of the metafield. ```ts string ``` * namespace A container for a set of metafields. You need to define a custom namespace for your metafields to distinguish them from the metafields used by other apps. ```ts string ``` * value The information to be stored as metadata. ```ts string | number ``` * valueType The metafield's information type. - \`'integer'\`: A whole number value. - \`'string'\`: A plain text value. - \`'json\_string'\`: A JSON-encoded string value. ```ts 'integer' | 'string' | 'json_string' ``` ### PickupPointOption * carrier Information about the carrier that ships items to this pickup point, including the carrier's name and code. ```ts PickupPointCarrier ``` * code The carrier service code or rate identifier for this delivery option. ```ts string ``` * cost The cost of this delivery option before any shipping discounts are applied. Compare with \`costAfterDiscounts\` to show savings. ```ts Money ``` * costAfterDiscounts The cost of this delivery option after shipping discounts have been applied. This is the price the buyer actually pays for shipping. ```ts Money ``` * description Additional details about the delivery option provided by the carrier or merchant, such as estimated delivery windows or service level notes. ```ts string ``` * handle The unique identifier of the delivery option. Use this to match against \`DeliveryOptionReference.handle\` or \`DeliverySelectionGroup\` entries. ```ts string ``` * location The physical location where the buyer picks up their order, including the address and display name of the collection point. ```ts PickupPointLocation ``` * metafields Custom \[metafields]\(/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a \[Shopify Function]\(/docs/apps/build/functions). Use these to display additional information about the option. ```ts Metafield[] ``` * title The merchant-facing or carrier-provided display name for the delivery option, such as "Standard Shipping" or "Express". ```ts string ``` * type Identifies this as a pickup point option, where items are shipped to a third-party collection point for the buyer to pick up. ```ts 'pickupPoint' ``` ### PickupPointCarrier * code The carrier's unique identifier code, used to distinguish between different carriers that deliver to pickup points. ```ts string ``` * name The display name of the carrier that delivers to this pickup point. ```ts string ``` ### PickupPointLocation * address The physical address of the pickup point. ```ts MailingAddress ``` * handle The unique identifier of the pickup point. ```ts string ``` * name The display name of the pickup point, such as the name of the locker or collection point. ```ts string ``` ### PickupLocationOption * code The carrier service code or rate identifier for this delivery option. ```ts string ``` * description Additional details about the delivery option provided by the carrier or merchant, such as estimated delivery windows or service level notes. ```ts string ``` * handle The unique identifier of the delivery option. Use this to match against \`DeliveryOptionReference.handle\` or \`DeliverySelectionGroup\` entries. ```ts string ``` * location The merchant's store or warehouse where the buyer picks up their order, including the address and display name. ```ts PickupLocation ``` * metafields Custom \[metafields]\(/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a \[Shopify Function]\(/docs/apps/build/functions). Use these to display additional information about the option. ```ts Metafield[] ``` * title The merchant-facing or carrier-provided display name for the delivery option, such as "Standard Shipping" or "Express". ```ts string ``` * type Identifies this as a pickup location option, where the buyer picks up items directly from a merchant's store or warehouse. ```ts 'pickup' ``` ### PickupLocation * address The physical address of the pickup location. ```ts MailingAddress ``` * name The merchant-defined display name of the pickup location, such as a store name or warehouse label. ```ts string ``` ### DeliveryGroupType The possible types of a delivery group. - \`'oneTimePurchase'\`: Items bought as a single, non-recurring purchase. - \`'subscription'\`: Items bought through a \[selling plan]\(/docs/apps/build/purchase-options/subscriptions) that results in recurring deliveries. ```ts 'oneTimePurchase' | 'subscription' ``` ### DeliveryOptionReference A reference to the delivery option selected by the buyer for a delivery group. * handle The unique identifier of the referenced delivery option. Match this against \`DeliveryOption.handle\` from the \`deliveryOptions\` array to get the full option details. ```ts string ``` ### CartLineReference A reference to a cart line within a delivery group, identified by the cart line's ID. * id The unique identifier of the referenced cart line. Match this against \`CartLine.id\` from the \`lines\` property to get the full line item details. ```ts string ``` ### CartDiscountAllocation A discount allocation applied to the cart. Use the \`type\` property to determine how the discount was triggered: - \`CartCodeDiscountAllocation\` (\`type: 'code'\`): Triggered by a discount code the buyer entered. - \`CartAutomaticDiscountAllocation\` (\`type: 'automatic'\`): Applied automatically based on merchant-configured rules. - \`CartCustomDiscountAllocation\` (\`type: 'custom'\`): Applied by a \[Shopify Function]\(/docs/api/functions/latest/discount). ```ts CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation ``` ### CartCodeDiscountAllocation * code The discount code string that the buyer entered during checkout, such as \`"SAVE10"\` or \`"FREESHIP"\`. ```ts string ``` * discountedAmount The monetary value that was deducted from the line item or order total by this discount allocation. ```ts Money ``` * type Identifies this as a code-based discount, triggered by a discount code the buyer entered at checkout. ```ts 'code' ``` ### CartAutomaticDiscountAllocation * discountedAmount The monetary value that was deducted from the line item or order total by this discount allocation. ```ts Money ``` * title The merchant-defined title of the automatic discount as displayed to the buyer, such as "Summer Sale 10% Off". ```ts string ``` * type Identifies this as an automatic discount, applied based on merchant-configured rules without a code. ```ts 'automatic' ``` ### CartCustomDiscountAllocation * discountedAmount The monetary value that was deducted from the line item or order total by this discount allocation. ```ts Money ``` * title The title of the custom discount, typically applied by a \[Shopify Function]\(/docs/api/functions/latest/discount). ```ts string ``` * type Identifies this as a custom discount applied by a \[Shopify Function]\(/docs/api/functions/latest/discount). ```ts 'custom' ``` ### CartDiscountCode * code The discount code string entered by the buyer during checkout or applied programmatically, such as \`"SAVE10"\` or \`"FREESHIP"\`. Use this to display which discount codes were applied. ```ts string ``` ### Extension Metadata about the running extension, including its API version, target, capabilities, and editor context. Use this to read configuration details or conditionally render content based on where the extension is running. * apiVersion The API version that was set in the extension config file. ```ts ApiVersion ``` * capabilities The allowed capabilities of the extension, defined in your \[shopify.extension.toml]\(/docs/api/checkout-ui-extensions/2026-04/configuration) file. \* \[\`api\_access\`]\(/docs/api/checkout-ui-extensions/2026-04/configuration#api-access): the extension can access the Storefront API. \* \[\`network\_access\`]\(/docs/api/checkout-ui-extensions/2026-04/configuration#network-access): the extension can make external network calls. \* \[\`block\_progress\`]\(/docs/api/checkout-ui-extensions/2026-04/configuration#block-progress): the extension can block a customer's progress and the merchant has allowed this blocking behavior. \* \[\`collect\_buyer\_consent.sms\_marketing\`]\(/docs/api/checkout-ui-extensions/2026-04/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing. \* \[\`collect\_buyer\_consent.customer\_privacy\`]\(/docs/api/checkout-ui-extensions/2026-04/configuration#collect-buyer-consent): the extension can register customer consent decisions that are honored on Shopify-managed services. \* \[\`iframe.sources\`]\(/docs/api/checkout-ui-extensions/2026-04/configuration#iframe): the extension can embed an external URL in an iframe. ```ts SubscribableSignalLike ``` * editor Information about the editor where the extension is being rendered. If the value is undefined, then the extension isn't running in an editor. ```ts Editor ``` * rendered A Boolean to show whether your extension is currently rendered to the screen. Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that appear on a later step of the checkout. Your extension might also continue to run after the customer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the customer navigates back. ```ts SubscribableSignalLike ``` * scriptUrl The URL to the script that started the extension target. ```ts string ``` * target The identifier that specifies where in Shopify's UI your code is being injected. This is one of the targets you've included in your extension's configuration file. ```ts Target ``` * version The published version of the running extension target. For unpublished extensions, the value is \`undefined\`. ```ts string ``` ### ApiVersion The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The \`unstable\` version provides access to the latest features but may change without notice. ```ts '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04' ``` ### Capability The capabilities an extension has access to. \* \`api\_access\`: The extension can access the Storefront API. \* \`network\_access\`: The extension can make external network calls. \* \`block\_progress\`: The extension can block a buyer's progress and the merchant has allowed this blocking behavior. \* \`collect\_buyer\_consent.sms\_marketing\`: The extension can collect buyer consent for SMS marketing. \* \`collect\_buyer\_consent.customer\_privacy\`: The extension can register buyer consent decisions that will be honored on Shopify-managed services. \* \`iframe.sources\`: The extension can embed an external URL in an iframe. ```ts 'api_access' | 'network_access' | 'block_progress' | 'collect_buyer_consent.sms_marketing' | 'collect_buyer_consent.customer_privacy' | 'iframe.sources' ``` ### Editor Information about the editor environment when an extension is rendered inside the checkout editor. The value is \`undefined\` when the extension is not rendering in an editor. * type Indicates whether the extension is rendering in the \[checkout editor]\(/docs/apps/checkout). Always \`'checkout'\`. ```ts 'checkout' ``` ### I18n Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Use the I18n API alongside the Localization API to build fully localized extensions. * formatCurrency Returns a localized currency value. This function behaves like the standard \`Intl.NumberFormat()\` with a style of \`currency\` applied. It uses the buyer's locale by default. ```ts (number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string ``` * formatDate Returns a localized date value. This function behaves like the standard \[\`Intl.DateTimeFormat()\`]\(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Intl/DateTimeFormat) and uses the buyer's locale by default. Formatting \[options]\(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Intl/DateTimeFormat#using\_options) can be passed in as options. ```ts (date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string ``` * formatNumber Returns a localized number. This function behaves like the standard \`Intl.NumberFormat()\` with a style of \`decimal\` applied. It uses the buyer's locale by default. ```ts (number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string ``` * translate Returns translated content in the buyer's locale, as supported by the extension. - \`options.count\` is a special numeric value used in pluralization. - The other option keys and values are treated as replacements for interpolation. - If the replacements are all primitives, then \`translate()\` returns a single string. - If replacements contain UI components, then \`translate()\` returns an array of elements. ```ts I18nTranslate ``` ### I18nTranslate Translates a key from your extension's locale files into a localized string. Supports interpolation with placeholder replacements and pluralization via the special \`count\` option. ### CartInstructions * attributes Whether the extension can update custom attributes using \`applyAttributeChange()\`. ```ts AttributesCartInstructions ``` * delivery Whether the extension can modify the shipping address using \`applyShippingAddressChange()\`. ```ts DeliveryCartInstructions ``` * discounts Whether the extension can add or remove discount codes using \`applyDiscountCodeChange()\`. ```ts DiscountsCartInstructions ``` * lines Whether the extension can add, remove, or update cart lines using \`applyCartLinesChange()\`. ```ts CartLinesCartInstructions ``` * metafields Whether the extension can add, update, or delete cart metafields using \`applyMetafieldChange()\`. ```ts MetafieldsCartInstructions ``` * notes Whether the extension can update the order note using \`applyNoteChange()\`. ```ts NotesCartInstructions ``` ### AttributesCartInstructions * canUpdateAttributes Whether attributes can be updated using \`applyAttributeChange()\`. When \`false\`, the checkout configuration doesn't allow attribute changes. Even when \`true\`, calls to \`applyAttributeChange()\` can still fail during accelerated checkout (Apple Pay, Google Pay). ```ts boolean ``` ### DeliveryCartInstructions * canSelectCustomAddress Whether the shipping address can be modified using \`applyShippingAddressChange()\`. When \`false\`, the buyer is using an accelerated checkout flow (Apple Pay, Google Pay) where the address can't be changed. ```ts boolean ``` ### DiscountsCartInstructions * canUpdateDiscountCodes Whether discount codes can be updated using \`applyDiscountCodeChange()\`. When \`false\`, the checkout configuration doesn't allow discount code changes. Even when \`true\`, calls to \`applyDiscountCodeChange()\` can still fail during accelerated checkout (Apple Pay, Google Pay). ```ts boolean ``` ### CartLinesCartInstructions * canAddCartLine Whether new cart lines can be added using \`applyCartLinesChange()\`. When \`false\`, the checkout configuration doesn't allow adding lines (for example, draft orders). Even when \`true\`, calls can still fail during accelerated checkout (Apple Pay, Google Pay). ```ts boolean ``` * canRemoveCartLine Whether cart lines can be removed using \`applyCartLinesChange()\`. When \`false\`, the checkout configuration doesn't allow removing lines. Even when \`true\`, calls can still fail during accelerated checkout. ```ts boolean ``` * canUpdateCartLine Whether cart lines can be updated using \`applyCartLinesChange()\`. When \`false\`, the checkout configuration doesn't allow updating lines. Even when \`true\`, calls can still fail during accelerated checkout. ```ts boolean ``` ### MetafieldsCartInstructions * canDeleteCartMetafield Whether the extension can delete cart metafields using \`applyMetafieldChange()\`. ```ts boolean ``` * canSetCartMetafields Whether the extension can add or update cart metafields using \`applyMetafieldChange()\`. ```ts boolean ``` ### NotesCartInstructions * canUpdateNote Whether the order note can be updated using \`applyNoteChange()\`. When \`false\`, the checkout configuration doesn't allow note changes. Even when \`true\`, calls to \`applyNoteChange()\` can still fail during accelerated checkout (Apple Pay, Google Pay). ```ts boolean ``` ### CartLine * attributes Custom key-value attributes attached to this cart line, such as gift messages or engraving text. Use \`applyCartLinesChange()\` to update these values. ```ts Attribute[] ``` * cost The cost breakdown for this line item, including the total price after any line-level discounts have been applied. ```ts CartLineCost ``` * discountAllocations Discounts applied to this cart line, including code-based, automatic, and custom discounts. Each allocation shows the discounted amount and how the discount was triggered. ```ts CartDiscountAllocation[] ``` * id A unique identifier for the cart line in the format \`gid://shopify/CartLine/\\`. This ID isn't stable and can change after any cart operation, so avoid persisting it. Always look up the current ID before calling \`applyCartLinesChange()\`, because you'll need it to create a \`CartLineChange\` object. ```ts string ``` * lineComponents The individual components of a \[bundle]\(/docs/apps/build/product-merchandising/bundles) line item. Each component represents a separate product within the bundle. Returns an empty array if the line item isn't a bundle. ```ts CartBundleLineComponent[] ``` * merchandise The product variant or other merchandise associated with this line item. Use this to access product details such as the title, image, SKU, and selected options. ```ts Merchandise ``` * parentRelationship The parent line item that this line belongs to, or \`null\` if this is a top-level line item. Used to identify lines added as children of a bundle or other grouped product. ```ts CartLineParentRelationship | null ``` * quantity The number of units of this merchandise that the buyer purchased. ```ts number ``` ### CartLineCost * totalAmount The total price the buyer pays for this line item after all line-level discounts have been applied, but before order-level discounts, taxes, and shipping. ```ts Money ``` ### CartBundleLineComponent An individual component within a bundled cart line. Each \`CartLine\` that represents a bundle has a \`lineComponents\` array containing these components. * attributes Custom key-value pairs attached to this bundle component, such as personalization options specific to this item within the bundle. ```ts Attribute[] ``` * cost The cost breakdown for this bundle component, including the total amount after any per-item discounts. ```ts CartLineCost ``` * id A unique identifier for this component within the bundle, in the format \`gid://shopify/CartLineComponent/\\`. This ID isn't stable and might change after any operation that updates the line items. ```ts string ``` * merchandise The product variant included in this bundle component. Use this to display product details for individual items within a bundle. ```ts Merchandise ``` * quantity The number of units of this component included in the bundle. ```ts number ``` * type Identifies this as a bundle line component. This is currently the only component type. ```ts 'bundle' ``` ### Merchandise * id A globally-unique identifier for the product variant in the format \`gid://shopify/ProductVariant/\\`. ```ts string ``` * image The image associated with the product variant. Falls back to the product image if the variant doesn't have its own. The value is \`undefined\` if neither the variant nor the product has an image. ```ts ImageDetails ``` * product The parent product that this variant belongs to. Use this to access the product's ID, vendor, and type. ```ts Product ``` * requiresShipping Whether this product variant requires physical shipping. When \`true\`, the buyer must provide a shipping address. Returns \`false\` for digital products, gift cards, and services. ```ts boolean ``` * selectedOptions The product options applied to this variant, such as size, color, or material. Each entry contains the option name and the selected value. ```ts SelectedOption[] ``` * sellingPlan The \[selling plan]\(/docs/apps/build/purchase-options/subscriptions) associated with this variant, such as a subscription or pre-order plan. The value is \`undefined\` if the item isn't being purchased through a selling plan. ```ts SellingPlan ``` * sku The stock keeping unit (SKU) assigned to this variant by the merchant, used for inventory tracking. The value is \`undefined\` if no SKU has been set. ```ts string ``` * subtitle A secondary description for the variant that provides additional context, such as a color or size combination. The value is \`undefined\` if no subtitle is available. ```ts string ``` * title The display title of the product variant, such as "Small" or "Red / Large". This is the variant-specific label, not the parent product title. ```ts string ``` * type Identifies the merchandise as a product variant. This is currently the only merchandise type in checkout. ```ts 'variant' ``` ### Product * id A globally-unique identifier for the product in the format \`gid://shopify/Product/\\`. ```ts string ``` * productType A merchant-defined categorization for the product, such as "Accessories" or "Clothing". Commonly used for filtering and organizing products in a storefront. ```ts string ``` * vendor The name of the product's vendor or manufacturer, as set by the merchant in Shopify admin. ```ts string ``` ### SelectedOption * name The name of the product option, such as "Color" or "Size". ```ts string ``` * value The selected value for the product option, such as "Red" or "Large". ```ts string ``` ### CartLineParentRelationship * parent The parent cart line that a cart line is associated with. ```ts { id: string; } ``` ### Localization The buyer's language, country, currency, and timezone context. Use this to adapt your extension to the buyer's region and display localized content. * country The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is \`undefined\` if the buyer's country is unknown. ```ts SubscribableSignalLike ``` * currency The currency that the buyer sees for money amounts in the checkout. Use this value to format prices and totals in the buyer's expected currency. ```ts SubscribableSignalLike ``` * extensionLanguage The best available language match for your extension based on the buyer's language. If the buyer's language is \`'fr-CA'\` but your extension supports only \`'fr'\`, this returns \`'fr'\`. If your extension doesn't support any variant of the buyer's language, this falls back to your extension's default locale (the \`.default.json\` translation file). Use this value to load the correct translation file for your extension. ```ts SubscribableSignalLike ``` * language The language the buyer sees in the checkout. This reflects the language selected by the buyer or determined by their browser settings, and might differ from the languages your extension supports. ```ts SubscribableSignalLike ``` * market The \[market]\(/docs/apps/build/markets) context of the checkout, carried over from the cart context. Markets group countries and regions with shared pricing, languages, and domains. It updates when the buyer changes the country of their shipping address. The value is \`undefined\` if the market is unknown. > Caution: Deprecated as of version \`2025-04\`. Merchants now manage which extensions load for each market, so extensions no longer need to check this value. ```ts SubscribableSignalLike ``` * timezone The buyer's time zone, based on their browser or account settings. Use this value to format dates and times relative to the buyer's local time. ```ts SubscribableSignalLike ``` ### Country A buyer's country, identified by its ISO country code. * isoCode The two-letter country code in \[ISO 3166-1 alpha-2]\(https://en.wikipedia.org/wiki/ISO\_3166-1\_alpha-2) format. ```ts CountryCode ``` ### Currency * isoCode The three-letter currency code in \[ISO 4217]\(https://en.wikipedia.org/wiki/ISO\_4217) format, such as \`'USD'\`, \`'EUR'\`, or \`'CAD'\`. ```ts CurrencyCode ``` ### Language * isoCode The \[BCP-47]\(https://en.wikipedia.org/wiki/IETF\_language\_tag) language tag that identifies the language. This is a standardized code that might include a base language and an optional region subtag separated by a dash. For example, \`'en'\` represents English and \`'en-US'\` represents English as used in the United States. The region subtag follows the \[ISO 3166-1 alpha-2]\(https://en.wikipedia.org/wiki/ISO\_3166-1\_alpha-2) standard. ```ts string ``` ### Market A \[Shopify Market]\(/docs/apps/build/markets) that represents a group of one or more regions for international selling. * handle The human-readable, shop-scoped identifier for the market, such as \`'us'\` or \`'eu'\`. Merchants define these handles when configuring \[Shopify Markets]\(/docs/apps/build/markets). ```ts string ``` * id A globally-unique identifier for the market in the format \`gid://shopify/Market/\\`. ```ts string ``` ### Timezone ```ts 'Africa/Abidjan' | 'Africa/Algiers' | 'Africa/Bissau' | 'Africa/Cairo' | 'Africa/Casablanca' | 'Africa/Ceuta' | 'Africa/El_Aaiun' | 'Africa/Johannesburg' | 'Africa/Juba' | 'Africa/Khartoum' | 'Africa/Lagos' | 'Africa/Maputo' | 'Africa/Monrovia' | 'Africa/Nairobi' | 'Africa/Ndjamena' | 'Africa/Sao_Tome' | 'Africa/Tripoli' | 'Africa/Tunis' | 'Africa/Windhoek' | 'America/Adak' | 'America/Anchorage' | 'America/Araguaina' | 'America/Argentina/Buenos_Aires' | 'America/Argentina/Catamarca' | 'America/Argentina/Cordoba' | 'America/Argentina/Jujuy' | 'America/Argentina/La_Rioja' | 'America/Argentina/Mendoza' | 'America/Argentina/Rio_Gallegos' | 'America/Argentina/Salta' | 'America/Argentina/San_Juan' | 'America/Argentina/San_Luis' | 'America/Argentina/Tucuman' | 'America/Argentina/Ushuaia' | 'America/Asuncion' | 'America/Bahia' | 'America/Bahia_Banderas' | 'America/Barbados' | 'America/Belem' | 'America/Belize' | 'America/Boa_Vista' | 'America/Bogota' | 'America/Boise' | 'America/Cambridge_Bay' | 'America/Campo_Grande' | 'America/Cancun' | 'America/Caracas' | 'America/Cayenne' | 'America/Chicago' | 'America/Chihuahua' | 'America/Costa_Rica' | 'America/Cuiaba' | 'America/Danmarkshavn' | 'America/Dawson' | 'America/Dawson_Creek' | 'America/Denver' | 'America/Detroit' | 'America/Edmonton' | 'America/Eirunepe' | 'America/El_Salvador' | 'America/Fort_Nelson' | 'America/Fortaleza' | 'America/Glace_Bay' | 'America/Goose_Bay' | 'America/Grand_Turk' | 'America/Guatemala' | 'America/Guayaquil' | 'America/Guyana' | 'America/Halifax' | 'America/Havana' | 'America/Hermosillo' | 'America/Indiana/Indianapolis' | 'America/Indiana/Knox' | 'America/Indiana/Marengo' | 'America/Indiana/Petersburg' | 'America/Indiana/Tell_City' | 'America/Indiana/Vevay' | 'America/Indiana/Vincennes' | 'America/Indiana/Winamac' | 'America/Inuvik' | 'America/Iqaluit' | 'America/Jamaica' | 'America/Juneau' | 'America/Kentucky/Louisville' | 'America/Kentucky/Monticello' | 'America/La_Paz' | 'America/Lima' | 'America/Los_Angeles' | 'America/Maceio' | 'America/Managua' | 'America/Manaus' | 'America/Martinique' | 'America/Matamoros' | 'America/Mazatlan' | 'America/Menominee' | 'America/Merida' | 'America/Metlakatla' | 'America/Mexico_City' | 'America/Miquelon' | 'America/Moncton' | 'America/Monterrey' | 'America/Montevideo' | 'America/New_York' | 'America/Nipigon' | 'America/Nome' | 'America/Noronha' | 'America/North_Dakota/Beulah' | 'America/North_Dakota/Center' | 'America/North_Dakota/New_Salem' | 'America/Nuuk' | 'America/Ojinaga' | 'America/Panama' | 'America/Pangnirtung' | 'America/Paramaribo' | 'America/Phoenix' | 'America/Port-au-Prince' | 'America/Porto_Velho' | 'America/Puerto_Rico' | 'America/Punta_Arenas' | 'America/Rainy_River' | 'America/Rankin_Inlet' | 'America/Recife' | 'America/Regina' | 'America/Resolute' | 'America/Rio_Branco' | 'America/Santarem' | 'America/Santiago' | 'America/Santo_Domingo' | 'America/Sao_Paulo' | 'America/Scoresbysund' | 'America/Sitka' | 'America/St_Johns' | 'America/Swift_Current' | 'America/Tegucigalpa' | 'America/Thule' | 'America/Thunder_Bay' | 'America/Tijuana' | 'America/Toronto' | 'America/Vancouver' | 'America/Whitehorse' | 'America/Winnipeg' | 'America/Yakutat' | 'America/Yellowknife' | 'Antarctica/Casey' | 'Antarctica/Davis' | 'Antarctica/Macquarie' | 'Antarctica/Mawson' | 'Antarctica/Palmer' | 'Antarctica/Rothera' | 'Antarctica/Troll' | 'Antarctica/Vostok' | 'Asia/Almaty' | 'Asia/Amman' | 'Asia/Anadyr' | 'Asia/Aqtau' | 'Asia/Aqtobe' | 'Asia/Ashgabat' | 'Asia/Atyrau' | 'Asia/Baghdad' | 'Asia/Baku' | 'Asia/Bangkok' | 'Asia/Barnaul' | 'Asia/Beirut' | 'Asia/Bishkek' | 'Asia/Brunei' | 'Asia/Chita' | 'Asia/Choibalsan' | 'Asia/Colombo' | 'Asia/Damascus' | 'Asia/Dhaka' | 'Asia/Dili' | 'Asia/Dubai' | 'Asia/Dushanbe' | 'Asia/Famagusta' | 'Asia/Gaza' | 'Asia/Hebron' | 'Asia/Ho_Chi_Minh' | 'Asia/Hong_Kong' | 'Asia/Hovd' | 'Asia/Irkutsk' | 'Asia/Jakarta' | 'Asia/Jayapura' | 'Asia/Jerusalem' | 'Asia/Kabul' | 'Asia/Kamchatka' | 'Asia/Karachi' | 'Asia/Kathmandu' | 'Asia/Khandyga' | 'Asia/Kolkata' | 'Asia/Krasnoyarsk' | 'Asia/Kuala_Lumpur' | 'Asia/Kuching' | 'Asia/Macau' | 'Asia/Magadan' | 'Asia/Makassar' | 'Asia/Manila' | 'Asia/Nicosia' | 'Asia/Novokuznetsk' | 'Asia/Novosibirsk' | 'Asia/Omsk' | 'Asia/Oral' | 'Asia/Pontianak' | 'Asia/Pyongyang' | 'Asia/Qatar' | 'Asia/Qostanay' | 'Asia/Qyzylorda' | 'Asia/Riyadh' | 'Asia/Sakhalin' | 'Asia/Samarkand' | 'Asia/Seoul' | 'Asia/Shanghai' | 'Asia/Singapore' | 'Asia/Srednekolymsk' | 'Asia/Taipei' | 'Asia/Tashkent' | 'Asia/Tbilisi' | 'Asia/Tehran' | 'Asia/Thimphu' | 'Asia/Tokyo' | 'Asia/Tomsk' | 'Asia/Ulaanbaatar' | 'Asia/Urumqi' | 'Asia/Ust-Nera' | 'Asia/Vladivostok' | 'Asia/Yakutsk' | 'Asia/Yangon' | 'Asia/Yekaterinburg' | 'Asia/Yerevan' | 'Atlantic/Azores' | 'Atlantic/Bermuda' | 'Atlantic/Canary' | 'Atlantic/Cape_Verde' | 'Atlantic/Faroe' | 'Atlantic/Madeira' | 'Atlantic/Reykjavik' | 'Atlantic/South_Georgia' | 'Atlantic/Stanley' | 'Australia/Adelaide' | 'Australia/Brisbane' | 'Australia/Broken_Hill' | 'Australia/Darwin' | 'Australia/Eucla' | 'Australia/Hobart' | 'Australia/Lindeman' | 'Australia/Lord_Howe' | 'Australia/Melbourne' | 'Australia/Perth' | 'Australia/Sydney' | 'CET' | 'CST6CDT' | 'EET' | 'EST' | 'EST5EDT' | 'Etc/GMT' | 'Etc/GMT-1' | 'Etc/GMT-10' | 'Etc/GMT-11' | 'Etc/GMT-12' | 'Etc/GMT-13' | 'Etc/GMT-14' | 'Etc/GMT-2' | 'Etc/GMT-3' | 'Etc/GMT-4' | 'Etc/GMT-5' | 'Etc/GMT-6' | 'Etc/GMT-7' | 'Etc/GMT-8' | 'Etc/GMT-9' | 'Etc/GMT+1' | 'Etc/GMT+10' | 'Etc/GMT+11' | 'Etc/GMT+12' | 'Etc/GMT+2' | 'Etc/GMT+3' | 'Etc/GMT+4' | 'Etc/GMT+5' | 'Etc/GMT+6' | 'Etc/GMT+7' | 'Etc/GMT+8' | 'Etc/GMT+9' | 'Etc/UTC' | 'Europe/Amsterdam' | 'Europe/Andorra' | 'Europe/Astrakhan' | 'Europe/Athens' | 'Europe/Belgrade' | 'Europe/Berlin' | 'Europe/Brussels' | 'Europe/Bucharest' | 'Europe/Budapest' | 'Europe/Chisinau' | 'Europe/Copenhagen' | 'Europe/Dublin' | 'Europe/Gibraltar' | 'Europe/Helsinki' | 'Europe/Istanbul' | 'Europe/Kaliningrad' | 'Europe/Kiev' | 'Europe/Kirov' | 'Europe/Lisbon' | 'Europe/London' | 'Europe/Luxembourg' | 'Europe/Madrid' | 'Europe/Malta' | 'Europe/Minsk' | 'Europe/Monaco' | 'Europe/Moscow' | 'Europe/Oslo' | 'Europe/Paris' | 'Europe/Prague' | 'Europe/Riga' | 'Europe/Rome' | 'Europe/Samara' | 'Europe/Saratov' | 'Europe/Simferopol' | 'Europe/Sofia' | 'Europe/Stockholm' | 'Europe/Tallinn' | 'Europe/Tirane' | 'Europe/Ulyanovsk' | 'Europe/Uzhgorod' | 'Europe/Vienna' | 'Europe/Vilnius' | 'Europe/Volgograd' | 'Europe/Warsaw' | 'Europe/Zaporozhye' | 'Europe/Zurich' | 'HST' | 'Indian/Chagos' | 'Indian/Christmas' | 'Indian/Cocos' | 'Indian/Kerguelen' | 'Indian/Mahe' | 'Indian/Maldives' | 'Indian/Mauritius' | 'Indian/Reunion' | 'MET' | 'MST' | 'MST7MDT' | 'Pacific/Apia' | 'Pacific/Auckland' | 'Pacific/Bougainville' | 'Pacific/Chatham' | 'Pacific/Chuuk' | 'Pacific/Easter' | 'Pacific/Efate' | 'Pacific/Fakaofo' | 'Pacific/Fiji' | 'Pacific/Funafuti' | 'Pacific/Galapagos' | 'Pacific/Gambier' | 'Pacific/Guadalcanal' | 'Pacific/Guam' | 'Pacific/Honolulu' | 'Pacific/Kanton' | 'Pacific/Kiritimati' | 'Pacific/Kosrae' | 'Pacific/Kwajalein' | 'Pacific/Majuro' | 'Pacific/Marquesas' | 'Pacific/Nauru' | 'Pacific/Niue' | 'Pacific/Norfolk' | 'Pacific/Noumea' | 'Pacific/Pago_Pago' | 'Pacific/Palau' | 'Pacific/Pitcairn' | 'Pacific/Pohnpei' | 'Pacific/Port_Moresby' | 'Pacific/Rarotonga' | 'Pacific/Tahiti' | 'Pacific/Tarawa' | 'Pacific/Tongatapu' | 'Pacific/Wake' | 'Pacific/Wallis' | 'PST8PDT' | 'WET' ``` ### LocalizedField * key The identifier for the localized field, indicating the type of information collected (for example, a tax credential or shipping credential for a specific country). ```ts LocalizedFieldKey ``` * title The localized display label for the field, suitable for rendering in the UI. ```ts string ``` * value The current value entered by the buyer for this field. ```ts string ``` ### LocalizedFieldKey A union of keys for the localized fields that are required by certain countries. ```ts 'SHIPPING_CREDENTIAL_BR' | 'SHIPPING_CREDENTIAL_CL' | 'SHIPPING_CREDENTIAL_CN' | 'SHIPPING_CREDENTIAL_CO' | 'SHIPPING_CREDENTIAL_CR' | 'SHIPPING_CREDENTIAL_EC' | 'SHIPPING_CREDENTIAL_ES' | 'SHIPPING_CREDENTIAL_GT' | 'SHIPPING_CREDENTIAL_ID' | 'SHIPPING_CREDENTIAL_KR' | 'SHIPPING_CREDENTIAL_MY' | 'SHIPPING_CREDENTIAL_MX' | 'SHIPPING_CREDENTIAL_PE' | 'SHIPPING_CREDENTIAL_PT' | 'SHIPPING_CREDENTIAL_PY' | 'SHIPPING_CREDENTIAL_TR' | 'SHIPPING_CREDENTIAL_TW' | 'SHIPPING_CREDENTIAL_TYPE_CO' | 'TAX_CREDENTIAL_BR' | 'TAX_CREDENTIAL_CL' | 'TAX_CREDENTIAL_CO' | 'TAX_CREDENTIAL_CR' | 'TAX_CREDENTIAL_EC' | 'TAX_CREDENTIAL_ES' | 'TAX_CREDENTIAL_GT' | 'TAX_CREDENTIAL_ID' | 'TAX_CREDENTIAL_IT' | 'TAX_CREDENTIAL_MX' | 'TAX_CREDENTIAL_MY' | 'TAX_CREDENTIAL_PE' | 'TAX_CREDENTIAL_PT' | 'TAX_CREDENTIAL_PY' | 'TAX_CREDENTIAL_TR' | 'TAX_CREDENTIAL_TYPE_CO' | 'TAX_CREDENTIAL_TYPE_MX' | 'TAX_CREDENTIAL_USE_MX' | 'TAX_EMAIL_IT' ``` ### StorefrontApiVersion The supported Storefront API versions. Pass one of these values to \`query()\` to target a specific API version when querying the Storefront GraphQL API. ```ts '2022-04' | '2022-07' | '2022-10' | '2023-01' | '2023-04' | '2023-07' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' ``` ### GraphQLError An error returned by the Storefront GraphQL API. Contains a human-readable \`message\` and an \`extensions\` object with the request ID and error code for debugging. * extensions Additional error metadata including the request ID and error code. ```ts { requestId: string; code: string; } ``` * message A human-readable description of the error. ```ts string ``` ### SelectedPaymentOption A payment option that the buyer has actively selected. This is the same shape as \`PaymentOption\` and appears in \`selectedPaymentOptions\`. * handle A session-scoped identifier for this payment option. This handle isn't globally unique; it's specific to the current checkout session or the shop. ```ts string ``` * type The type of the payment option. Shops can be configured to support many different payment options. Some options are available only to buyers in specific regions. | Type | Description | |---|---| | \`creditCard\` | A vaulted or manually entered credit card. | | \`deferred\` | A \[deferred payment]\(https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. | | \`local\` | A \[local payment option]\(https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market | | \`manualPayment\` | A manual payment option such as an in-person retail transaction. | | \`offsite\` | A payment processed outside of Shopify's checkout, excluding integrated wallets. | | \`other\` | Another type of payment not defined here. | | \`paymentOnDelivery\` | A payment collected on delivery. | | \`redeemable\` | A redeemable payment option such as a gift card or store credit. | | \`wallet\` | An integrated wallet such as PayPal, Google Pay, or Apple Pay. | | \`customOnsite\` | A custom payment option that's processed through a checkout extension with a payments app. | ```ts | 'creditCard' | 'deferred' | 'local' | 'manualPayment' | 'offsite' | 'other' | 'paymentOnDelivery' | 'redeemable' | 'wallet' | 'customOnsite' ``` ### SessionToken Authenticates requests between your extension and your app backend. Use session tokens to verify the identity of the buyer and the shop context when making server-side API calls. The token is a signed JWT that contains claims such as the customer ID, shop domain, and expiration. * get Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method returns cached tokens when possible, so you don't need to worry about storing these tokens yourself. ```ts () => Promise ``` ### ExtensionSettings The merchant-defined setting values for the extension. ### Shop Metadata about the merchant's store, including its name, storefront URL, \`.myshopify.com\` subdomain, and a globally-unique ID. * id A globally-unique identifier for the shop in the format \`gid://shopify/Shop/\\`. ```ts string ``` * myshopifyDomain The shop's unique \`.myshopify.com\` subdomain, such as \`'example.myshopify.com'\`. This domain is permanent and doesn't change even if the merchant adds a custom domain. ```ts string ``` * name The display name of the shop as configured by the merchant in Shopify admin. ```ts string ``` * storefrontUrl The primary storefront URL for the shop, such as \`'https://example.myshopify.com'\`. Use this to build links back to the merchant's online store. ```ts string ``` ### Storage Key-value storage for a specific extension. Use storage to save preferences or cached data that should survive page reloads without requiring a backend call. Stored data is only available to this specific extension. The storage backend is implemented with \`localStorage\` and data persistence isn't guaranteed. * delete Deletes a previously stored value by key. ```ts (key: string) => Promise ``` * read Read and return a stored value by key. The stored data is deserialized from JSON and returned as its original type. Returns \`null\` if no stored data exists. ```ts (key: string) => Promise ``` * write Write stored data for this key. The data must be serializable to JSON. ```ts (key: string, data: any) => Promise ``` ### Version ```ts string ``` Examples ### Examples * #### ##### Preact ```jsx import '@shopify/ui-extensions/preact'; import {render} from 'preact'; import {useAttributeValues} from '@shopify/ui-extensions/checkout/preact'; export default function extension() { render(, document.body); } function Extension() { const [freeGiftRequested] = useAttributeValues([ 'requestedFreeGift', ]); // 1. Render a UI return ( ); async function onCheckboxChange(event) { const isChecked = event.currentTarget.checked; // 2. Check if the API is available if ( !shopify.instructions.value.attributes .canUpdateAttributes ) { console.error( 'Attributes cannot be updated in this checkout', ); return; } // 3. Call the API to modify checkout const result = await shopify.applyAttributeChange({ key: 'requestedFreeGift', type: 'updateAttribute', value: isChecked ? 'yes' : 'no', }); console.log( 'applyAttributeChange result', result, ); } } ``` ## Related [Reference - APIs](https://shopify.dev/docs/api/checkout-ui-extensions/targets) [Reference - Components](https://shopify.dev/docs/api/checkout-ui-extensions/components) [Reference - Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) [Learn - Tutorials](https://shopify.dev/apps/checkout)