--- title: customer-account.order.action.menu-item.render description: >- A [static extension target](/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders as 1 order action on the Order Index and Order Status pages in customer accounts. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-action-menu/customer-account-order-action-menu-item-render md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-action-menu/customer-account-order-action-menu-item-render.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-10/upgrading-to-2025-10) to upgrade your extension. # customer-account.​order.​action.​menu-item.​render A [static extension target](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders as 1 order action on the Order Index and Order Status pages in customer accounts. ### Support Components (63) APIs (2) ### Supported components * [Avatar](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/avatar) * [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge) * [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner) * [Block​Layout](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blocklayout) * [Block​Spacer](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockspacer) * [Block​Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockstack) * [Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button) * [Card](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/card) * [Checkbox](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/checkbox) * [Choice](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choice) * [Choice​List](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/choicelist) * [Clipboard​Item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/clipboarditem) * [Customer​Account​Action](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/customeraccountaction) * [Date​Field](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/datefield) * [Date​Picker](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/datepicker) * [Disclosure](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/disclosure) * [Divider](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/divider) * [Drop​Zone](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/dropzone) * [Form](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/form) * [Grid](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/grid) * [Grid​Item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/griditem) * [Heading](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/heading) * [Heading​Group](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/headinggroup) * [Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/icon) * [Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/image) * [Image​Group](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/imagegroup) * [Inline​Layout](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinelayout) * [Inline​Spacer](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinespacer) * [Inline​Stack](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/inlinestack) * [Link](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/link) * [List](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/list) * [List​Item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/listitem) * [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/map) * [Map​Marker](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker) * [Map​Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mappopover) * [Menu](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/menu) * [Modal](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/modal) * [Page](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/page) * [Payment​Icon](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/paymenticon) * [Phone​Field](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/phonefield) * [Popover](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/popover) * [Pressable](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/pressable) * [Product​Thumbnail](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/productthumbnail) * [Progress](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/progress) * [QRCode](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode) * [Resource​Item](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/resourceitem) * [Scroll​View](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/scrollview) * [Select](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/select) * [Sheet](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/sheet) * [Skeleton​Image](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/skeletonimage) * [Skeleton​Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontext) * [Skeleton​Text​Block](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/skeletontextblock) * [Spinner](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/spinner) * [Stepper](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/stepper) * [Switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/switch) * [Tag](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/tag) * [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/text) * [Text​Block](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/textblock) * [Text​Field](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/textfield) * [Toggle​Button](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/togglebutton) * [Toggle​Button​Group](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/forms/togglebuttongroup) * [Tooltip](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/overlays/tooltip) * [View](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/view) ### Available APIs * [Order API](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/target-apis/order-apis/order-api) * Standard​Api ## OrderApi The API object provided to this and other `customer-account.order` extension targets. * **orderId** **string** **required** A globally-unique identifier for the order. ## StandardApi The base API object provided to this and other `customer-account` extension targets. * **analytics** **Analytics** **required** Methods for interacting with [web pixels](https://shopify.dev/docs/apps/build/marketing-analytics/pixels), such as publishing analytics events. **Note:** Requires a \connected third-party domain\ for your customer account pages. * **applyTrackingConsentChange** **ApplyTrackingConsentChangeType** **required** Applies changes to the buyer's tracking consent preferences and 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). * **authenticatedAccount** **AuthenticatedAccount** **required** The authenticated customer's account information, including their customer ID and B2B company details. * **customerPrivacy** **StatefulRemoteSubscribable\** **required** The buyer's current privacy consent settings, including consent flags, allowed processing activities, and region information. * **extension** **Extension** **required** Metadata about the extension, including its target, version, and editor context. For configuration details, see [`shopify.extension.toml`](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07#configuration). * **i18n** **I18n** **required** Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Supports both the buyer's locale and the extension's fallback locale. * **localization** **Localization** **required** The buyer's language, country, and locale context. For formatting utilities, use the `i18n` object instead. * **navigation** **StandardExtensionNavigation** **required** Methods for navigating within the customer account, including URL-based navigation and history management. * **query** **\(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError\[]; }>** **required** Queries the Storefront GraphQL API using a prefetched token. Requires the [`api_access` capability](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07#configuration) in your extension configuration. * **sessionToken** **SessionToken** **required** Provides access to session tokens for verifying requests from your extension to your app's backend. Session tokens are signed [JSON Web Tokens (JWTs)](https://jwt.io/) that contain information about the current session. For more details, see the [Session Token API](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/apis/session-token). * **settings** **StatefulRemoteSubscribable\** **required** The merchant-configured [settings](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07#configuration) for this extension. Settings are empty until the merchant configures them, and values update in real time as the merchant saves changes. * **storage** **Storage** **required** Key-value storage that persists across customer sessions. Data is scoped to your app and shared across all extension targets. * **ui** **Ui** **required** Triggers platform-level UI interactions, such as displaying toast notifications. Use this to show success or error messages in response to customer actions. * **version** **Version** **required** The API version your extension is running against. This is the version specified in your [`shopify.extension.toml`](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07#configuration) file. * **extensionPoint** **Target** **required** **deprecated** The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file. For available targets, see the [extension targets overview](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/extension-targets-overview). For configuration details, see [extension targets](https://shopify.dev/docs/apps/app-extensions/configuration#targets). **Deprecated:** Deprecated as of version `2023-07`, use `extension.target` instead. ### Analytics Methods for interacting with \[web pixels]\(/docs/apps/build/marketing-analytics/pixels), including publishing analytics events and capturing visitor identity data. * publish Publishes analytics events to \[web pixels]\(/docs/apps/build/marketing-analytics/pixels). Events are forwarded to all subscribed pixels. ```ts (name: string, data: Record) => Promise ``` * visitor Captures visitor identity data (email or phone) for analytics and marketing attribution. ```ts (data: { email?: string; phone?: string; }) => Promise ``` ### VisitorResult Represents a visitor result. ```ts VisitorSuccess | VisitorError ``` ### VisitorSuccess Represents a successful visitor result. * type Indicates the visitor information was successfully 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's \*\*not\*\* localized, and therefore should not be presented directly to the buyer. ```ts string ``` * type Indicates the visitor information was invalid and wasn't submitted, such as using an incorrect data type or missing a required property. ```ts "error" ``` ### ApplyTrackingConsentChangeType * visitorConsent ```ts VisitorConsentChange ``` Promise\ ```ts Promise ``` ### VisitorConsentChange * analytics Whether the visitor consents to analytics tracking that measures how they interact with the site. ```ts boolean ``` * marketing Whether the visitor consents to ads and marketing communications based on their interests. ```ts boolean ``` * metafields Tracking consent metafield data to be saved. If the value is \`null\`, the metafield will be deleted. ```ts TrackingConsentMetafieldChange[] ``` * preferences Whether the visitor consents to storing preferences, such as country or language, to personalize their experience. ```ts boolean ``` * saleOfData Whether the visitor opts out of data sharing or sale of their personal data. ```ts boolean ``` * type The type of consent change. Always \`'changeVisitorConsent'\`. ```ts "changeVisitorConsent" ``` ### TrackingConsentMetafieldChange * key The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ```ts string ``` * value The information to be stored as metadata. If the value is \`null\`, the metafield will be deleted. ```ts string | null ``` ### TrackingConsentChangeResult ```ts TrackingConsentChangeResultSuccess | TrackingConsentChangeResultError ``` ### TrackingConsentChangeResultSuccess The result returned when a tracking consent preference update succeeds. * type Always \`'success'\`, indicating the consent change was applied. ```ts "success" ``` ### TrackingConsentChangeResultError The result returned when a tracking consent preference update fails, including an error message. * message A message that explains the error. This message is useful for debugging. It isn’t localized, and therefore shouldn’t be presented directly to the buyer. ```ts string ``` * type Always \`'error'\`, indicating the consent change failed. ```ts "error" ``` ### AuthenticatedAccount * customer The authenticated customer's account information, including their globally-unique ID. ```ts StatefulRemoteSubscribable ``` * purchasingCompany The B2B company information for the authenticated business customer. The value is \`undefined\` if the customer isn't authenticated or isn't a B2B customer. ```ts StatefulRemoteSubscribable ``` ### Customer The authenticated customer's account information. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). * id A globally-unique identifier for the customer. ```ts string ``` ### PurchasingCompany * company The company that the authenticated B2B customer belongs to. ```ts Company ``` * location The company location that the authenticated B2B customer is purchasing for. ```ts CompanyLocation ``` ### Company * id A globally-unique identifier for the company. ```ts string ``` ### CompanyLocation * id A globally-unique identifier for the company location. ```ts string ``` ### CustomerPrivacy * allowedProcessing Flags indicating which data processing activities are allowed, based on the visitor's consent, merchant configuration, and the visitor's location. ```ts AllowedProcessing ``` * metafields Custom key-value pairs that store additional tracking consent preferences, such as granular opt-in choices for analytics or marketing categories. The array is empty when no consent metafields have been set. ```ts TrackingConsentMetafield[] ``` * region The visitor's geolocation data, used to determine whether region-specific consent controls should be displayed. ```ts CustomerPrivacyRegion ``` * saleOfDataRegion Whether the visitor is in a region that requires explicit opt-out controls for the sale of personal data. ```ts boolean ``` * shouldShowBanner Whether a consent banner should display when the page loads. Determined by the visitor's current 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), and the visitor's location. ```ts boolean ``` * visitorConsent The visitor's explicit consent choices for analytics, marketing, preferences, and sale of data. Each flag is \`true\` (granted), \`false\` (denied), or \`undefined\` (no decision yet). ```ts VisitorConsent ``` ### AllowedProcessing * analytics Whether the app can collect analytics about how the buyer interacted with the shop. ```ts boolean ``` * marketing Whether the app can use the buyer's data for marketing, attribution, and targeted advertising. ```ts boolean ``` * preferences Whether the app can store the buyer's preferences, such as language, currency, and size. ```ts boolean ``` * saleOfData Whether the buyer has opted out of data sharing with third parties for behavioral advertising. ```ts boolean ``` ### TrackingConsentMetafield * key The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ```ts string ``` * value The stored consent preference value, such as a consent level or a stringified JSON object with granular settings. ```ts string ``` ### CustomerPrivacyRegion * countryCode The \[ISO 3166 Alpha-2 format]\(https://www\.iso.org/iso-3166-country-codes.html) for the buyer's country. {% 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 code, such as state, province, prefecture, or region. Province codes can be found by clicking on the \`Subdivisions assigned codes\` column for countries listed \[here]\(https://en.wikipedia.org/wiki/ISO\_3166-2). {% 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 ```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' ``` ### VisitorConsent * analytics Whether the visitor consents to analytics tracking that measures how they interact with the site. ```ts boolean ``` * marketing Whether the visitor consents to ads and marketing communications based on their interests. ```ts boolean ``` * preferences Whether the visitor consents to storing preferences, such as country or language, to personalize their experience. ```ts boolean ``` * saleOfData Whether the visitor opts out of data sharing or sale of their personal data. ```ts boolean ``` ### Extension Metadata about the extension, including its target, version, and editor context. For configuration details, see \[\`shopify.extension.toml\`]\(/docs/api/customer-account-ui-extensions/2025-07#configuration). * 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/customer-account-ui-extensions/2025-07#configuration) file. \* \[\`api\_access\`]\(/docs/api/customer-account-ui-extensions/2025-07#configuration): the extension can access the Storefront API. \* \[\`network\_access\`]\(/docs/api/customer-account-ui-extensions/2025-07#configuration): the extension can make external network calls. \* \[\`block\_progress\`]\(/docs/api/customer-account-ui-extensions/2025-07#configuration): the extension can block a buyer's progress and the merchant has allowed this blocking behavior. ```ts StatefulRemoteSubscribable ``` * editor Information about the editor where the extension is being rendered. The value is undefined if the extension isn’t rendering in an editor. ```ts Editor ``` * rendered Whether your extension is currently rendered to the screen. Shopify may render your extension before it's visible in the UI to pre-render content. Your extension may also continue running after the buyer navigates away so it's immediately available if they return. ```ts StatefulRemoteSubscribable ``` * scriptUrl The URL of the JavaScript file that powers this extension target. ```ts string ``` * target The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file. For available targets, see the \[extension targets overview]\(/docs/api/customer-account-ui-extensions/2025-07/extension-targets-overview). For configuration details, see \[extension targets]\(/docs/apps/app-extensions/configuration#targets). ```ts Target ``` * version The published version of the running extension. 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, and can change without notice because it's not subject to versioning guarantees. ```ts '2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' ``` ### 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 where the extension is being rendered. * type Indicates whether the extension is rendering in the checkout editor. ```ts "checkout" ``` ### I18n Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Supports both the buyer's locale and the extension's fallback locale. * formatCurrency Returns a localized currency string. This function behaves like the standard \[\`Intl.NumberFormat()\`]\(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Intl/NumberFormat) with a style of \`currency\` applied. Uses the buyer's locale by default. ```ts (number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string ``` * formatDate Returns a localized date string. 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 string. This function behaves like the standard \[\`Intl.NumberFormat()\`]\(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Intl/NumberFormat) with a style of \`decimal\` applied. 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 The signature for the \`i18n.translate()\` function. Returns translated content matching a key in a locale file, with support for pluralization and interpolation. ### Localization The buyer’s language, country, and locale context in the customer account. Use this to adapt content to the buyer’s region and language preferences. * country The buyer's country context in the customer account, as a \`StatefulRemoteSubscribable\` that updates if the buyer changes their country. The value is \`undefined\` if the country is unknown. ```ts StatefulRemoteSubscribable ``` * extensionLanguage The buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, this is the fallback locale used for translations. For example, if the buyer's language is \`fr-CA\` but your extension only supports translations for \`fr\`, then the \`isoCode\` for this language is \`fr\`. If your extension doesn't provide French translations at all, this value is the default locale for your extension (that is, the one matching your \`.default.json\` file). ```ts StatefulRemoteSubscribable ``` * language The language the buyer sees in the customer account pages. ```ts StatefulRemoteSubscribable ``` ### Country A buyer's country, identified by its ISO country code. * isoCode The ISO-3166-1 code for this country. ```ts CountryCode ``` ### Language Represents the buyer's language as a \[BCP-47 standard]\(https://en.wikipedia.org/wiki/IETF\_language\_tag) language tag. * isoCode The \[BCP-47]\(https://en.wikipedia.org/wiki/IETF\_language\_tag) language tag. May include a dash followed by an \[ISO 3166-1 Alpha-2]\(https://en.wikipedia.org/wiki/ISO\_3166-1\_alpha-2) region subtag. ```ts string ``` ### StandardExtensionNavigation Provides URL-based navigation within the customer account. Supports navigation to customer account pages and \[custom protocols]\(/docs/api/customer-account-ui-extensions/2025-07/apis/navigation). * navigate Navigates to a specific URL within the customer account, updating the history entries list. ```ts NavigateFunction ``` ### NavigateFunction A function that performs navigation to a specific URL within the customer account. ### 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' ``` ### 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 ``` ### SessionToken Provides access to session tokens for verifying requests from your extension to your app's backend. Session tokens are signed \[JSON Web Tokens (JWTs)]\(https://jwt.io/) that contain information about the current session. For more details, see the \[Session Token API]\(/docs/api/customer-account-ui-extensions/2025-07/apis/session-token). * get Requests a session token that hasn't expired. Call this method every time you need to make a request to your backend to get a valid token. Returns cached tokens when possible, so you don't need to store tokens yourself. ```ts () => Promise ``` ### ExtensionSettings The merchant-defined setting values for the extension, as configured in the \[\`shopify.extension.toml\`]\(/docs/api/customer-account-ui-extensions/2025-07#configuration) file. * \[key: string] ```ts string | number | boolean | undefined ``` ### Storage Key-value storage that persists across customer sessions. Data is scoped to your app and shared across all extension targets. * delete Deletes the stored data for the given key. ```ts (key: string) => Promise ``` * read Reads and returns a stored value by key. The stored data is deserialized from JSON and returned as its original type. Returns \`null\` if no data exists for the given key. ```ts (key: string) => Promise ``` * write Writes data for the given key. The data must be serializable to JSON. ```ts (key: string, data: any) => Promise ``` ### Ui Triggers platform-level UI interactions from your extension, such as displaying toast notifications. Use the UI API to show success or error messages in response to customer actions. * forceDataRefresh Refresh data so the surrounding information on the page is updated. The \`content\` string will appear in a toast message after refresh, to confirm the action was successful. To request access to this API: 1. Go to your partner dashboard and click \*\*Apps\*\*. 2. Select the app you need to request access for. 3. Click \*\*API access\*\*. 4. Under \*\*Access force data refresh\*\*, click \*\*Request access\*\*. ```ts (content: string) => Promise ``` * overlay An overlay is a contextual element on top of the main interface that provides additional information or functionality. ```ts { close(overlayId: string): void; } ``` * toast The Toast API displays a non-disruptive message that displays at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. How to use: - Use toasts to confirm successful actions. - Aim for two words. - Use noun + past tense verb format. For example, \\\`Changes saved\\\`. For errors, or information that needs to persist on the page, use a \[banner]\(/docs/api/customer-account-ui-extensions/2025-07/components/feedback/banner) component. ```ts { show(content: string): void; } ``` ## ButtonProps Supported props for Buttons used in order actions.\ \ `children` only support text.\ \ Omit `onPress` and `to` to trigger the `customer-account.order.action.render` extension target on press. * **to** **string** **required** Destination URL to link to. E.g. `extension:/` to navigate to the Full-page extension. * **accessibilityLabel** **string** A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users. * **appearance** **Extract\** Specify the color treatment of the Button. * **disabled** **boolean** **Default: false** Disables the button, disallowing any interaction. * **loading** **boolean** **Default: false** Replaces content with a loading indicator. * **loadingLabel** **string** Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true. * **onPress** **() => void** Callback that is run when the button is pressed. ### Appearance A keyword that maps to a predefined color or visual treatment from the design system. Used to convey meaning or emphasis through color. - \`base\`: The default color for the element set within the theme. - \`accent\`: Conveys emphasis and draws attention to the element. - \`decorative\`: Uses the \`decorative\` color set within the theme. - \`interactive\`: Conveys that the element is pressable or hoverable. Deprecated; use \`accent\` instead. - \`subdued\`: Conveys a subdued or disabled state. - \`info\`: Conveys informational content. - \`success\`: Conveys a successful interaction. - \`warning\`: Conveys something needs attention or action. - \`critical\`: Conveys a problem has arisen. - \`monochrome\`: Takes the color of its parent, giving a uniform appearance. ```ts 'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome' ``` Examples ### Examples * #### Customer account order menu item extension example ##### React ```jsx import React from "react"; import { Button, reactExtension, useApi, } from "@shopify/ui-extensions-react/customer-account"; export default reactExtension( "customer-account.order.action.menu-item.render", () => ); function MenuActionItemExtension() { const {i18n} = useApi<"customer-account.order.action.menu-item.render">() return ; } ``` ##### Javascript ```js import {Button, extension} from '@shopify/ui-extensions/customer-account'; export default extension( 'customer-account.order.action.menu-item.render', (root) => { root.appendChild( root.createComponent( Button, undefined, 'Edit Order' ), ); }, ); ``` * #### Loading your data before rendering the menu item ##### React ```jsx import React from "react"; import { Button, reactExtension, useApi, } from "@shopify/ui-extensions-react/customer-account"; export default reactExtension( "customer-account.order.action.menu-item.render", async () => { const data = await fetchMenuItems(); return } ); interface Props { data: any; } function MenuActionItemExtension(props: Props) { return ; } function fetchMenuItems() { throw new Error("Function not implemented."); } ``` ## Related [Limitations - Order status page](https://shopify.dev/docs/apps/customer-accounts/order-status-page#pre-authenticated-order-status-page)