# customer-account.order-status.customer-information.render-after
A [static extension target](https://shopify.dev/docs/api/customer-account-ui-extensions/extension-targets-overview#static-extension-targets) that renders below the order details section of the Order Status page.
> Caution: Use the `@shopify/ui-extensions/customer-account` or `@shopify/ui-extensions-react/customer-account` surfaces when targeting order status targets. Importing from the `checkout` surface is deprecated as of version `2023-10`.
```jsx
import {
reactExtension,
Banner,
useOrder,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.order-status.customer-information.render-after',
() => ,
);
function Extension() {
const order = useOrder();
if (order) {
return (
Please include your order ID ({order.id})
in support requests
);
}
return null;
}
```
```js
import {
Banner,
extension,
} from '@shopify/ui-extensions/customer-account';
export default extension(
'customer-account.order-status.customer-information.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;
}
});
},
);
```
## OrderStatusApi
The API object provided to this and other `customer-account.order-status` extension targets.
### OrderStatusApi
### analytics
value: `Analytics`
Methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.
### appliedGiftCards
value: `StatefulRemoteSubscribable`
Gift Cards that have been applied to the order.
### appMetafields
value: `StatefulRemoteSubscribable`
The metafields requested in the [`shopify.ui.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### attributes
value: `StatefulRemoteSubscribable`
Custom attributes left by the customer to the merchant, either in their cart or during checkout.
### authenticationState
value: `StatefulRemoteSubscribable`
The authentication state of Order status page.
### billingAddress
value: `StatefulRemoteSubscribable`
The buyer billing address used for the order.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### buyerIdentity
value: `OrderStatusBuyerIdentity`
Information about the buyer that is interacting with the order.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### checkoutSettings
value: `StatefulRemoteSubscribable`
Settings applied to the buyer's checkout.
### checkoutToken
value: `StatefulRemoteSubscribable`
id that represents the checkout used to create the order.
Matches the `token` field in the [WebPixel checkout payload](https://shopify.dev/docs/api/pixels/customer-events#checkout) and the `checkout_token` field in the [Admin REST API Order resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object).
### cost
value: `CartCost`
Details on the costs of the purchase for the buyer.
### discountAllocations
value: `StatefulRemoteSubscribable`
Discounts that have been applied to the entire cart.
### discountCodes
value: `StatefulRemoteSubscribable`
A list of discount codes applied to the purchase.
### extension
value: `Extension`
Meta information about the extension.
### extensionPoint
value: `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.
### lines
value: `StatefulRemoteSubscribable`
A list of lines containing information about the items the customer intends to purchase.
### localization
value: `OrderStatusLocalization`
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`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-i18n) object instead.
### metafields
value: `StatefulRemoteSubscribable`
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](https://shopify.dev/docs/admin-api/graphql/reference/orders/order#metafield-2021-01)
### note
value: `StatefulRemoteSubscribable`
A note left by the customer to the merchant, either in their cart or during checkout.
### order
value: `StatefulRemoteSubscribable`
Information about the order that was placed.
### requireLogin
value: `() => Promise`
The requireLogin() method triggers login if the customer is viewing pre-authenticated Order status page.
### shippingAddress
value: `StatefulRemoteSubscribable`
The buyer shipping address used for the order.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### shop
value: `Shop`
Shop where the purchase took place.
### version
value: `Version`
The renderer version being used for the extension.
### Analytics
### publish
value: `(name: string, data: { [key: string]: unknown; }) => Promise`
Publish method to emit analytics events to [Web Pixels](https://shopify.dev/docs/apps/marketing).
### AppliedGiftCard
### amountUsed
value: `Money`
The amount of the applied gift card that will be used when the checkout is completed.
### balance
value: `Money`
The current balance of the applied gift card prior to checkout completion.
### lastCharacters
value: `string`
The last four characters of the applied gift card's code.
### Money
### amount
value: `number`
The price amount.
### currencyCode
value: `CurrencyCode`
The ISO 4217 format for the currency.
### AppMetafieldEntry
A metafield associated with the shop or a resource on the checkout.
### metafield
value: `AppMetafield`
The metadata information.
### target
value: `AppMetafieldEntryTarget`
The target that is associated to the metadata.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.
### AppMetafield
Represents a custom metadata attached to a resource.
### key
value: `string`
The key name of a metafield.
### namespace
value: `string`
The namespace for a metafield.
### type
value: `string`
The metafield's type name.
### value
value: `string | number | boolean`
The value of a metafield.
### valueType
value: `'boolean' | 'float' | 'integer' | 'json_string' | 'string'`
The metafield’s information type.
### AppMetafieldEntryTarget
The metafield owner.
### id
value: `string`
The numeric owner ID that is associated with the metafield.
### type
value: `| 'customer'
| 'product'
| 'shop'
| 'variant'
| 'company'
| 'companyLocation'
| 'cart'`
The type of the metafield owner.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.
### Attribute
### key
value: `string`
The key for the attribute.
### value
value: `string`
The value for the attribute.
### MailingAddress
### address1
value: `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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### address2
value: `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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### city
value: `string`
The buyer's city.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### company
value: `string`
The buyer's company name.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### countryCode
value: `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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### firstName
value: `string`
The buyer's first name.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### lastName
value: `string`
The buyer's last name.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### name
value: `string`
The buyer's full name.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### phone
value: `string`
The buyer's phone number.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### provinceCode
value: `string`
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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### zip
value: `string`
The buyer's postal or ZIP code.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### OrderStatusBuyerIdentity
### customer
value: `StatefulRemoteSubscribable`
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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### email
value: `StatefulRemoteSubscribable`
The email address of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### phone
value: `StatefulRemoteSubscribable`
The phone number of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### purchasingCompany
value: `StatefulRemoteSubscribable<
OrderStatusPurchasingCompany | 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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### OrderStatusCustomer
Information about a customer who has previously purchased from this shop.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### acceptsMarketing
value: `boolean`
Defines if the customer accepts marketing activities.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### email
value: `string`
The email of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### firstName
value: `string`
The first name of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### fullName
value: `string`
The full name of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### id
value: `string`
Customer ID.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### image
value: `ImageDetails`
The image associated with the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### lastName
value: `string`
The last name of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### phone
value: `string`
The phone number of the customer.
{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### storeCreditAccounts
value: `StoreCreditAccount[]`
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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### ImageDetails
### altText
value: `string`
The alternative text for the image.
### url
value: `string`
The image URL.
### StoreCreditAccount
Information about a Store Credit Account.
### balance
value: `Money`
The current balance of the Store Credit Account.
### id
value: `string`
A globally-unique identifier.
### OrderStatusPurchasingCompany
Information about a company that the business customer is purchasing on behalf of.
### company
value: `OrderStatusCompany`
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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### location
value: `OrderStatusCompanyLocation`
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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### OrderStatusCompany
### externalId
value: `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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### id
value: `string`
The company ID.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### name
value: `string`
The name of the company.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### OrderStatusCompanyLocation
### externalId
value: `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](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### id
value: `string`
The company location ID.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### name
value: `string`
The name of the company location.
{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### CheckoutSettings
Settings describing the behavior of the buyer's checkout.
### orderSubmission
value: `'DRAFT_ORDER' | 'ORDER'`
The type of order that will be created once the buyer completes checkout.
### paymentTermsTemplate
value: `PaymentTermsTemplate`
Represents the merchant configured payment terms.
### shippingAddress
value: `ShippingAddressSettings`
Settings describing the behavior of the shipping address.
### PaymentTermsTemplate
Represents the payment terms template object.
### dueDate
value: `string`
The due date for net payment terms as a ISO 8601 formatted string `YYYY-MM-DDTHH:mm:ss.sssZ`.
### dueInDays
value: `number`
The number of days between the issued date and due date if using net payment terms.
### id
value: `string`
A globally-unique ID.
### name
value: `string`
The name of the payment terms translated to the buyer's current language. See [localization.language](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-localization).
### ShippingAddressSettings
Settings describing the behavior of the shipping address.
### isEditable
value: `boolean`
Describes whether the buyer can ship to any address during checkout.
### CartCost
### subtotalAmount
value: `StatefulRemoteSubscribable`
A `Money` value representing the subtotal value of the items in the cart at the current step of checkout.
### totalAmount
value: `StatefulRemoteSubscribable`
A `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated.
### totalShippingAmount
value: `StatefulRemoteSubscribable`
A `Money` value representing the total shipping a buyer can expect to pay at the current step of checkout. This value includes shipping discounts. Returns undefined if shipping has not been negotiated yet, such as on the information step.
### totalTaxAmount
value: `StatefulRemoteSubscribable`
A `Money` value representing the total tax a buyer can expect to pay at the current step of checkout or the total tax included in product and shipping prices. Returns undefined if taxes are unavailable.
### CartCodeDiscountAllocation
### code
value: `string`
The code for the discount
### discountedAmount
value: `Money`
The money amount that has been discounted from the order
### type
value: `"code"`
The type of the code discount
### CartAutomaticDiscountAllocation
### discountedAmount
value: `Money`
The money amount that has been discounted from the order
### title
value: `string`
The title of the automatic discount
### type
value: `"automatic"`
The type of the automatic discount
### CartCustomDiscountAllocation
### discountedAmount
value: `Money`
The money amount that has been discounted from the order
### title
value: `string`
The title of the custom discount
### type
value: `"custom"`
The type of the custom discount
### CartDiscountCode
### code
value: `string`
The code for the discount
### Extension
Meta information about an extension target.
### apiVersion
value: `ApiVersion`
The API version that was set in the extension config file.
### capabilities
value: `StatefulRemoteSubscribable`
The allowed capabilities of the extension, defined in your [shopify.ui.extension.toml](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
* [`api_access`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
* [`network_access`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
* [`block_progress`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
### editor
value: `Editor`
Information about the editor where the extension is being rendered.
The value is undefined if the extension is not rendering in an editor.
### rendered
value: `StatefulRemoteSubscribable`
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.
### scriptUrl
value: `string`
The URL to the script that started the extension target.
### target
value: `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.
### version
value: `string`
The published version of the running extension target.
For unpublished extensions, the value is `undefined`.
### Editor
### type
value: `"checkout"`
Indicates whether the extension is rendering in the checkout editor.
### CartLine
### attributes
value: `Attribute[]`
The line item additional custom attributes.
### cost
value: `CartLineCost`
The details about the cost components attributed to the cart line.
### discountAllocations
value: `CartDiscountAllocation[]`
Discounts applied to the cart line.
### id
value: `string`
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.
### lineComponents
value: `CartBundleLineComponent[]`
Sub lines of the merchandise line. If no sub lines are present, this will be an empty array.
### merchandise
value: `Merchandise`
The merchandise being purchased.
### quantity
value: `number`
The quantity of the merchandise being purchased.
### CartLineCost
### totalAmount
value: `Money`
The total amount after reductions the buyer can expect to pay that is directly attributable to a single cart line.
### CartBundleLineComponent
### attributes
value: `Attribute[]`
Additional custom attributes for the bundle line component.
### cost
value: `CartLineCost`
The cost attributed to this bundle line component.
### id
value: `string`
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.
### merchandise
value: `Merchandise`
The merchandise of this bundle line component.
### quantity
value: `number`
The quantity of merchandise being purchased.
### type
value: `"bundle"`
### Merchandise
### id
value: `string`
A globally-unique identifier.
### image
value: `ImageDetails`
Image associated with the product variant. This field falls back to the product image if no image is available.
### product
value: `Product`
The product object that the product variant belongs to.
### requiresShipping
value: `boolean`
Whether or not the product requires shipping.
### selectedOptions
value: `SelectedOption[]`
List of product options applied to the variant.
### sellingPlan
value: `SellingPlan`
The selling plan associated with the merchandise.
### subtitle
value: `string`
The product variant's subtitle.
### title
value: `string`
The product variant’s title.
### type
value: `"variant"`
### Product
### id
value: `string`
A globally-unique identifier.
### productType
value: `string`
A categorization that a product can be tagged with, commonly used for filtering and searching.
### vendor
value: `string`
The product’s vendor name.
### SelectedOption
### name
value: `string`
The name of the merchandise option.
### value
value: `string`
The value of the merchandise option.
### SellingPlan
### id
value: `string`
A globally-unique identifier.
### OrderStatusLocalization
### country
value: `StatefulRemoteSubscribable`
The country context of the checkout. This value carries over from the context of the cart, where it was used to contextualize the storefront experience. It will update if the buyer changes the country of their shipping address. The value is undefined if unknown.
### currency
value: `StatefulRemoteSubscribable`
The currency that the buyer sees for money amounts in the checkout.
### extensionLanguage
value: `StatefulRemoteSubscribable`
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).
### language
value: `StatefulRemoteSubscribable`
The language the buyer sees in the checkout.
### market
value: `StatefulRemoteSubscribable`
The [market](https://shopify.dev/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.
### timezone
value: `StatefulRemoteSubscribable`
The buyer’s time zone.
### Country
### isoCode
value: `CountryCode`
The ISO-3166-1 code for this country.
### Currency
### isoCode
value: `CurrencyCode`
The ISO-4217 code for this currency.
### Language
### isoCode
value: `string`
The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
### Market
### handle
value: `string`
The human-readable, shop-scoped identifier for the market.
### id
value: `string`
A globally-unique identifier for a market.
### Metafield
Metadata associated with the checkout.
### key
value: `string`
The name of the metafield. It must be between 3 and 30 characters in length (inclusive).
### namespace
value: `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).
### value
value: `string | number`
The information to be stored as metadata.
### valueType
value: `'integer' | 'string' | 'json_string'`
The metafield’s information type.
### Order
Information about an order that was placed.
### cancelledAt
value: `string`
If cancelled, the time at which the order was cancelled.
### confirmationNumber
value: `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.
### id
value: `string`
A globally-unique identifier.
### name
value: `string`
Unique identifier for the order that appears on the order.
### processedAt
value: `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.
### Shop
### id
value: `string`
The shop ID.
### myshopifyDomain
value: `string`
The shop's myshopify.com domain.
### name
value: `string`
The name of the shop.
### storefrontUrl
value: `string`
The primary storefront URL.
> Caution: As of version `2024-10` this value will no longer have a trailing slash.
## StandardApi
The base API object provided to this and other `customer-account` extension targets.
### Docs_StandardApi
### authenticatedAccount
value: `AuthenticatedAccount`
Information about the authenticated account.
### extension
value: `Extension`
Meta information about the extension.
### extensionPoint
value: `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.
### i18n
value: `I18n`
Utilities for translating content and formatting values according to the current `localization` of the user.
### localization
value: `Localization`
Details about the language of the buyer.
### navigation
value: `StandardExtensionNavigation`
### query
value: `(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>`
Used to query the Storefront GraphQL API with a prefetched token.
See [storefront api access examples](https://shopify.dev/docs/api/customer-account-ui-extensions/apis/storefront-api#examples) for more information.
### sessionToken
value: `SessionToken`
Provides access to session tokens, which can be used to verify token claims on your app's server.
See [session token examples](https://shopify.dev/docs/api/customer-account-ui-extensions/apis/session-token#examples) for more information.
### settings
value: `StatefulRemoteSubscribable`
The settings matching the settings definition written in the [`shopify.ui.extension.toml`](https://shopify.dev/docs/api/customer-account-ui-extensions/configuration) file.
See [settings examples](https://shopify.dev/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.
### storage
value: `Storage`
Key-value storage for the extension target.
### ui
value: `Ui`
Methods to interact with the extension's UI.
### version
value: `Version`
The renderer version being used for the extension.
### AuthenticatedAccount
### customer
value: `StatefulRemoteSubscribable`
Provides the customer information of the authenticated customer.
### purchasingCompany
value: `StatefulRemoteSubscribable`
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`.
### Customer
Information about the authenticated customer.
{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).
### id
value: `string`
Customer ID.
### PurchasingCompany
### company
value: `Company`
Include information of the company of the logged in business customer.
### Company
### id
value: `string`
Company ID.
### Extension
Meta information about an extension target.
### apiVersion
value: `ApiVersion`
The API version that was set in the extension config file.
### capabilities
value: `StatefulRemoteSubscribable`
The allowed capabilities of the extension, defined in your [shopify.ui.extension.toml](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.
* [`api_access`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
* [`network_access`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
* [`block_progress`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
### editor
value: `Editor`
Information about the editor where the extension is being rendered.
The value is undefined if the extension is not rendering in an editor.
### rendered
value: `StatefulRemoteSubscribable`
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.
### scriptUrl
value: `string`
The URL to the script that started the extension target.
### target
value: `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.
### version
value: `string`
The published version of the running extension target.
For unpublished extensions, the value is `undefined`.
### Editor
### type
value: `"checkout"`
Indicates whether the extension is rendering in the checkout editor.
### I18n
### formatCurrency
value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & 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.
### formatDate
value: `(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => 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.
### formatNumber
value: `(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string`
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.
### translate
value: `I18nTranslate`
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.
### Localization
### extensionLanguage
value: `StatefulRemoteSubscribable`
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).
### language
value: `StatefulRemoteSubscribable`
The language the buyer sees in the customer account hub.
### Language
### isoCode
value: `string`
The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
### StandardExtensionNavigation
### navigate
value: `NavigateFunction`
The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
### GraphQLError
GraphQL error returned by the Shopify Storefront APIs.
### extensions
value: `{ requestId: string; code: string; }`
### message
value: `string`
### SessionToken
### get
value: `() => Promise`
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.
### ExtensionSettings
The merchant-defined setting values for the extension.
### [key: string]
value: `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
value: `(key: string) => Promise`
Delete stored data by key.
### read
value: `(key: string) => Promise`
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.
### write
value: `(key: string, data: any) => Promise`
Write stored data for this key.
The data must be serializable to JSON.
### Ui
### forceDataRefresh
value: `(content: string) => Promise`
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**.
### overlay
value: `{ close(overlayId: string): void; }`
An overlay is a contextual element on top of the main interface that provides additional information or functionality.
### toast
value: `{ show(content: 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](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.