customer-account. order-status. cart-line-list. render-afterTarget
A static extension target that renders after all line items on the Order Status page.
Use the or
surfaces when targeting order status targets. Importing from the
checkout
surface is deprecated as of version 2023-10
.
Anchor to orderstatusapiOrderStatusApi
The API object provided to this and other customer-account.order-status
extension targets.
- Anchor to appliedGiftCardsappliedGiftCardsStatefulRemoteSubscribable<[]>required
Gift Cards that have been applied to the order.
- Anchor to appMetafieldsappMetafieldsStatefulRemoteSubscribable<[]>required
The metafields requested in the
shopify.ui.extension.toml
file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.Requires access to protected customer data.
- Anchor to attributesattributesStatefulRemoteSubscribable<[] | undefined>required
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
- Anchor to authenticationStateauthenticationStateStatefulRemoteSubscribable<>required
The authentication state of Order status page.
- Anchor to checkoutSettingscheckoutSettingsStatefulRemoteSubscribable<>required
Settings applied to the buyer's checkout.
- Anchor to checkoutTokencheckoutTokenStatefulRemoteSubscribable< | undefined>required
id that represents the checkout used to create the order.
Matches the
token
field in the WebPixel checkout payload and thefield in the Admin REST API Order resource.
- Anchor to costcostrequired
Details on the costs of the purchase for the buyer.
- Anchor to discountAllocationsdiscountAllocationsStatefulRemoteSubscribable<[]>required
Discounts that have been applied to the entire cart.
- Anchor to discountCodesdiscountCodesStatefulRemoteSubscribable<[]>required
A list of discount codes applied to the purchase.
- Anchor to extensionextension<Target>required
Meta information about the extension.
- Anchor to lineslinesStatefulRemoteSubscribable<[]>required
A list of lines containing information about the items the customer intends to purchase.
- Anchor to localizationlocalizationrequired
Details about the location, language, and currency of the buyer. For utilities to easily format and translate content based on these details, you can use the
i18n
object instead.- Anchor to metafieldsmetafieldsStatefulRemoteSubscribable<[]>required
The metafields that apply to the current order. The actual resource on which these metafields exist depends on the source of the order:
If the source is an order, then the metafields are on the order.
If the source is a draft order, then the initial value of metafields are from the draft order, and any new metafields you write are applied to the order created by the checkout.
For all other sources, the metafields are only stored locally on the client creating the checkout, and are applied to the order that results from checkout.
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
- Anchor to notenoteStatefulRemoteSubscribable<string | undefined>required
A note left by the customer to the merchant, either in their cart or during checkout.
- Anchor to orderorderStatefulRemoteSubscribable< | undefined>required
Information about the order that was placed.
- Anchor to requireLoginrequireLogin() => Promise<void>required
The requireLogin() method triggers login if the customer is viewing pre-authenticated Order status page.
- Anchor to shopshoprequired
Shop where the purchase took place.
- Anchor to versionversionrequired
The renderer version being used for the extension.
- Anchor to billingAddressbillingAddressStatefulRemoteSubscribable< | undefined>
The buyer billing address used for the order.
Requires access to protected customer data.
- Anchor to buyerIdentitybuyerIdentity
Information about the buyer that is interacting with the order.
Requires access to protected customer data.
- Anchor to shippingAddressshippingAddressStatefulRemoteSubscribable< | undefined>
The buyer shipping address used for the order.
Requires access to protected customer data.
- Anchor to extensionPointextensionPointTargetrequired
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.
DeprecatedDeprecated as of version
2023-07
, useextension.target
instead.
OrderStatusApi
- appliedGiftCards
Gift Cards that have been applied to the order.
StatefulRemoteSubscribable<AppliedGiftCard[]>
- appMetafields
The metafields requested in the [`shopify.ui.extension.toml`](/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. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
StatefulRemoteSubscribable<AppMetafieldEntry[]>
- attributes
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
StatefulRemoteSubscribable<Attribute[] | undefined>
- authenticationState
The authentication state of Order status page.
StatefulRemoteSubscribable<AuthenticationState>
- billingAddress
The buyer billing address used for the order. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
StatefulRemoteSubscribable<MailingAddress | undefined>
- buyerIdentity
Information about the buyer that is interacting with the order. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
OrderStatusBuyerIdentity
- checkoutSettings
Settings applied to the buyer's checkout.
StatefulRemoteSubscribable<CheckoutSettings>
- checkoutToken
id that represents the checkout used to create the order. Matches the `token` field in the [WebPixel checkout payload](/docs/api/pixels/customer-events#checkout) and the `checkout_token` field in the [Admin REST API Order resource](/docs/api/admin-rest/unstable/resources/order#resource-object).
StatefulRemoteSubscribable<CheckoutToken | undefined>
- cost
Details on the costs of the purchase for the buyer.
CartCost
- discountAllocations
Discounts that have been applied to the entire cart.
StatefulRemoteSubscribable<CartDiscountAllocation[]>
- discountCodes
A list of discount codes applied to the purchase.
StatefulRemoteSubscribable<CartDiscountCode[]>
- extension
Meta information about the extension.
Extension<Target>
- extensionPoint
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.
Target
- lines
A list of lines containing information about the items the customer intends to purchase.
StatefulRemoteSubscribable<CartLine[]>
- localization
Details about the location, language, and currency of the buyer. For utilities to easily format and translate content based on these details, you can use the [`i18n`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-i18n) object instead.
OrderStatusLocalization
- metafields
The metafields that apply to the current order. The actual resource on which these metafields exist depends on the source of the order: - If the source is an order, then the metafields are on the order. - If the source is a draft order, then the initial value of metafields are from the draft order, and any new metafields you write are applied to the order created by the checkout. - For all other sources, the metafields are only stored locally on the client creating the checkout, and are applied to the order that results from checkout. 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](/docs/admin-api/graphql/reference/orders/order#metafield-2021-01)
StatefulRemoteSubscribable<Metafield[]>
- note
A note left by the customer to the merchant, either in their cart or during checkout.
StatefulRemoteSubscribable<string | undefined>
- order
Information about the order that was placed.
StatefulRemoteSubscribable<Order | undefined>
- requireLogin
The requireLogin() method triggers login if the customer is viewing pre-authenticated Order status page.
() => Promise<void>
- shippingAddress
The buyer shipping address used for the order. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
StatefulRemoteSubscribable<MailingAddress | undefined>
- shop
Shop where the purchase took place.
Shop
- version
The renderer version being used for the extension.
Version
export interface OrderStatusApi<Target extends ExtensionTarget> {
/**
* Gift Cards that have been applied to the order.
*/
appliedGiftCards: StatefulRemoteSubscribable<AppliedGiftCard[]>;
/**
* The metafields requested in the
* [`shopify.ui.extension.toml`](/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.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
*/
appMetafields: StatefulRemoteSubscribable<AppMetafieldEntry[]>;
/**
* Custom attributes left by the customer to the merchant, either in their cart or during checkout.
*/
attributes: StatefulRemoteSubscribable<Attribute[] | undefined>;
/**
* Information about the buyer that is interacting with the order.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
*/
buyerIdentity?: OrderStatusBuyerIdentity;
/**
* Settings applied to the buyer's checkout.
*/
checkoutSettings: StatefulRemoteSubscribable<CheckoutSettings>;
/**
* Details on the costs of the purchase for the buyer.
*/
cost: CartCost;
/**
* A list of discount codes applied to the purchase.
*/
discountCodes: StatefulRemoteSubscribable<CartDiscountCode[]>;
/**
* Discounts that have been applied to the entire cart.
*/
discountAllocations: StatefulRemoteSubscribable<CartDiscountAllocation[]>;
/**
* Meta information about the extension.
*/
extension: Extension<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.
*
* @example 'customer-account.order-status.block.render'
* @see /docs/api/checkout-ui-extensions/unstable/extension-targets-overview
* @see /docs/apps/app-extensions/configuration#targets
*
* @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.
*/
extensionPoint: Target;
/**
* A list of lines containing information about the items the customer intends to purchase.
*/
lines: StatefulRemoteSubscribable<CartLine[]>;
/**
* Details about the location, language, and currency of the buyer. For utilities to easily
* format and translate content based on these details, you can use the
* [`i18n`](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-i18n)
* object instead.
*/
localization: OrderStatusLocalization;
/**
* The metafields that apply to the current order. The actual resource
* on which these metafields exist depends on the source of the order:
*
* - If the source is an order, then the metafields are on the order.
*
* - If the source is a draft order, then the initial value of metafields are
* from the draft order, and any new metafields you write are applied
* to the order created by the checkout.
*
* - For all other sources, the metafields are only stored locally on the
* client creating the checkout, and are applied to the order that
* results from checkout.
*
* 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](/docs/admin-api/graphql/reference/orders/order#metafield-2021-01)
*/
metafields: StatefulRemoteSubscribable<Metafield[]>;
/**
* A note left by the customer to the merchant, either in their cart or during checkout.
*/
note: StatefulRemoteSubscribable<string | undefined>;
/**
* Information about the order that was placed.
*/
order: StatefulRemoteSubscribable<Order | undefined>;
/**
* id that represents the checkout used to create the order.
*
* Matches the `token` field in the [WebPixel checkout payload](/docs/api/pixels/customer-events#checkout)
* and the `checkout_token` field in the [Admin REST API Order resource](/docs/api/admin-rest/unstable/resources/order#resource-object).
*/
checkoutToken: StatefulRemoteSubscribable<CheckoutToken | undefined>;
/**
* The buyer shipping address used for the order.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
*/
shippingAddress?: StatefulRemoteSubscribable<MailingAddress | undefined>;
/**
* The buyer billing address used for the order.
*
* {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
*/
billingAddress?: StatefulRemoteSubscribable<MailingAddress | undefined>;
/** Shop where the purchase took place. */
shop: Shop;
/**
* The renderer version being used for the extension.
*
* @example 'unstable'
*/
version: Version;
/**
* The requireLogin() method triggers login if the customer is viewing pre-authenticated Order status page.
*/
requireLogin: () => Promise<void>;
/**
* The authentication state of Order status page.
*/
authenticationState: StatefulRemoteSubscribable<AuthenticationState>;
}
AppliedGiftCard
- amountUsed
The amount of the applied gift card that will be used when the checkout is completed.
Money
- balance
The current balance of the applied gift card prior to checkout completion.
Money
- lastCharacters
The last four characters of the applied gift card's code.
string
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.
number
- currencyCode
The ISO 4217 format for the currency.
CurrencyCode
export interface Money {
/**
* The price amount.
*/
amount: number;
/**
* The ISO 4217 format for the currency.
* @example 'CAD' for Canadian dollar
*/
currencyCode: CurrencyCode;
}
CurrencyCode
'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'
AppMetafieldEntry
A metafield associated with the shop or a resource on the checkout.
- metafield
The metadata information.
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`.
AppMetafieldEntryTarget
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.
string
- namespace
The namespace for a metafield.
string
- type
The metafield's type name.
string
- value
The value of a metafield.
string | number | boolean
- valueType
The metafield’s information type.
'boolean' | 'float' | 'integer' | 'json_string' | 'string'
export interface AppMetafield {
/** The key name of a metafield. */
key: string;
/** The namespace for a metafield. */
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.
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`.
| 'customer' | 'product' | 'shop' | 'variant' | 'company' | 'companyLocation' | 'cart'
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'
| 'variant'
| 'company'
| 'companyLocation'
| 'cart';
/** The numeric owner ID that is associated with the metafield. */
id: string;
}
Attribute
- key
The key for the attribute.
string
- value
The value for the attribute.
string
export interface Attribute {
/**
* The key for the attribute.
*/
key: string;
/**
* The value for the attribute.
*/
value: string;
}
AuthenticationState
'fully_authenticated' | 'pre_authenticated'
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
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).
string
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
'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'
OrderStatusBuyerIdentity
- 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).
StatefulRemoteSubscribable<OrderStatusCustomer | undefined>
- 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).
StatefulRemoteSubscribable<string | undefined>
- 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).
StatefulRemoteSubscribable<string | undefined>
- 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).
StatefulRemoteSubscribable< OrderStatusPurchasingCompany | undefined >
export interface OrderStatusBuyerIdentity {
/**
* 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<OrderStatusCustomer | undefined>;
/**
* 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<string | undefined>;
/**
* 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<string | undefined>;
/**
* 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<
OrderStatusPurchasingCompany | undefined
>;
}
OrderStatusCustomer
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).
- acceptsMarketing
Defines if the customer 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).
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).
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).
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).
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).
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).
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).
string
- 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).
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).
StoreCreditAccount[]
export interface OrderStatusCustomer {
/**
* 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 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).
*/
acceptsMarketing: 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[];
}
ImageDetails
- altText
The alternative text for the image.
string
- url
The image URL.
string
export interface ImageDetails {
/**
* The image URL.
*/
url: string;
/**
* The alternative text for the image.
*/
altText?: string;
}
StoreCreditAccount
Information about a Store Credit Account.
- balance
The current balance of the Store Credit Account.
Money
- id
A globally-unique identifier.
string
export interface StoreCreditAccount {
/**
* A globally-unique identifier.
* @example 'gid://shopify/StoreCreditAccount/1'
*/
id: string;
/**
* The current balance of the Store Credit Account.
*/
balance: Money;
}
OrderStatusPurchasingCompany
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).
OrderStatusCompany
- 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).
OrderStatusCompanyLocation
export interface OrderStatusPurchasingCompany {
/**
* 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: OrderStatusCompany;
/**
* 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: OrderStatusCompanyLocation;
}
OrderStatusCompany
- 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).
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).
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).
string
export interface OrderStatusCompany {
/**
* 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;
}
OrderStatusCompanyLocation
- 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).
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).
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).
string
export interface OrderStatusCompanyLocation {
/**
* 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;
}
CheckoutSettings
Settings describing the behavior of the buyer's checkout.
- orderSubmission
The type of order that will be created once the buyer completes checkout.
'DRAFT_ORDER' | 'ORDER'
- paymentTermsTemplate
Represents the merchant configured payment terms.
PaymentTermsTemplate
- shippingAddress
Settings describing the behavior of the shipping address.
ShippingAddressSettings
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`.
string
- dueInDays
The number of days between the issued date and due date if using net payment terms.
number
- id
A globally-unique ID.
string
- name
The name of the payment terms translated to the buyer's current language. See [localization.language](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization).
string
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. See [localization.language](/docs/api/checkout-ui-extensions/apis/standardapi#properties-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.
boolean
export interface ShippingAddressSettings {
/**
* Describes whether the buyer can ship to any address during checkout.
*/
isEditable: boolean;
}
CheckoutToken
string
CartCost
- subtotalAmount
A `Money` value representing the subtotal value of the items in the cart at the current step of checkout.
StatefulRemoteSubscribable<Money>
- 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.
StatefulRemoteSubscribable<Money>
- 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.
StatefulRemoteSubscribable<Money | undefined>
- 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.
StatefulRemoteSubscribable<Money | undefined>
export interface CartCost {
/**
* A `Money` value representing the subtotal value of the items in the cart at the current
* step of checkout.
*/
subtotalAmount: StatefulRemoteSubscribable<Money>;
/**
* 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<Money | undefined>;
/**
* 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<Money | undefined>;
/**
* 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<Money>;
}
CartDiscountAllocation
CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation
CartCodeDiscountAllocation
- code
The code for the discount
string
- discountedAmount
The money amount that has been discounted from the order
Money
- type
The type of the code discount
"code"
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
Money
- title
The title of the automatic discount
string
- type
The type of the automatic discount
"automatic"
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
Money
- title
The title of the custom discount
string
- type
The type of the custom discount
"custom"
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
string
export interface CartDiscountCode {
/**
* The code for the discount
*/
code: string;
}
Extension
Meta information about an extension target.
- apiVersion
The API version that was set in the extension config file.
ApiVersion
- capabilities
The allowed capabilities of the extension, defined in your [shopify.ui.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 buyer's progress and the merchant has allowed this blocking behavior.
StatefulRemoteSubscribable<Capability[]>
- editor
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
Editor
- rendered
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 buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
StatefulRemoteSubscribable<boolean>
- scriptUrl
The URL to the script that started the extension target.
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.
Target
- version
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
string
export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* The allowed capabilities of the extension, defined
* in your [shopify.ui.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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable<Capability[]>;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable<boolean>;
/**
* 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 'customer-account.order-status.block.render'
* @see /docs/api/checkout-ui-extensions/unstable/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
'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.
'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.
"checkout"
export interface Editor {
/**
* Indicates whether the extension is rendering in the checkout editor.
*/
type: 'checkout';
}
CartLine
- attributes
The line item additional custom attributes.
Attribute[]
- cost
The details about the cost components attributed to the cart line.
CartLineCost
- discountAllocations
Discounts applied to the cart line.
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.
string
- lineComponents
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
CartBundleLineComponent[]
- merchandise
The merchandise being purchased.
Merchandise
- quantity
The quantity of the merchandise being purchased.
number
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.
Money
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.
Attribute[]
- cost
The cost attributed to this bundle line component.
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.
string
- merchandise
The merchandise of this bundle line component.
Merchandise
- quantity
The quantity of merchandise being purchased.
number
- type
"bundle"
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.
string
- image
Image associated with the product variant. This field falls back to the product image if no image is available.
ImageDetails
- product
The product object that the product variant belongs to.
Product
- requiresShipping
Whether or not the product requires shipping.
boolean
- selectedOptions
List of product options applied to the variant.
SelectedOption[]
- sellingPlan
The selling plan associated with the merchandise.
SellingPlan
- sku
The product variant's sku.
string
- subtitle
The product variant's subtitle.
string
- title
The product variant’s title.
string
- type
"variant"
ProductVariant
Product
- id
A globally-unique identifier.
string
- productType
A categorization that a product can be tagged with, commonly used for filtering and searching.
string
- vendor
The product’s vendor name.
string
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.
string
- value
The value of the merchandise option.
string
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.
string
- recurringDeliveries
Whether purchasing the selling plan will result in multiple deliveries.
boolean
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;
}
OrderStatusLocalization
- 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. The value is undefined if unknown.
StatefulRemoteSubscribable<Country | undefined>
- currency
The currency that the buyer sees for money amounts in the checkout.
StatefulRemoteSubscribable<Currency>
- extensionLanguage
This is the buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, this is the fallback locale used for translations. For example, if the buyer's language is 'fr-CA' but your extension only supports translations for 'fr', then the `isoCode` for this language is 'fr'. If your extension does not provide french translations at all, this value is the default locale for your extension (that is, the one matching your .default.json file).
StatefulRemoteSubscribable<Language>
- language
The language the buyer sees in the checkout.
StatefulRemoteSubscribable<Language>
- 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. The value is undefined if unknown.
StatefulRemoteSubscribable<Market | undefined>
- timezone
The buyer’s time zone.
StatefulRemoteSubscribable<Timezone>
export interface OrderStatusLocalization {
/**
* The currency that the buyer sees for money amounts in the checkout.
*/
currency: StatefulRemoteSubscribable<Currency>;
/**
* The buyer’s time zone.
*/
timezone: StatefulRemoteSubscribable<Timezone>;
/**
* The language the buyer sees in the checkout.
*/
language: StatefulRemoteSubscribable<Language>;
/**
* This is the buyer's language, as supported by the extension.
* If the buyer's actual language is not supported by the extension,
* this is the fallback locale used for translations.
*
* For example, if the buyer's language is 'fr-CA' but your extension
* only supports translations for 'fr', then the `isoCode` for this
* language is 'fr'. If your extension does not provide french
* translations at all, this value is the default locale for your
* extension (that is, the one matching your .default.json file).
*/
extensionLanguage: StatefulRemoteSubscribable<Language>;
/**
* 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. The value is undefined if unknown.
*/
country: StatefulRemoteSubscribable<Country | undefined>;
/**
* 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. The value is undefined
* if unknown.
*/
market: StatefulRemoteSubscribable<Market | undefined>;
}
Country
- isoCode
The ISO-3166-1 code for this country.
CountryCode
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.
CurrencyCode
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.
string
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.
string
- id
A globally-unique identifier for a market.
string
export interface Market {
/**
* A globally-unique identifier for a market.
*/
id: string;
/**
* The human-readable, shop-scoped identifier for the market.
*/
handle: string;
}
Timezone
'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'
Metafield
Metadata associated with the checkout.
- key
The name of the metafield. It must be between 3 and 30 characters in length (inclusive).
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).
string
- value
The information to be stored as metadata.
string | number
- valueType
The metafield’s information type.
'integer' | 'string' | 'json_string'
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';
}
Order
Information about an order that was placed.
- cancelledAt
If cancelled, the time at which the order was cancelled.
string
- confirmationNumber
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.
string
- id
A globally-unique identifier.
string
- name
Unique identifier for the order that appears on the order.
string
- processedAt
The date and time when the order was processed. Processing happens after the checkout has completed, and indicates that the order is available in the admin.
string
export interface Order {
/**
* A globally-unique identifier.
* @example 'gid://shopify/Order/1'
*/
id: string;
/**
* Unique identifier for the order that appears on the order.
* @example '#1000'
*/
name: string;
/**
* If cancelled, the time at which the order was cancelled.
*/
cancelledAt?: string;
/**
* The date and time when the order was processed.
* Processing happens after the checkout has completed, and indicates that the order is available in the admin.
*/
processedAt?: 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.
*/
confirmationNumber?: string;
}
Shop
- id
The shop ID.
string
- myshopifyDomain
The shop's myshopify.com domain.
string
- name
The name of the shop.
string
- storefrontUrl
The primary storefront URL. > Caution: As of version `2024-10` this value will no longer have a trailing slash.
string
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-10` this value will no longer have a trailing slash.
*/
storefrontUrl?: string;
/**
* The shop's myshopify.com domain.
*/
myshopifyDomain: string;
}
Version
string
Anchor to standardapiStandardApi
The base API object provided to this and other customer-account
extension targets.
- Anchor to analyticsanalyticsrequired
Methods for interacting with Web Pixels, such as emitting an event.
NoteRequires to connect a third-party domain to Shopify for your customer account pages.
- Anchor to applyTrackingConsentChangeapplyTrackingConsentChangerequired
Allows setting and updating customer privacy consent settings and tracking consent metafields.
NoteRequires the
capability to be set to
true
.Requires access to protected customer data.
- Anchor to authenticatedAccountauthenticatedAccountrequired
Information about the authenticated account.
- Anchor to customerPrivacycustomerPrivacyStatefulRemoteSubscribable<>required
Customer privacy consent settings and a flag denoting if consent has previously been collected.
- Anchor to extensionextensionrequired
Meta information about the extension.
- Anchor to i18ni18nrequired
Utilities for translating content and formatting values according to the current
localization
of the user.- Anchor to localizationlocalizationrequired
Details about the language of the buyer.
- required
- Anchor to queryquery<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }>required
Used to query the Storefront GraphQL API with a prefetched token.
See storefront api access examples for more information.
- Anchor to sessionTokensessionTokenrequired
Provides access to session tokens, which can be used to verify token claims on your app's server.
See session token examples for more information.
- Anchor to settingssettingsStatefulRemoteSubscribable<>required
The settings matching the settings definition written in the
shopify.ui.extension.toml
file.See settings examples for more information.
NoteWhen 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.
- Anchor to storagestoragerequired
Key-value storage for the extension target.
- required
Methods to interact with the extension's UI.
- Anchor to versionversionVersionrequired
The renderer version being used for the extension.
- Anchor to extensionPointextensionPointTargetrequired
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.
DeprecatedDeprecated as of version
2023-07
, useextension.target
instead.
Docs_StandardApi
- analytics
Methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event. > Note: Requires to [connect a third-party domain](https://help.shopify.com/en/manual/domains/add-a-domain/connecting-domains/connect-domain-customer-account) to Shopify for your customer account pages.
Analytics
- applyTrackingConsentChange
Allows setting and updating customer privacy consent settings and tracking consent metafields. > Note: Requires the [`customer_privacy` capability](/docs/api/checkout-ui-extensions/unstable/configuration#collect-buyer-consent) to be set to `true`. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
ApplyTrackingConsentChangeType
- authenticatedAccount
Information about the authenticated account.
AuthenticatedAccount
- customerPrivacy
Customer privacy consent settings and a flag denoting if consent has previously been collected.
StatefulRemoteSubscribable<CustomerPrivacy>
- extension
Meta information about the extension.
Extension
- extensionPoint
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.
Target
- i18n
Utilities for translating content and formatting values according to the current `localization` of the user.
I18n
- localization
Details about the language of the buyer.
Localization
- navigation
StandardExtensionNavigation
- query
Used to query the Storefront GraphQL API with a prefetched token. See [storefront api access examples](/docs/api/customer-account-ui-extensions/apis/storefront-api#examples) for more information.
<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>
- sessionToken
Provides access to session tokens, which can be used to verify token claims on your app's server. See [session token examples](/docs/api/customer-account-ui-extensions/apis/session-token#examples) for more information.
SessionToken
- settings
The settings matching the settings definition written in the [`shopify.ui.extension.toml`](/docs/api/customer-account-ui-extensions/configuration) file. See [settings examples](/docs/api/customer-account-ui-extensions/apis/order-status-api/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.
StatefulRemoteSubscribable<ExtensionSettings>
- storage
Key-value storage for the extension target.
Storage
- ui
Methods to interact with the extension's UI.
Ui
- version
The renderer version being used for the extension.
Version
export interface Docs_StandardApi extends Omit<StandardApi<any>, 'router'> {}
Analytics
- publish
Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
(name: string, data: Record<string, unknown>) => Promise<boolean>
- visitor
A method for capturing details about a visitor on the online store.
(data: { email?: string; phone?: string; }) => Promise<VisitorResult>
export interface Analytics {
/**
* Publish method to emit analytics events to [Web Pixels](/docs/apps/marketing).
*/
publish(name: string, data: Record<string, unknown>): Promise<boolean>;
/**
* A method for capturing details about a visitor on the online store.
*/
visitor(data: {email?: string; phone?: string}): Promise<VisitorResult>;
}
VisitorResult
Represents a visitor result.
VisitorSuccess | VisitorError
VisitorSuccess
Represents a successful visitor result.
- type
Indicates that the visitor information was validated and submitted.
"success"
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.
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.
"error"
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;
}
ApplyTrackingConsentChangeType
- visitorConsent
VisitorConsentChange
Promise<TrackingConsentChangeResult>
export type ApplyTrackingConsentChangeType = (
visitorConsent: VisitorConsentChange,
) => Promise<TrackingConsentChangeResult>;
VisitorConsentChange
- analytics
Visitor consents to recording data to understand how customers interact with the site.
boolean
- marketing
Visitor consents to ads and marketing communications based on customer interests.
boolean
- metafields
Tracking consent metafield data to be saved. If the value is `null`, the metafield will be deleted.
TrackingConsentMetafieldChange[]
- preferences
Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website.
boolean
- saleOfData
Opts the visitor out of data sharing / sales.
boolean
- type
"changeVisitorConsent"
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).
string
- value
The information to be stored as metadata. If the value is `null`, the metafield will be deleted.
string | null
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;
}
VisitorConsent
- analytics
Visitor consents to recording data to understand how customers interact with the site.
boolean
- marketing
Visitor consents to ads and marketing communications based on customer interests.
boolean
- preferences
Visitor consent to remembering customer preferences, such as country or language, to personalize visits to the website.
boolean
- saleOfData
Opts the visitor out of data sharing / sales.
boolean
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;
}
TrackingConsentChangeResult
TrackingConsentChangeResultSuccess | TrackingConsentChangeResultError
TrackingConsentChangeResultSuccess
The returned result of a successful tracking consent preference update.
- type
The type of the `TrackingConsentChangeResultSuccess` API.
"success"
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.
string
- type
The type of the `TrackingConsentChangeResultError` API.
"error"
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;
}
AuthenticatedAccount
- customer
Provides the customer information of the authenticated customer.
StatefulRemoteSubscribable<Customer | undefined>
- purchasingCompany
Provides the company info of the authenticated business customer. If the customer is not authenticated or is not a business customer, this value is `undefined`.
StatefulRemoteSubscribable<PurchasingCompany | undefined>
export interface AuthenticatedAccount {
/**
* Provides the company info of the authenticated business customer.
* If the customer is not authenticated or is not a business customer, this value is `undefined`.
*/
purchasingCompany: StatefulRemoteSubscribable<PurchasingCompany | undefined>;
/**
* Provides the customer information of the authenticated customer.
*/
customer: StatefulRemoteSubscribable<Customer | undefined>;
}
Customer
Information about the authenticated customer. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).
- id
Customer ID.
string
export interface Customer {
/**
* Customer ID.
*
* @example 'gid://shopify/Customer/123'
*/
id: string;
}
PurchasingCompany
- company
Include information of the company of the logged in business customer.
Company
- location
Include information of the company location of the logged in business customer.
CompanyLocation
export interface PurchasingCompany {
/**
* Include information of the company of the logged in business customer.
*/
company: Company;
/**
* Include information of the company location of the logged in business customer.
*/
location?: CompanyLocation;
}
Company
- id
Company ID.
string
export interface Company {
/**
* Company ID.
*/
id: string;
}
CompanyLocation
- id
Company location ID.
string
export interface CompanyLocation {
/**
* Company location ID.
*/
id: string;
}
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.
AllowedProcessing
- metafields
Stored tracking consent metafield data.
TrackingConsentMetafield[]
- region
Details about the visitor's current location for use in evaluating if more granular consent controls should render.
CustomerPrivacyRegion
- saleOfDataRegion
Whether the visitor is in a region requiring data sale opt-outs.
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.
boolean
- visitorConsent
An object containing the customer's current privacy consent settings. *
VisitorConsent
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.
boolean
- marketing
Can collect customer preference for marketing, attribution and targeted advertising from the merchant.
boolean
- preferences
Can collect customer preferences such as language, currency, size, and more.
boolean
- saleOfData
Can collect customer preference for sharing data with third parties, usually for behavioral advertising.
boolean
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).
string
- value
The information to be stored as metadata.
string
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).
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).
string
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;
}
CountryCode
'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'
Extension
Meta information about an extension target.
- apiVersion
The API version that was set in the extension config file.
ApiVersion
- capabilities
The allowed capabilities of the extension, defined in your [shopify.ui.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 buyer's progress and the merchant has allowed this blocking behavior.
StatefulRemoteSubscribable<Capability[]>
- editor
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
Editor
- rendered
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 buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
StatefulRemoteSubscribable<boolean>
- scriptUrl
The URL to the script that started the extension target.
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.
Target
- version
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
string
export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
/**
* The API version that was set in the extension config file.
*
* @example '2023-04', '2023-07'
*/
apiVersion: ApiVersion;
/**
* The allowed capabilities of the extension, defined
* in your [shopify.ui.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 buyer's progress and the merchant has allowed this blocking behavior.
*/
capabilities: StatefulRemoteSubscribable<Capability[]>;
/**
* Information about the editor where the extension is being rendered.
*
* The value is undefined if the extension is not rendering in an editor.
*/
editor?: Editor;
/**
* 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 buyer has navigated away
* from where it was rendered. The extension continues running so that
* your extension is immediately available to render if the buyer navigates back.
*/
rendered: StatefulRemoteSubscribable<boolean>;
/**
* 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 'customer-account.order-status.block.render'
* @see /docs/api/checkout-ui-extensions/unstable/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
'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.
'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.
"checkout"
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.
(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.
(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.
(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.
I18nTranslate
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 defines the i18n.translate() signature.
export interface I18nTranslate {
/**
* This returns a translated string matching a key in a locale file.
*
* @example translate("banner.title")
*/
<ReplacementType = string>(
key: string,
options?: {[placeholderKey: string]: ReplacementType | string | number},
): ReplacementType extends string | number
? string
: (string | ReplacementType)[];
}
Localization
- country
The country context of the buyer sees in the customer account. It will update if the buyer changes the country in the customer account If the country is unknown, then the value is undefined.
StatefulRemoteSubscribable<Country | undefined>
- extensionLanguage
This is the buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, this is the fallback locale used for translations. For example, if the buyer's language is 'fr-CA' but your extension only supports translations for 'fr', then the `isoCode` for this language is 'fr'. If your extension does not provide french translations at all, this value is the default locale for your extension (that is, the one matching your .default.json file).
StatefulRemoteSubscribable<Language>
- language
The language the buyer sees in the customer account hub.
StatefulRemoteSubscribable<Language>
export interface Localization {
/**
* The language the buyer sees in the customer account hub.
*/
language: StatefulRemoteSubscribable<Language>;
/**
* This is the buyer's language, as supported by the extension.
* If the buyer's actual language is not supported by the extension,
* this is the fallback locale used for translations.
*
* For example, if the buyer's language is 'fr-CA' but your extension
* only supports translations for 'fr', then the `isoCode` for this
* language is 'fr'. If your extension does not provide french
* translations at all, this value is the default locale for your
* extension (that is, the one matching your .default.json file).
*/
extensionLanguage: StatefulRemoteSubscribable<Language>;
/**
* The country context of the buyer sees in the customer account.
* It will update if the buyer changes the country in the customer account
* If the country is unknown, then the value is undefined.
*/
country: StatefulRemoteSubscribable<Country | undefined>;
}
Country
- isoCode
The ISO-3166-1 code for this country.
CountryCode
export interface Country {
/**
* The ISO-3166-1 code for this country.
* @see https://www.iso.org/iso-3166-country-codes.html
*/
isoCode: CountryCode;
}
Language
- isoCode
The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
string
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;
}
StandardExtensionNavigation
- navigate
The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
NavigateFunction
export interface StandardExtensionNavigation {
/**
* The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
*/
navigate: NavigateFunction;
}
NavigateFunction
export interface NavigateFunction {
/**
* Navigates to a specific URL, updating any provided state in the history entries list.
* @param url The destination URL to navigate to.
*/
(url: string, options?: NavigationOptions): void;
}
StorefrontApiVersion
Union of supported storefront API versions
'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
{ requestId: string; code: string; }
- message
string
export interface GraphQLError {
message: string;
extensions: {
requestId: string;
code: string;
};
}
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.
() => Promise<string>
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<string>;
}
ExtensionSettings
The merchant-defined setting values for the extension.
- [key: string]
string | number | boolean | undefined
export interface ExtensionSettings {
[key: string]: string | number | boolean | undefined;
}
Storage
A key-value storage object for extension targets. Stored data is only available to this specific app but can be shared across multiple extension targets. The storage backend is implemented with `localStorage` and should persist for ... days However, data persistence isn't guaranteed.
- delete
Delete stored data by key.
(key: string) => Promise<void>
- 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.
<T = unknown>(key: string) => Promise<T>
- write
Write stored data for this key. The data must be serializable to JSON.
(key: string, data: any) => Promise<void>
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<T = unknown>(key: string): Promise<T | null>;
/**
* Write stored data for this key.
*
* The data must be serializable to JSON.
*/
write(key: string, data: any): Promise<void>;
/**
* Delete stored data by key.
*/
delete(key: string): Promise<void>;
}
Ui
- forceDataRefresh
Refresh data so the surrounding information on the page is updated. The `content` string will appear in a toast message after refresh, to confirm the action was successful. To request access to this API: 1. Go to your partner dashboard and click **Apps**. 2. Select the app you need to request access for. 3. Click **API access**. 4. Under **Access force data refresh**, click **Request access**.
(content: string) => Promise<void>
- overlay
An overlay is a contextual element on top of the main interface that provides additional information or functionality.
{ close(overlayId: string): void; }
- toast
The Toast API displays a non-disruptive message that displays at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. How to use: - Use toasts to confirm successful actions. - Aim for two words. - Use noun + past tense verb format. For example, \`Changes saved\`. For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.
{ show(content: string): void; }
export interface Ui {
/**
* An overlay is a contextual element on top of the main interface that provides additional information or functionality.
*/
overlay: {
close(overlayId: string): void;
};
/**
* The Toast API displays a non-disruptive message that displays at the bottom
* of the interface to provide quick, at-a-glance feedback on the outcome
* of an action.
*
* How to use:
*
* - Use toasts to confirm successful actions.
*
* - Aim for two words.
*
* - Use noun + past tense verb format. For example, \`Changes saved\`.
*
* For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.
*/
toast: {
show(content: string): void;
};
/**
* Refresh data so the surrounding information on the page is updated. The `content` string will appear in a toast message after refresh, to confirm the action was successful.
*
* To request access to this API:
*
* 1. Go to your partner dashboard and click **Apps**.
*
* 2. Select the app you need to request access for.
*
* 3. Click **API access**.
*
* 4. Under **Access force data refresh**, click **Request access**.
*/
forceDataRefresh(content: string): Promise<void>;
}
Customer account order status cart line list extension example
examples
Customer account order status cart line list extension example
React
import { reactExtension, Banner, useOrder, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.order-status.cart-line-list.render-after', () => <Extension />, ); function Extension() { const order = useOrder(); if (order) { return ( <Banner> Please include your order ID ({order.id}) in support requests </Banner> ); } return null; }
Javascript
import { Banner, extension, } from '@shopify/ui-extensions/customer-account'; export default extension( 'customer-account.order-status.cart-line-list.render-after', (root, {order}) => { let bannerShown = false; order.subscribe((order) => { if (order && !bannerShown) { root.appendChild( root.createComponent( Banner, undefined, `Please include your order ID (${order.id}) in support requests`, ), ); bannerShown = true; } }); }, );