---
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\<OrderConfirmation>

  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',
    () => <Extension />,
  );

  function Extension() {
    const {orderConfirmation} = useApi();
    const {id} = useSubscription(orderConfirmation);

    if (id) {
      return (
        <Banner>
          Please include your order confirmation ID
          ({id}) in support requests
        </Banner>
      );
    }

    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)