--- title: purchase.thank-you.block.render description: >- A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). api_version: 2025-07 api_name: checkout-ui-extensions source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/block/purchase-thank-you-block-render md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets/block/purchase-thank-you-block-render.md --- # purchase.​thank-you.​block.​renderTarget Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) for some properties. A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). The [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets). ## OrderConfirmationApi The API object provided to this and other `purchase.thank-you` extension targets. * orderConfirmation StatefulRemoteSubscribable\ required Order information that's available post-checkout. ### OrderConfirmation * isFirstOrder Whether this is the customer's first order. ```ts boolean ``` * number A randomly generated alpha-numeric identifier for the order. For orders created in 2024 and onwards, the number will always be present. For orders created before that date, the number might not be present. ```ts string ``` * order ```ts { id: string; } ``` ```ts export interface OrderConfirmation { order: { /** * The globally-uniqueID of the OrderConfirmation. This will be the ID of the Order once successfully created. */ id: string; }; /** * A randomly generated alpha-numeric identifier for the order. * For orders created in 2024 and onwards, the number will always be present. For orders created before that date, the number might not be present. */ number?: string; /** * Whether this is the customer's first order. */ isFirstOrder: boolean; } ``` ## StandardApi The base API object provided to this and other `purchase.checkout` and `purchase.thank-you` extension targets. * analytics Analytics required The methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event. * appliedGiftCards StatefulRemoteSubscribable\ required Gift Cards that have been applied to the checkout. * applyTrackingConsentChange ApplyTrackingConsentChangeType required Allows setting and updating customer privacy consent settings and tracking consent metafields. Note Requires the [`customer_privacy` capability](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/configuration#collect-buyer-consent) 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 StatefulRemoteSubscribable\ required The metafields requested in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/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}]` is not 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 StatefulRemoteSubscribable\ required The custom attributes left by the customer to the merchant, either in their cart or during checkout. * availablePaymentOptions StatefulRemoteSubscribable\ required All available payment options. * buyerJourney BuyerJourney required Provides details on the buyer's progression through the checkout. Refer to [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/apis/buyer-journey#examples) examples for more information. * checkoutSettings StatefulRemoteSubscribable\ required Settings applied to the buyer's checkout. * checkoutToken StatefulRemoteSubscribable\ required A stable ID that represents the current checkout. Matches the `token` field in the [WebPixel checkout payload](https://shopify.dev/docs/api/pixels/customer-events#checkout) 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 Details on the costs the buyer will pay for this checkout. * customerPrivacy StatefulRemoteSubscribable\ required Customer privacy consent settings and a flag denoting if consent has previously been collected. * deliveryGroups StatefulRemoteSubscribable\ required A list of delivery groups containing information about the delivery of the items the customer intends to purchase. * discountAllocations StatefulRemoteSubscribable\ required Discounts that have been applied to the entire cart. * discountCodes StatefulRemoteSubscribable\ required A list of discount codes currently applied to the checkout. * extension Extension\ required The meta information about the extension. * i18n I18n required Utilities for translating content and formatting values according to the current [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization) of the checkout. Refer to [`localization` examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#examples) for more information. * instructions StatefulRemoteSubscribable\ required The cart instructions used to create the checkout and possibly limit extension capabilities. These instructions should be checked prior to performing any actions that may 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 are not available. See the [update guide](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cart-instructions#examples) for more information. * lines StatefulRemoteSubscribable\ required A list of lines containing information about the items the customer intends to purchase. * localization Localization required The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-i18n) object instead. * metafields StatefulRemoteSubscribable\ required The metafields that apply to the current checkout. Metafields are stored locally on the client and are applied to the order object after the checkout completes. These metafields are shared by all extensions running on checkout, and persist for as long as the customer is working on this checkout. Once the order is created, you can query these metafields using the [GraphQL Admin API](https://shopify.dev/docs/admin-api/graphql/reference/orders/order#metafield-2021-01) Tip \> Cart metafields are only available on carts created via the Storefront API version `2023-04` or later. * note StatefulRemoteSubscribable\ required A note left by the customer to the merchant, either in their cart or during checkout. * 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/apis/storefront-api) for more information. * selectedPaymentOptions StatefulRemoteSubscribable\ required Payment options selected by the buyer. * sessionToken SessionToken required The session token providing a set of claims as a signed JSON Web Token (JWT). The token has a TTL of 5 minutes. If the previous token expires, this value will reflect a new session token with a new signature and expiry. Refer to [session token examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/session-token) for more information. * settings StatefulRemoteSubscribable\ required The settings matching the settings definition written in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file. Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/settings#examples) for more information. Note When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings. * shop Shop required The shop where the checkout is taking place. * storage Storage required The key-value storage for the extension. It uses `localStorage` and should persist across the customer's current checkout session. Caution Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout. Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier, each activated extension target had its own storage. * ui Ui required Methods to interact with the extension’s UI. * version Version required The renderer version being used for the extension. * billingAddress StatefulRemoteSubscribable\ The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke. [](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 is interacting with the checkout. [](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 StatefulRemoteSubscribable\ The API for reading additional fields that are required in checkout under certain circumstances. For example, some countries require additional fields for customs information or tax identification numbers. * shippingAddress StatefulRemoteSubscribable\ The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke. An address value is only present if delivery is required. Otherwise, the subscribable value is undefined. [](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 will be one of the targets you have included in your extension’s configuration file. Deprecated Deprecated as of version `2023-07`, use `extension.target` instead. ### Analytics * publish Publish method to emit analytics events to \[Web Pixels]\(/docs/apps/marketing). ```ts (name: string, data: Record) => Promise ``` * visitor A method for capturing details about a visitor on the online store. ```ts (data: { email?: string; phone?: string; }) => Promise ``` ```ts export interface Analytics { /** * Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing). */ publish(name: string, data: Record): Promise; /** * A method for capturing details about a visitor on the online store. */ visitor(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" ``` ```ts export interface VisitorSuccess { /** * Indicates that the visitor information was validated and submitted. */ type: '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 that the visitor information is invalid and wasn't submitted. Examples are using the wrong data type or missing a required property. ```ts "error" ``` ```ts export interface VisitorError { /** * Indicates that the visitor information is invalid and wasn't submitted. * Examples are using the wrong data type or missing a required property. */ type: 'error'; /** * 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. */ message: string; } ``` ### AppliedGiftCard * amountUsed The amount of the applied gift card that will be used when the checkout is completed. ```ts Money ``` * balance The current balance of the applied gift card prior to checkout completion. ```ts Money ``` * lastCharacters The last four characters of the applied gift card's code. ```ts string ``` ```ts export interface AppliedGiftCard { /** * The last four characters of the applied gift card's code. */ lastCharacters: string; /** * The amount of the applied gift card that will be used when the checkout is completed. */ amountUsed: Money; /** * The current balance of the applied gift card prior to checkout completion. */ balance: Money; } ``` ### Money * amount The price amount. ```ts number ``` * currencyCode The ISO 4217 format for the currency. ```ts CurrencyCode ``` ```ts export interface Money { /** * The price amount. */ amount: number; /** * The ISO 4217 format for the currency. * @example 'CAD' for Canadian dollar */ currencyCode: 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 ``` ```ts export type ApplyTrackingConsentChangeType = ( visitorConsent: VisitorConsentChange, ) => Promise; ``` ### VisitorConsentChange * analytics Visitor consents to recording data to understand how customers interact with the site. ```ts boolean ``` * marketing Visitor consents to ads and marketing communications based on customer interests. ```ts boolean ``` * metafields Tracking consent metafield data to be saved. If the value is \`null\`, the metafield will be deleted. ```ts TrackingConsentMetafieldChange[] ``` * preferences Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. ```ts boolean ``` * saleOfData Opts the visitor out of data sharing / sales. ```ts boolean ``` * type ```ts "changeVisitorConsent" ``` ```ts export interface VisitorConsentChange extends VisitorConsent { /** * Tracking consent metafield data to be saved. * * If the value is `null`, the metafield will be deleted. * * @example `[{key: 'granularAnalytics', value: 'true'}, {key: 'granularMarketing', value: 'false'}]` */ metafields?: TrackingConsentMetafieldChange[]; type: '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 ``` ```ts export interface TrackingConsentMetafieldChange { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * The information to be stored as metadata. If the value is `null`, the metafield will be deleted. * * @example 'any string', `null`, or a stringified JSON object */ value: string | null; } ``` ### TrackingConsentChangeResult ```ts TrackingConsentChangeResultSuccess | TrackingConsentChangeResultError ``` ### TrackingConsentChangeResultSuccess The returned result of a successful tracking consent preference update. * type The type of the \`TrackingConsentChangeResultSuccess\` API. ```ts "success" ``` ```ts export interface TrackingConsentChangeResultSuccess { /** * The type of the `TrackingConsentChangeResultSuccess` API. */ type: '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 is \*\*not\*\* localized, and therefore should not be presented directly to the buyer. ```ts string ``` * type The type of the \`TrackingConsentChangeResultError\` API. ```ts "error" ``` ```ts export interface TrackingConsentChangeResultError { /** * The type of the `TrackingConsentChangeResultError` API. */ type: 'error'; /** * A message that explains the error. This message is useful for debugging. * It is **not** localized, and therefore should not be presented directly * to the buyer. */ message: string; } ``` ### AppMetafieldEntry A metafield associated with the shop or a resource on the checkout. * metafield The metadata information. ```ts AppMetafield ``` * target The target that is associated to the metadata. {% 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 ``` ```ts export interface AppMetafieldEntry { /** * The target that is associated to the metadata. * * {% 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`. */ target: AppMetafieldEntryTarget; /** The metadata information. */ metafield: AppMetafield; } ``` ### AppMetafield Represents a custom metadata attached to a resource. * key The key name of a metafield. ```ts string ``` * namespace The namespace for a metafield. 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. ```ts string ``` * value The value of a metafield. ```ts string | number | boolean ``` * valueType The metafield’s information type. ```ts 'boolean' | 'float' | 'integer' | 'json_string' | 'string' ``` ```ts export interface AppMetafield { /** The key name of a metafield. */ key: string; /** * The namespace for a metafield. * * 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. */ namespace: string; /** The value of a metafield. */ value: string | number | boolean; /** The metafield’s information type. */ valueType: 'boolean' | 'float' | 'integer' | 'json_string' | 'string'; /** The metafield's type name. */ type: string; } ``` ### AppMetafieldEntryTarget The metafield owner. * id The numeric owner ID that is associated with the metafield. ```ts string ``` * type The type of the metafield owner. {% 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 | 'customer' | 'product' | 'shop' | 'shopUser' | 'variant' | 'company' | 'companyLocation' | 'cart' ``` ```ts export interface AppMetafieldEntryTarget { /** * The type of the metafield owner. * * {% 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`. */ type: | 'customer' | 'product' | 'shop' | 'shopUser' | 'variant' | 'company' | 'companyLocation' | 'cart'; /** The numeric owner ID that is associated with the metafield. */ id: string; } ``` ### Attribute * key The key for the attribute. ```ts string ``` * value The value for the attribute. ```ts string ``` ```ts export interface Attribute { /** * The key for the attribute. */ key: string; /** * The value for the attribute. */ value: string; } ``` ### PaymentOption A payment option presented to the buyer. * handle The unique handle for the payment option. This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop. ```ts string ``` * type The type of the payment option. Shops can be configured to support many different payment options. Some options are only available 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 that will be 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, Apple Pay, etc. | | \`customOnsite\` | A custom payment option that is processed through a checkout extension with a payments app. | ```ts | 'creditCard' | 'deferred' | 'local' | 'manualPayment' | 'offsite' | 'other' | 'paymentOnDelivery' | 'redeemable' | 'wallet' | 'customOnsite' ``` ```ts export interface PaymentOption { /** * The type of the payment option. * * Shops can be configured to support many different payment options. Some options are only available 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 that will be 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, Apple Pay, etc. | * | `customOnsite` | A custom payment option that is processed through a checkout extension with a payments app. | */ type: | 'creditCard' | 'deferred' | 'local' | 'manualPayment' | 'offsite' | 'other' | 'paymentOnDelivery' | 'redeemable' | 'wallet' | 'customOnsite'; /** * The unique handle for the payment option. * * This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop. */ handle: string; } ``` ### MailingAddress * address1 The first line of the buyer's address, including street name and number. {% 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, like apartment number, suite, etc. {% 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 buyer's city. {% 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. {% 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 ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www\.iso.org/iso-3166-country-codes.html. {% 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. {% 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. {% 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. {% 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 buyer's phone number. {% 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 buyer's province code, such as state, province, prefecture, or region. {% 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 buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ```ts export interface MailingAddress { /** * The buyer's full name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'John Doe' */ name?: string; /** * The buyer's first name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'John' */ firstName?: string; /** * The buyer's last name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'Doe' */ lastName?: string; /** * The buyer's company name. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'Shopify' */ company?: string; /** * The first line of the buyer's address, including street name and number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example '151 O'Connor Street' */ address1?: string; /** * The second line of the buyer's address, like apartment number, suite, etc. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ground floor' */ address2?: string; /** * The buyer's city. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'Ottawa' */ city?: string; /** * The buyer's postal or ZIP code. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'K2P 2L8' */ zip?: string; /** * The ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www.iso.org/iso-3166-country-codes.html. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'CA' for Canada. */ countryCode?: CountryCode; /** * The buyer's province code, such as state, province, prefecture, or region. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'ON' for Ontario. */ provinceCode?: string; /** * The buyer's phone number. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example '+1 613 111 2222'. */ phone?: 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' ``` ### BuyerIdentity * customer The buyer's customer account. 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 StatefulRemoteSubscribable ``` * email The email address of the buyer that is interacting with the cart. The value is \`undefined\` if the app does not have access to customer data. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts StatefulRemoteSubscribable ``` * phone The phone number of the buyer that is interacting with the cart. The value is \`undefined\` if the app does not have access to customer data. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts StatefulRemoteSubscribable ``` * purchasingCompany Provides details of the company and the company location that the business customer is purchasing on behalf of. This includes information that can be used to identify the company and the company location that the business customer belongs to. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts StatefulRemoteSubscribable ``` ```ts export interface BuyerIdentity { /** * The buyer's customer account. 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). */ customer: StatefulRemoteSubscribable; /** * The email address of the buyer that is interacting with the cart. * The value is `undefined` if the app does not have access to customer data. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ email: StatefulRemoteSubscribable; /** * The phone number of the buyer that is interacting with the cart. * The value is `undefined` if the app does not have access to customer data. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ phone: StatefulRemoteSubscribable; /** * Provides details of the company and the company location that the business customer is purchasing on behalf of. * This includes information that can be used to identify the company and the company location that the business * customer belongs to. * * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ purchasingCompany: StatefulRemoteSubscribable; } ``` ### 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 Defines if the customer accepts email marketing activities. {% 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 Defines if the customer email accepts marketing activities. {% 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 Defines if the customer accepts SMS marketing activities. {% 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 of the customer. {% 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 first name of the customer. {% 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 full name of the customer. {% 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 Customer ID. {% 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 image associated with the customer. {% 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 last name of the customer. {% 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 previous orders made by this customer. {% 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 of the customer. {% 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 the customer and usable during the checkout process. {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts StoreCreditAccount[] ``` ```ts export interface Customer { /** * Customer ID. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @example 'gid://shopify/Customer/123' */ id: string; /** * The email of the customer. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ email?: string; /** * The phone number of the customer. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ phone?: string; /** * The full name of the customer. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ fullName?: string; /** * The first name of the customer. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ firstName?: string; /** * The last name of the customer. * * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ lastName?: string; /** * The image associated with the customer. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ image: ImageDetails; /** * Defines if the customer email accepts marketing activities. * * {% 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. * * @deprecated Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead. */ acceptsMarketing: boolean; /** * Defines if the customer accepts email marketing activities. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ acceptsEmailMarketing: boolean; /** * Defines if the customer accepts SMS marketing activities. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ acceptsSmsMarketing: boolean; /** * The Store Credit Accounts owned by the customer and usable during the checkout process. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). * * @private */ storeCreditAccounts: StoreCreditAccount[]; /** * The number of previous orders made by this customer. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ ordersCount: number; } ``` ### ImageDetails * altText The alternative text for the image. ```ts string ``` * url The image URL. ```ts string ``` ```ts export interface ImageDetails { /** * The image URL. */ url: string; /** * The alternative text for the image. */ altText?: string; } ``` ### PurchasingCompany The information about a company that the business customer is purchasing on behalf of. * company Includes information of the company that the business customer is purchasing on behalf of. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts Company ``` * location Includes information of the company location that the business customer is purchasing on behalf of. {% include /apps/checkout/privacy-icon.md %} Requires access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts CompanyLocation ``` ```ts export interface PurchasingCompany { /** * Includes information of the company that the business customer is purchasing on behalf of. * * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ company: Company; /** * Includes information of the company location that the business customer is purchasing on behalf of. * * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ location: CompanyLocation; } ``` ### Company * externalId The external ID of the company that can be set by the merchant. {% 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 The company ID. {% 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 name of the 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 ``` ```ts export interface Company { /** * The company ID. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ id: string; /** * The name of the company. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ name: string; /** * The external ID of the company that can be set by the merchant. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ externalId?: string; } ``` ### CompanyLocation * externalId The external ID of the company location that can be set by the merchant. {% 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 The company location ID. {% 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 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 ``` ```ts export interface CompanyLocation { /** * The company location ID. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ id: string; /** * The 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). */ name: string; /** * The external ID of the company location that can be set by the merchant. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ externalId?: string; } ``` ### BuyerJourney Provides details on the buyer's progression through the checkout. * activeStep What step of checkout the buyer is currently on. ```ts StatefulRemoteSubscribable ``` * completed This subscribable value will be true if the buyer completed submitting their order. For example, when viewing the \*\*Order status\*\* page after submitting payment, the buyer will have completed their order. ```ts StatefulRemoteSubscribable ``` * 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 will remove the interceptor. To block checkout progress, you must set the \[block\_progress]\(/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration. If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension. ```ts (interceptor: Interceptor) => Promise<() => void> ``` * steps All possible steps a buyer can take to complete the checkout. These steps may vary depending on the type of checkout or the shop's configuration. ```ts StatefulRemoteSubscribable ``` ```ts export interface BuyerJourney { /** * Installs a function for intercepting and preventing progress on checkout. * * This returns a promise that resolves to a teardown function. Calling the * teardown function will remove the interceptor. * * To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress) * capability in your extension's configuration. * * If you do, then you're expected to inform the buyer why navigation was blocked, * either by passing validation errors to the checkout UI or rendering the errors in your extension. */ intercept(interceptor: Interceptor): Promise<() => void>; /** * This subscribable value will be true if the buyer completed submitting their order. * * For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order. */ completed: StatefulRemoteSubscribable; /** * All possible steps a buyer can take to complete the checkout. These steps may vary depending on the type of checkout or the shop's configuration. */ steps: StatefulRemoteSubscribable; /** * What step of checkout the buyer is currently on. */ activeStep: StatefulRemoteSubscribable; } ``` ### BuyerJourneyStepReference What step of checkout the buyer is currently on. * handle The handle that uniquely identifies the buyer journey step. ```ts BuyerJourneyStepHandle ``` ```ts interface BuyerJourneyStepReference { /** * The handle that uniquely identifies the buyer journey step. */ handle: 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: InvalidResultReason.InvalidExtensionState, errors?: ValidationErrors\[]}\`. 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 ``` ```ts export type Interceptor = ( interceptorProps: InterceptorProps, ) => InterceptorRequest | Promise; ``` ### InterceptorProps * canBlockProgress Whether the interceptor has the capability to block a buyer's progress through checkout. This ability might be granted by a merchant in differing checkout contexts. ```ts boolean ``` ```ts export interface InterceptorProps { /** * Whether the interceptor has the capability to block a buyer's progress through * checkout. This ability might be granted by a merchant in differing checkout contexts. */ canBlockProgress: boolean; } ``` ### InterceptorRequest ```ts InterceptorRequestAllow | InterceptorRequestBlock ``` ### InterceptorRequestAllow * behavior Indicates that the interceptor will allow 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 ``` ```ts interface InterceptorRequestAllow { /** * Indicates that the interceptor will allow the buyer's journey to continue. */ behavior: 'allow'; /** * 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. * @param result InterceptorResult with behavior as either 'allow' or 'block' */ perform?(result: InterceptorResult): void | Promise; } ``` ### InterceptorResult ```ts InterceptorResultAllow | InterceptorResultBlock ``` ### InterceptorResultAllow * behavior Indicates that the buyer was allowed to progress through checkout. ```ts "allow" ``` ```ts interface InterceptorResultAllow { /** * Indicates that the buyer was allowed to progress through checkout. */ behavior: '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" ``` ```ts interface InterceptorResultBlock { /** * 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. */ behavior: 'block'; } ``` ### InterceptorRequestBlock * behavior Indicates that the interceptor will block 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 ``` ```ts interface InterceptorRequestBlock { /** * Indicates that the interceptor will block the buyer's journey from continuing. */ behavior: 'block'; /** * 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. */ reason: string; /** * Used to pass errors to the checkout UI, outside your extension's UI boundaries. */ errors?: ValidationError[]; /** * 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. * @param result InterceptorResult with behavior as either 'allow' or 'block' */ perform?(result: InterceptorResult): void | Promise; } ``` ### ValidationError * message Error message to be displayed to the buyer. ```ts string ``` * target The checkout UI field that the error is associated with. Example: \`$.cart.deliveryGroups\[0].deliveryAddress.countryCode\` See the \[supported targets]\(/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets) for more information. ```ts string ``` ```ts export interface ValidationError { /** * Error message to be displayed to the buyer. */ message: string; /** * The checkout UI field that the error is associated with. * * Example: `$.cart.deliveryGroups[0].deliveryAddress.countryCode` * * See the [supported targets](/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets) * for more information. */ target?: string; } ``` ### BuyerJourneyStep * disabled The disabled state of the buyer journey step. This value will be true if the buyer has not reached the step yet. For example, if the buyer has not reached the \`shipping\` step yet, \`shipping\` would be disabled. ```ts boolean ``` * handle The handle that uniquely identifies the buyer journey step. ```ts BuyerJourneyStepHandle ``` * label The localized label of the buyer journey step. ```ts string ``` * to The url of the buyer journey step. This property leverages the \`shopify:\` protocol E.g. \`shopify:cart\` or \`shopify:checkout/information\`. ```ts string ``` ```ts export interface BuyerJourneyStep { /** * The handle that uniquely identifies the buyer journey step. */ handle: BuyerJourneyStepHandle; /** * The localized label of the buyer journey step. */ label: string; /** * The url of the buyer journey step. This property leverages the `shopify:` protocol * E.g. `shopify:cart` or `shopify:checkout/information`. */ to: string; /** * The disabled state of the buyer journey step. This value will be true if the buyer has not reached the step yet. * * For example, if the buyer has not reached the `shipping` step yet, `shipping` would be disabled. */ disabled: boolean; } ``` ### CheckoutSettings Settings describing the behavior of the buyer's checkout. * orderSubmission The type of order that will be created once the buyer completes checkout. ```ts 'DRAFT_ORDER' | 'ORDER' ``` * paymentTermsTemplate Represents the merchant configured payment terms. ```ts PaymentTermsTemplate ``` * shippingAddress Settings describing the behavior of the shipping address. ```ts ShippingAddressSettings ``` ```ts export interface CheckoutSettings { /** * The type of order that will be created once the buyer completes checkout. */ orderSubmission: 'DRAFT_ORDER' | 'ORDER'; /** * Represents the merchant configured payment terms. */ paymentTermsTemplate?: PaymentTermsTemplate; /** * Settings describing the behavior of the shipping address. */ shippingAddress: ShippingAddressSettings; } ``` ### PaymentTermsTemplate Represents the payment terms template object. * dueDate The due date for net payment terms as a ISO 8601 formatted string \`YYYY-MM-DDTHH:mm:ss.sssZ\`. ```ts string ``` * dueInDays The number of days between the issued date and due date if using net payment terms. ```ts number ``` * id A globally-unique ID. ```ts string ``` * name The name of the payment terms translated to the buyer's current language. Refer to \[localization.language]\(/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-localization). ```ts string ``` ```ts export interface PaymentTermsTemplate { /** * A globally-unique ID. * @example 'gid://shopify/PaymentTermsTemplate/1' */ id: string; /** * The name of the payment terms translated to the buyer's current language. Refer to [localization.language](/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-localization). */ name: string; /** * The due date for net payment terms as a ISO 8601 formatted string `YYYY-MM-DDTHH:mm:ss.sssZ`. */ dueDate?: string; /** * The number of days between the issued date and due date if using net payment terms. */ dueInDays?: number; } ``` ### ShippingAddressSettings Settings describing the behavior of the shipping address. * isEditable Describes whether the buyer can ship to any address during checkout. ```ts boolean ``` ```ts export interface ShippingAddressSettings { /** * Describes whether the buyer can ship to any address during checkout. */ isEditable: boolean; } ``` ### CheckoutToken ```ts string ``` ### CartCost * subtotalAmount A \`Money\` value representing the subtotal value of the items in the cart at the current step of checkout. ```ts StatefulRemoteSubscribable ``` * totalAmount A \`Money\` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated. ```ts StatefulRemoteSubscribable ``` * totalShippingAmount A \`Money\` value representing the total shipping a buyer can expect to pay at the current step of checkout. This value includes shipping discounts. Returns undefined if shipping has not been negotiated yet, such as on the information step. ```ts StatefulRemoteSubscribable ``` * totalTaxAmount A \`Money\` value representing the total tax a buyer can expect to pay at the current step of checkout or the total tax included in product and shipping prices. Returns undefined if taxes are unavailable. ```ts StatefulRemoteSubscribable ``` ```ts export interface CartCost { /** * A `Money` value representing the subtotal value of the items in the cart at the current * step of checkout. */ subtotalAmount: StatefulRemoteSubscribable; /** * A `Money` value representing the total shipping a buyer can expect to pay at the current * step of checkout. This value includes shipping discounts. Returns undefined if shipping * has not been negotiated yet, such as on the information step. */ totalShippingAmount: StatefulRemoteSubscribable; /** * A `Money` value representing the total tax a buyer can expect to pay at the current * step of checkout or the total tax included in product and shipping prices. Returns * undefined if taxes are unavailable. */ totalTaxAmount: StatefulRemoteSubscribable; /** * A `Money` value representing the minimum a buyer can expect to pay at the current * step of checkout. This value excludes amounts yet to be negotiated. For example, * the information step might not have delivery costs calculated. */ totalAmount: StatefulRemoteSubscribable; } ``` ### CustomerPrivacy * allowedProcessing An object containing flags for each consent property denoting whether they can be processed based on visitor consent, merchant configuration, and user location. ```ts AllowedProcessing ``` * metafields Stored tracking consent metafield data. ```ts TrackingConsentMetafield[] ``` * region Details about the visitor's current location for use in evaluating if more granular consent controls should render. ```ts CustomerPrivacyRegion ``` * saleOfDataRegion Whether the visitor is in a region requiring data sale opt-outs. ```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 An object containing the customer's current privacy consent settings. \* ```ts VisitorConsent ``` ```ts export interface CustomerPrivacy { /** * An object containing flags for each consent property denoting whether they can be processed based on visitor consent, merchant configuration, and user location. */ allowedProcessing: AllowedProcessing; /** * Stored tracking consent metafield data. * * @example `[{key: 'analyticsType', value: 'granular'}, {key: 'marketingType', value: 'granular'}]`, or `[]` */ metafields: TrackingConsentMetafield[]; /** * An object containing the customer's current privacy consent settings. * * * @example `true` — the customer has actively granted consent, `false` — the customer has actively denied consent, or `undefined` — the customer has not yet made a decision. */ visitorConsent: VisitorConsent; /** * 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. */ shouldShowBanner: boolean; /** * Whether the visitor is in a region requiring data sale opt-outs. */ saleOfDataRegion: boolean; /** * Details about the visitor's current location for use in evaluating if more granular consent controls should render. * * @example `{countryCode: 'CA', provinceCode: 'ON'}` for a visitor in Ontario, Canada; `{countryCode: 'US', provinceCode: undefined}` for a visitor in the United States if geolocation fails to detect the state; or `undefined` if neither country nor province is detected or geolocation fails. * * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). */ region?: CustomerPrivacyRegion; } ``` ### AllowedProcessing * analytics Can collect customer analytics about how the shop was used and interactions made on the shop. ```ts boolean ``` * marketing Can collect customer preference for marketing, attribution and targeted advertising from the merchant. ```ts boolean ``` * preferences Can collect customer preferences such as language, currency, size, and more. ```ts boolean ``` * saleOfData Can collect customer preference for sharing data with third parties, usually for behavioral advertising. ```ts boolean ``` ```ts export interface AllowedProcessing { /** * Can collect customer analytics about how the shop was used and interactions made on the shop. */ analytics: boolean; /** * Can collect customer preference for marketing, attribution and targeted advertising from the merchant. */ marketing: boolean; /** * Can collect customer preferences such as language, currency, size, and more. */ preferences: boolean; /** * Can collect customer preference for sharing data with third parties, usually for behavioral advertising. */ saleOfData: boolean; } ``` ### TrackingConsentMetafield * 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. ```ts string ``` ```ts export interface TrackingConsentMetafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * The information to be stored as metadata. * * @example 'any string', '', or a stringified JSON object */ value: 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 ``` ```ts export interface CustomerPrivacyRegion { /** * 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). * * @example 'CA' for Canada, 'US' for United States, 'GB' for Great Britain, or undefined if geolocation failed. */ countryCode?: CountryCode; /** * 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). * * @example 'ON' for Ontario, 'ENG' for England, 'CA' for California, or undefined if geolocation failed or only the country was detected. */ provinceCode?: string; } ``` ### VisitorConsent * analytics Visitor consents to recording data to understand how customers interact with the site. ```ts boolean ``` * marketing Visitor consents to ads and marketing communications based on customer interests. ```ts boolean ``` * preferences Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. ```ts boolean ``` * saleOfData Opts the visitor out of data sharing / sales. ```ts boolean ``` ```ts export interface VisitorConsent { /** * Visitor consents to recording data to understand how customers interact with the site. */ analytics?: boolean; /** * Visitor consents to ads and marketing communications based on customer interests. */ marketing?: boolean; /** * Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website. */ preferences?: boolean; /** * Opts the visitor out of data sharing / sales. */ saleOfData?: boolean; } ``` ### DeliveryGroup Represents the delivery information and options available for one or more cart lines. * deliveryOptions The delivery options available for the delivery group. ```ts DeliveryOption[] ``` * groupType The type of the delivery group. ```ts DeliveryGroupType ``` * id The unique identifier of the delivery group. On the Thank You page this value is undefined. ```ts string ``` * isDeliveryRequired Whether delivery is required for the delivery group. ```ts boolean ``` * selectedDeliveryOption The selected delivery option for the delivery group. ```ts DeliveryOptionReference ``` * targetedCartLines The cart line references associated to the delivery group. ```ts CartLineReference[] ``` ```ts export interface DeliveryGroup { /** * The unique identifier of the delivery group. On the Thank You page this value is undefined. */ id?: string; /** * The cart line references associated to the delivery group. */ targetedCartLines: CartLineReference[]; /** * The delivery options available for the delivery group. */ deliveryOptions: DeliveryOption[]; /** * The selected delivery option for the delivery group. */ selectedDeliveryOption?: DeliveryOptionReference; /** * The type of the delivery group. */ groupType: DeliveryGroupType; /** * Whether delivery is required for the delivery group. */ isDeliveryRequired: boolean; } ``` ### DeliveryOption ```ts ShippingOption | PickupPointOption | PickupLocationOption ``` ### ShippingOption Represents a delivery option that is a shipping option. * carrier Information about the carrier. ```ts ShippingOptionCarrier ``` * code The code of the delivery option. ```ts string ``` * cost The cost of the delivery. ```ts Money ``` * costAfterDiscounts The cost of the delivery including discounts. ```ts Money ``` * deliveryEstimate Information about the estimated delivery time. ```ts DeliveryEstimate ``` * description The description of the delivery option. ```ts string ``` * handle The unique identifier of the delivery option. ```ts string ``` * metafields The metafields associated with this delivery option. ```ts Metafield[] ``` * title The title of the delivery option. ```ts string ``` * type The type of this delivery option. ```ts 'shipping' | 'local' ``` ```ts export interface ShippingOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'shipping' | 'local'; /** * Information about the carrier. */ carrier: ShippingOptionCarrier; /** * The cost of the delivery. */ cost: Money; /** * The cost of the delivery including discounts. */ costAfterDiscounts: Money; /** * Information about the estimated delivery time. */ deliveryEstimate: DeliveryEstimate; } ``` ### ShippingOptionCarrier * name The name of the carrier. ```ts string ``` ```ts export interface ShippingOptionCarrier { /** * The name of the carrier. */ name?: string; } ``` ### DeliveryEstimate * timeInTransit The estimated time in transit for the delivery in seconds. ```ts NumberRange ``` ```ts export interface DeliveryEstimate { /** * The estimated time in transit for the delivery in seconds. */ timeInTransit?: NumberRange; } ``` ### NumberRange * lower The lower bound of the number range. ```ts number ``` * upper The upper bound of the number range. ```ts number ``` ```ts export interface NumberRange { /** * The lower bound of the number range. */ lower?: number; /** * The upper bound of the number range. */ upper?: number; } ``` ### Metafield Metadata associated with the checkout. * key The name of the metafield. It must be between 3 and 30 characters in length (inclusive). ```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. This must be between 2 and 20 characters in length (inclusive). ```ts string ``` * value The information to be stored as metadata. ```ts string | number ``` * valueType The metafield’s information type. ```ts 'integer' | 'string' | 'json_string' ``` ```ts export interface Metafield { /** * The name of the metafield. It must be between 3 and 30 characters in * length (inclusive). */ key: string; /** * 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. This must be between 2 and 20 characters in length (inclusive). */ namespace: string; /** * The information to be stored as metadata. */ value: string | number; /** The metafield’s information type. */ valueType: 'integer' | 'string' | 'json_string'; } ``` ### PickupPointOption * carrier Information about the carrier that ships to the pickup point. ```ts PickupPointCarrier ``` * code The code of the delivery option. ```ts string ``` * cost The cost to ship to this pickup point. ```ts Money ``` * costAfterDiscounts The cost to ship to this pickup point including discounts. ```ts Money ``` * description The description of the delivery option. ```ts string ``` * handle The unique identifier of the delivery option. ```ts string ``` * location The location details of the pickup point. ```ts PickupPointLocation ``` * metafields The metafields associated with this delivery option. ```ts Metafield[] ``` * title The title of the delivery option. ```ts string ``` * type The type of this delivery option. ```ts "pickupPoint" ``` ```ts export interface PickupPointOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'pickupPoint'; /** * Information about the carrier that ships to the pickup point. */ carrier: PickupPointCarrier; /** * The cost to ship to this pickup point. */ cost: Money; /** * The cost to ship to this pickup point including discounts. */ costAfterDiscounts: Money; /** * The location details of the pickup point. */ location: PickupPointLocation; } ``` ### PickupPointCarrier * code The code identifying the carrier. ```ts string ``` * name The name of the carrier. ```ts string ``` ```ts interface PickupPointCarrier { /** * The code identifying the carrier. */ code?: string; /** * The name of the carrier. */ name?: string; } ``` ### PickupPointLocation * address The address of the pickup point. ```ts MailingAddress ``` * handle The unique identifier of the pickup point. ```ts string ``` * name The name of the pickup point. ```ts string ``` ```ts interface PickupPointLocation { /** * The name of the pickup point. */ name?: string; /** * The unique identifier of the pickup point. */ handle: string; /** * The address of the pickup point. */ address: MailingAddress; } ``` ### PickupLocationOption * code The code of the delivery option. ```ts string ``` * description The description of the delivery option. ```ts string ``` * handle The unique identifier of the delivery option. ```ts string ``` * location The location details of the pickup location. ```ts PickupLocation ``` * metafields The metafields associated with this delivery option. ```ts Metafield[] ``` * title The title of the delivery option. ```ts string ``` * type The type of this delivery option. ```ts "pickup" ``` ```ts export interface PickupLocationOption extends DeliveryOptionBase { /** * The type of this delivery option. */ type: 'pickup'; /** * The location details of the pickup location. */ location: PickupLocation; } ``` ### PickupLocation * address The address of the pickup location. ```ts MailingAddress ``` * name The name of the pickup location. ```ts string ``` ```ts interface PickupLocation { /** * The name of the pickup location. */ name?: string; /** * The address of the pickup location. */ address: MailingAddress; } ``` ### DeliveryGroupType The possible types of a delivery group. ```ts 'oneTimePurchase' | 'subscription' ``` ### DeliveryOptionReference Represents a reference to a delivery option. * handle The unique identifier of the referenced delivery option. ```ts string ``` ```ts export interface DeliveryOptionReference { /** * The unique identifier of the referenced delivery option. */ handle: string; } ``` ### CartLineReference Represents a reference to a cart line. * id The unique identifier of the referenced cart line. ```ts string ``` ```ts export interface CartLineReference { /** * The unique identifier of the referenced cart line. */ id: string; } ``` ### CartDiscountAllocation ```ts CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation ``` ### CartCodeDiscountAllocation * code The code for the discount ```ts string ``` * discountedAmount The money amount that has been discounted from the order ```ts Money ``` * type The type of the code discount ```ts "code" ``` ```ts export interface CartCodeDiscountAllocation extends CartDiscountAllocationBase { /** * The code for the discount */ code: string; /** * The type of the code discount */ type: 'code'; } ``` ### CartAutomaticDiscountAllocation * discountedAmount The money amount that has been discounted from the order ```ts Money ``` * title The title of the automatic discount ```ts string ``` * type The type of the automatic discount ```ts "automatic" ``` ```ts export interface CartAutomaticDiscountAllocation extends CartDiscountAllocationBase { /** * The title of the automatic discount */ title: string; /** * The type of the automatic discount */ type: 'automatic'; } ``` ### CartCustomDiscountAllocation * discountedAmount The money amount that has been discounted from the order ```ts Money ``` * title The title of the custom discount ```ts string ``` * type The type of the custom discount ```ts "custom" ``` ```ts export interface CartCustomDiscountAllocation extends CartDiscountAllocationBase { /** * The title of the custom discount */ title: string; /** * The type of the custom discount */ type: 'custom'; } ``` ### CartDiscountCode * code The code for the discount ```ts string ``` ```ts export interface CartDiscountCode { /** * The code for the discount */ code: string; } ``` ### Extension The meta information about an extension target. * 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/configuration) file. \* \[\`api\_access\`]\(/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. \* \[\`network\_access\`]\(/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. \* \[\`block\_progress\`]\(/docs/api/checkout-ui-extensions/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/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing. \* \[\`collect\_buyer\_consent.customer\_privacy\`]\(/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register customer consent decisions that will be honored on Shopify-managed services. \* \[\`iframe.sources\`]\(/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. ```ts StatefulRemoteSubscribable ``` * editor Information about the editor where the extension is being rendered. If the value is undefined, then the extension is not 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 will 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 StatefulRemoteSubscribable ``` * 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 will be one of the targets you have 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 ``` ```ts export interface Extension { /** * The API version that was set in the extension config file. * * @example '2024-07', '2024-10', '2025-01', '2025-04', 'unstable' */ apiVersion: ApiVersion; /** * The allowed capabilities of the extension, defined * in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file. * * * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * * * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * * * [`block_progress`](/docs/api/checkout-ui-extensions/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/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing. * * * [`collect_buyer_consent.customer_privacy`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register customer consent decisions that will be honored on Shopify-managed services. * * * [`iframe.sources`](/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe. */ capabilities: StatefulRemoteSubscribable; /** * Information about the editor where the extension is being rendered. * * If the value is undefined, then the extension is not running in an editor. */ editor?: Editor; /** * 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 will 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. */ rendered: StatefulRemoteSubscribable; /** * The URL to the script that started the extension target. */ scriptUrl: string; /** * 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. * * @example 'purchase.checkout.block.render' * @see /docs/api/checkout-ui-extensions/2025-07/extension-targets-overview * @see /docs/apps/app-extensions/configuration#targets */ target: Target; /** * The published version of the running extension target. * * For unpublished extensions, the value is `undefined`. * * @example 3.0.10 */ version?: string; } ``` ### ApiVersion Union of supported API versions ```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\`]\(/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. \* \[\`network\_access\`]\(/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. \* \[\`block\_progress\`]\(/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior. \* \[\`collect\_buyer\_consent.sms\_marketing\`]\(/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing. \* \[\`collect\_buyer\_consent.customer\_privacy\`]\(/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register buyer consent decisions that will be honored on Shopify-managed services. \* \[\`iframe.sources\`]\(/docs/api/checkout-ui-extensions/configuration#iframe): 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 * type Indicates whether the extension is rendering in the checkout editor. ```ts "checkout" ``` ```ts export interface Editor { /** * Indicates whether the extension is rendering in the checkout editor. */ type: 'checkout'; } ``` ### I18n * 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.DateTimeFormatOptions()\` and uses the buyer's locale by default. Formatting 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 ``` ```ts export interface I18n { /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatNumber: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * 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. * * @param options.inExtensionLocale - if true, use the extension's locale */ formatCurrency: ( number: number | bigint, options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions, ) => string; /** * Returns a localized date value. * * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses * the buyer's locale by default. Formatting options can be passed in as * options. * * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options * * @param options.inExtensionLocale - if true, use the extension's locale */ formatDate: ( date: Date, options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions, ) => string; /** * 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. */ translate: I18nTranslate; } ``` ### I18nTranslate This returns a translated string matching a key in a locale file. ```ts export interface I18nTranslate { ( key: string, options?: Record, ): ReplacementType extends string | number ? string : (string | ReplacementType)[]; } ``` ### CartInstructions * attributes Cart instructions related to cart attributes. ```ts AttributesCartInstructions ``` * delivery Cart instructions related to delivery. ```ts DeliveryCartInstructions ``` * discounts Cart instructions related to discounts. ```ts DiscountsCartInstructions ``` * lines Cart instructions related to cart lines. ```ts CartLinesCartInstructions ``` * metafields Cart instructions related to metafields. ```ts MetafieldsCartInstructions ``` * notes Cart instructions related to notes. ```ts NotesCartInstructions ``` ```ts export interface CartInstructions { /** * Cart instructions related to cart attributes. */ attributes: AttributesCartInstructions; /** * Cart instructions related to delivery. */ delivery: DeliveryCartInstructions; /** * Cart instructions related to discounts. */ discounts: DiscountsCartInstructions; /** * Cart instructions related to cart lines. */ lines: CartLinesCartInstructions; /** * Cart instructions related to metafields. */ metafields: MetafieldsCartInstructions; /** * Cart instructions related to notes. */ notes: NotesCartInstructions; } ``` ### AttributesCartInstructions * canUpdateAttributes Indicates whether or not cart attributes can be updated. ```ts boolean ``` ```ts export interface AttributesCartInstructions { /** * Indicates whether or not cart attributes can be updated. */ canUpdateAttributes: boolean; } ``` ### DeliveryCartInstructions * canSelectCustomAddress Indicates whether a buyer can select a custom address. When true, this implies extensions can update the delivery address. ```ts boolean ``` ```ts export interface DeliveryCartInstructions { /** * Indicates whether a buyer can select a custom address. * * When true, this implies extensions can update the delivery address. */ canSelectCustomAddress: boolean; } ``` ### DiscountsCartInstructions * canUpdateDiscountCodes Indicates whether or not discount codes can be updated. ```ts boolean ``` ```ts export interface DiscountsCartInstructions { /** * Indicates whether or not discount codes can be updated. */ canUpdateDiscountCodes: boolean; } ``` ### CartLinesCartInstructions * canAddCartLine Indicates whether or not new cart lines can be added. ```ts boolean ``` * canRemoveCartLine Indicates whether or not cart lines can be removed. ```ts boolean ``` * canUpdateCartLine Indicates whether or not cart lines can be updated. ```ts boolean ``` ```ts export interface CartLinesCartInstructions { /** * Indicates whether or not new cart lines can be added. */ canAddCartLine: boolean; /** * Indicates whether or not cart lines can be removed. */ canRemoveCartLine: boolean; /** * Indicates whether or not cart lines can be updated. */ canUpdateCartLine: boolean; } ``` ### MetafieldsCartInstructions * canDeleteCartMetafield Indicates whether or not cart metafields can be deleted. ```ts boolean ``` * canSetCartMetafields Indicates whether or not cart metafields can be added or updated. ```ts boolean ``` ```ts export interface MetafieldsCartInstructions { /** * Indicates whether or not cart metafields can be added or updated. */ canSetCartMetafields: boolean; /** * Indicates whether or not cart metafields can be deleted. */ canDeleteCartMetafield: boolean; } ``` ### NotesCartInstructions * canUpdateNote Indicates whether or not notes can be updated. ```ts boolean ``` ```ts export interface NotesCartInstructions { /** * Indicates whether or not notes can be updated. */ canUpdateNote: boolean; } ``` ### CartLine * attributes The line item additional custom attributes. ```ts Attribute[] ``` * cost The details about the cost components attributed to the cart line. ```ts CartLineCost ``` * discountAllocations Discounts applied to the cart line. ```ts CartDiscountAllocation[] ``` * id These line item IDs are not stable at the moment, they might change after any operations on the line items. You should always look up for an updated ID before any call to \`applyCartLinesChange\` because you'll need the ID to create a \`CartLineChange\` object. ```ts string ``` * lineComponents Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. ```ts CartBundleLineComponent[] ``` * merchandise The merchandise being purchased. ```ts Merchandise ``` * quantity The quantity of the merchandise being purchased. ```ts number ``` ```ts export interface CartLine { /** * These line item IDs are not stable at the moment, they might change after * any operations on the line items. You should always look up for an updated * ID before any call to `applyCartLinesChange` because you'll need the ID to * create a `CartLineChange` object. * @example 'gid://shopify/CartLine/123' */ id: string; /** * The merchandise being purchased. */ merchandise: Merchandise; /** * The quantity of the merchandise being purchased. */ quantity: number; /** * The details about the cost components attributed to the cart line. */ cost: CartLineCost; /** * The line item additional custom attributes. */ attributes: Attribute[]; /** * Discounts applied to the cart line. */ discountAllocations: CartDiscountAllocation[]; /** * Sub lines of the merchandise line. If no sub lines are present, this will be an empty array. */ lineComponents: CartLineComponentType[]; } ``` ### CartLineCost * totalAmount The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line. ```ts Money ``` ```ts export interface CartLineCost { /** * The total amount after reductions the buyer can expect to pay that is directly attributable to a single * cart line. */ totalAmount: Money; } ``` ### CartBundleLineComponent * attributes Additional custom attributes for the bundle line component. ```ts Attribute[] ``` * cost The cost attributed to this bundle line component. ```ts CartLineCost ``` * id A unique identifier for the bundle line component. This ID is not stable. If an operation updates the line items in any way, all IDs could change. ```ts string ``` * merchandise The merchandise of this bundle line component. ```ts Merchandise ``` * quantity The quantity of merchandise being purchased. ```ts number ``` * type ```ts "bundle" ``` ```ts export interface CartBundleLineComponent { type: 'bundle'; /** * A unique identifier for the bundle line component. * * This ID is not stable. If an operation updates the line items in any way, all IDs could change. * * @example 'gid://shopify/CartLineComponent/123' */ id: string; /** * The merchandise of this bundle line component. */ merchandise: Merchandise; /** * The quantity of merchandise being purchased. */ quantity: number; /** * The cost attributed to this bundle line component. */ cost: CartLineCost; /** * Additional custom attributes for the bundle line component. * * @example [{key: 'engraving', value: 'hello world'}] */ attributes: Attribute[]; } ``` ### Merchandise * id A globally-unique identifier. ```ts string ``` * image Image associated with the product variant. This field falls back to the product image if no image is available. ```ts ImageDetails ``` * product The product object that the product variant belongs to. ```ts Product ``` * requiresShipping Whether or not the product requires shipping. ```ts boolean ``` * selectedOptions List of product options applied to the variant. ```ts SelectedOption[] ``` * sellingPlan The selling plan associated with the merchandise. ```ts SellingPlan ``` * sku The product variant's sku. ```ts string ``` * subtitle The product variant's subtitle. ```ts string ``` * title The product variant’s title. ```ts string ``` * type ```ts "variant" ``` ```ts ProductVariant ``` ### Product * id A globally-unique identifier. ```ts string ``` * productType A categorization that a product can be tagged with, commonly used for filtering and searching. ```ts string ``` * vendor The product’s vendor name. ```ts string ``` ```ts export interface Product { /** * A globally-unique identifier. */ id: string; /** * The product’s vendor name. */ vendor: string; /** * A categorization that a product can be tagged with, commonly used for filtering and searching. */ productType: string; } ``` ### SelectedOption * name The name of the merchandise option. ```ts string ``` * value The value of the merchandise option. ```ts string ``` ```ts export interface SelectedOption { /** * The name of the merchandise option. */ name: string; /** * The value of the merchandise option. */ value: string; } ``` ### SellingPlan * id A globally-unique identifier. ```ts string ``` * recurringDeliveries Whether purchasing the selling plan will result in multiple deliveries. ```ts boolean ``` ```ts export interface SellingPlan { /** * A globally-unique identifier. * @example 'gid://shopify/SellingPlan/1' */ id: string; /** * Whether purchasing the selling plan will result in multiple deliveries. */ recurringDeliveries: boolean; } ``` ### Localization * country The country context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. If the country is unknown, then the value is undefined. ```ts StatefulRemoteSubscribable ``` * currency The currency that the customer sees for money amounts in the checkout. ```ts StatefulRemoteSubscribable ``` * extensionLanguage This is the customer's language, as supported by the extension. If the customer's actual language is not supported by the extension, then this is the language that is used for translations. For example, if the customer's language is 'fr-CA' but your extension only supports translations for 'fr', then the \`isoCode\` for this language is 'fr'. If your extension does not provide french translations at all, then this value is the default locale for your extension (that is, the one matching your .default.json file). ```ts StatefulRemoteSubscribable ``` * language The language the customer sees in the checkout. ```ts StatefulRemoteSubscribable ``` * market The \[market]\(/docs/apps/markets) context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. If the market is unknown, then the value is undefined. ```ts StatefulRemoteSubscribable ``` * timezone The buyer’s time zone. ```ts StatefulRemoteSubscribable ``` ```ts export interface Localization { /** * The currency that the customer sees for money amounts in the checkout. */ currency: StatefulRemoteSubscribable; /** * The buyer’s time zone. */ timezone: StatefulRemoteSubscribable; /** * The language the customer sees in the checkout. */ language: StatefulRemoteSubscribable; /** * This is the customer's language, as supported by the extension. * If the customer's actual language is not supported by the extension, * then this is the language that is used for translations. * * For example, if the customer's language is 'fr-CA' but your extension * only supports translations for 'fr', then the `isoCode` for this * language is 'fr'. If your extension does not provide french * translations at all, then this value is the default locale for your * extension (that is, the one matching your .default.json file). */ extensionLanguage: StatefulRemoteSubscribable; /** * The country context of the checkout. This value carries over from the * context of the cart, where it was used to contextualize the storefront * experience. It will update if the buyer changes the country of their * shipping address. If the country is unknown, then the value is undefined. */ country: StatefulRemoteSubscribable; /** * The [market](/docs/apps/markets) context of the * checkout. This value carries over from the context of the cart, where it * was used to contextualize the storefront experience. It will update if the * buyer changes the country of their shipping address. If the market is unknown, * then the value is undefined. */ market: StatefulRemoteSubscribable; } ``` ### Country * isoCode The ISO-3166-1 code for this country. ```ts CountryCode ``` ```ts export interface Country { /** * The ISO-3166-1 code for this country. * @see https://www.iso.org/iso-3166-country-codes.html */ isoCode: CountryCode; } ``` ### Currency * isoCode The ISO-4217 code for this currency. ```ts CurrencyCode ``` ```ts export interface Currency { /** * The ISO-4217 code for this currency. * @see https://www.iso.org/iso-4217-currency-codes.html */ isoCode: CurrencyCode; } ``` ### Language * isoCode The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code. ```ts string ``` ```ts export interface Language { /** * The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code. * * @example 'en' for English, or 'en-US' for English local to United States. * @see https://en.wikipedia.org/wiki/IETF_language_tag * @see https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 */ isoCode: string; } ``` ### Market * handle The human-readable, shop-scoped identifier for the market. ```ts string ``` * id A globally-unique identifier for a market. ```ts string ``` ```ts export interface Market { /** * A globally-unique identifier for a market. */ id: string; /** * The human-readable, shop-scoped identifier for the market. */ handle: 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 ```ts LocalizedFieldKey ``` * title ```ts string ``` * value ```ts string ``` ```ts export interface LocalizedField { key: LocalizedFieldKey; title: string; value: 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 Union of supported storefront API versions ```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 GraphQL error returned by the Shopify Storefront APIs. * extensions ```ts { requestId: string; code: string; } ``` * message ```ts string ``` ```ts export interface GraphQLError { message: string; extensions: { requestId: string; code: string; }; } ``` ### SelectedPaymentOption * handle The unique handle for the payment option. This is not a globally unique identifier. It may be an identifier specific to the given checkout session or the current shop. ```ts string ``` * type The type of the payment option. Shops can be configured to support many different payment options. Some options are only available 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 that will be 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, Apple Pay, etc. | | \`customOnsite\` | A custom payment option that is processed through a checkout extension with a payments app. | ```ts | 'creditCard' | 'deferred' | 'local' | 'manualPayment' | 'offsite' | 'other' | 'paymentOnDelivery' | 'redeemable' | 'wallet' | 'customOnsite' ``` ```ts PaymentOption ``` ### SessionToken * 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 will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself. ```ts () => Promise ``` ```ts export interface SessionToken { /** * 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 will return cached tokens when possible, so you don’t need to worry * about storing these tokens yourself. */ get(): Promise; } ``` ### ExtensionSettings The merchant-defined setting values for the extension. ```ts Record< string, string | number | boolean | undefined > ``` ### ShippingAddress * address1 The first line of the buyer's address, including street name and number. {% 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, like apartment number, suite, etc. {% 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 buyer's city. {% 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. {% 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 ISO 3166 Alpha-2 format for the buyer's country. Refer to https://www\.iso.org/iso-3166-country-codes.html. {% 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. {% 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. {% 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. {% 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 Specifies whether the address should be saved to the buyer's account. ```ts boolean ``` * phone The buyer's phone number. {% 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 buyer's province code, such as state, province, prefecture, or region. {% 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 buyer's postal or ZIP code. {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to \[protected customer data]\(/docs/apps/store/data-protection/protected-customer-data). ```ts string ``` ```ts export interface ShippingAddress extends MailingAddress { /** * Specifies whether the address should be saved to the buyer's account. */ oneTimeUse?: boolean; } ``` ### Shop * id The shop ID. ```ts string ``` * myshopifyDomain The shop's myshopify.com domain. ```ts string ``` * name The name of the shop. ```ts string ``` * storefrontUrl The primary storefront URL. > Caution: > As of version \`2024-04\` this value will no longer have a trailing slash. ```ts string ``` ```ts export interface Shop { /** * The shop ID. * @example 'gid://shopify/Shop/123' */ id: string; /** * The name of the shop. */ name: string; /** * The primary storefront URL. * * > Caution: * > As of version `2024-04` this value will no longer have a trailing slash. */ storefrontUrl?: string; /** * The shop's myshopify.com domain. */ myshopifyDomain: string; } ``` ### Storage A key-value storage object for the extension. Stored data is only available to this specific extension and any of its instances. The storage backend is implemented with \`localStorage\` and should persist across the buyer's checkout session. However, data persistence isn't guaranteed. * delete Delete stored data 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 primitive. 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 ``` ```ts export interface Storage { /** * Read and return a stored value by key. * * The stored data is deserialized from JSON and returned as * its original primitive. * * Returns `null` if no stored data exists. */ read(key: string): Promise; /** * Write stored data for this key. * * The data must be serializable to JSON. */ write(key: string, data: any): Promise; /** * Delete stored data by key. */ delete(key: string): Promise; } ``` ### Ui * overlay Allows the extension to close an overlay programmatically. Supported overlay components are \[Modal]\(/docs/api/checkout-ui-extensions/2025-07/components/overlays/modal), \[Sheet]\(/docs/api/checkout-ui-extensions/2025-07/components/overlays/sheet) and \[Popover]\(/docs/api/checkout-ui-extensions/2025-07/components/overlays/popover). ```ts Overlay ``` ```ts export interface Ui { /** * Allows the extension to close an overlay programmatically. * * Supported overlay components are [Modal](/docs/api/checkout-ui-extensions/2025-07/components/overlays/modal), [Sheet](/docs/api/checkout-ui-extensions/2025-07/components/overlays/sheet) and [Popover](/docs/api/checkout-ui-extensions/2025-07/components/overlays/popover). */ overlay: Overlay; } ``` ### Overlay * close Closes the overlay with the given ID. ```ts (overlayId: string) => void ``` ```ts interface Overlay { /** * Closes the overlay with the given ID. */ close(overlayId: string): void; } ``` ### Version ```ts string ``` ### Examples * #### purchase.thank-you.block.render ##### React ```jsx import { BlockStack, reactExtension, Text, useApi, } from '@shopify/ui-extensions-react/checkout'; // 1. Choose an extension target export default reactExtension( 'purchase.thank-you.block.render', () => , ); function Extension() { // 2. Use the extension API to gather context from the checkout and shop const {cost, shop} = useApi(); // 3. Render a UI return ( Shop name: {shop.name} cost: {cost.totalAmount} ); } ``` ##### JavaScript ```js import { BlockStack, Text, extension, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.thank-you.block.render', (root, {shop, cost}) => { root.appendChild( root.createComponent( BlockStack, undefined, [ root.createComponent( Text, undefined, `Shop name: ${shop.name}`, ), root.createComponent( Text, undefined, `Cost: ${cost.totalAmount}`, ), ], ), ); }, ); ``` ## 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)