--- title: Order description: >- The API for interacting with the order confirmation, available on the **Thank You** page. api_version: 2025-07 api_name: checkout-ui-extensions source_url: html: 'https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/apis/order' md: 'https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/apis/order.md' --- # OrderAPI The API for interacting with the order confirmation, available on the **Thank You** page. ## OrderConfirmationApi The API object provided to `purchase.thank-you` extension targets. * orderConfirmation StatefulRemoteSubscribable\ required Order information that's available post-checkout. ### OrderConfirmation * isFirstOrder Whether this is the customer's first order. ```ts boolean ``` * number A randomly generated alpha-numeric identifier for the order. For orders created in 2024 and onwards, the number will always be present. For orders created before that date, the number might not be present. ```ts string ``` * order ```ts { id: string; } ``` ```ts export interface OrderConfirmation { order: { /** * The globally-uniqueID of the OrderConfirmation. This will be the ID of the Order once successfully created. */ id: string; }; /** * A randomly generated alpha-numeric identifier for the order. * For orders created in 2024 and onwards, the number will always be present. For orders created before that date, the number might not be present. */ number?: string; /** * Whether this is the customer's first order. */ isFirstOrder: boolean; } ``` ### Examples * #### Order confirmation ##### React ```jsx import { reactExtension, Banner, useApi, useSubscription, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.thank-you.block.render', () => , ); function Extension() { const {orderConfirmation} = useApi(); const {id} = useSubscription(orderConfirmation); if (id) { return ( Please include your order confirmation ID ({id}) in support requests ); } return null; } ``` ##### JavaScript ```js import { Banner, extension, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.thank-you.block.render', (root, {orderConfirmation}) => { let bannerShown = false; orderConfirmation.subscribe( (orderConfirmation) => { if (orderConfirmation && !bannerShown) { root.appendChild( root.createComponent( Banner, undefined, `Please include your order confirmation ID (${orderConfirmation.id}) in support requests`, ), ); bannerShown = true; } }, ); }, ); ``` ## Related [![](https://shopify.dev/images/icons/32/blocks.png)![](https://shopify.dev/images/icons/32/blocks-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/targets) [ReferenceTargets](https://shopify.dev/docs/api/checkout-ui-extensions/targets) [![](https://shopify.dev/images/icons/32/apps.png)![](https://shopify.dev/images/icons/32/apps-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/components) [ReferenceComponents](https://shopify.dev/docs/api/checkout-ui-extensions/components) [![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) [ReferenceConfiguration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) [![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/apps/checkout) [LearnTutorials](https://shopify.dev/apps/checkout)