---
title: Order
description: The API for interacting with the order, available on the **Order status** page.
api_version: 2024-07
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/order
  md: https://shopify.dev/docs/api/checkout-ui-extensions/2024-07/apis/order.md
---

# OrderAPI

The API for interacting with the order, available on the **Order status** page.

## OrderConfirmationApi

The API object provided to `purchase.thank-you` extension targets.

* orderConfirmation

  StatefulRemoteSubscribable\<OrderConfirmation>

  required

  Order information that's available post-checkout.

### OrderConfirmation

* 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;
}
```

## OrderStatusApi

The API object provided to `customer-account.order-status` extension targets.

* order

  StatefulRemoteSubscribable\<Order | undefined>

  required

  Order information that's available post-checkout.

### Order

Information about an order that was placed.

* cancelledAt

  If cancelled, the time at which the order was cancelled.

  ```ts
  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.

  ```ts
  string
  ```

* id

  A globally-unique identifier.

  ```ts
  string
  ```

* name

  Unique identifier for the order that appears on the order.

  ```ts
  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.

  ```ts
  string
  ```

```ts
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;
}
```

## use​Order()

Returns the order information that's available on the **Order status** page.

### Returns

* Order | undefined

### Order

Information about an order that was placed.

* cancelledAt

  If cancelled, the time at which the order was cancelled.

  ```ts
  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.

  ```ts
  string
  ```

* id

  A globally-unique identifier.

  ```ts
  string
  ```

* name

  Unique identifier for the order that appears on the order.

  ```ts
  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.

  ```ts
  string
  ```

```ts
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;
}
```

### 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;
          }
        },
      );
    },
  );
  ```

## Examples

Order status

Use the `order` API on the **Order status** page. This is applicable to the `customer-account.orders-status` extension targets only.

### Examples

* #### Order status

  ##### Description

  Use the \`order\` API on the \*\*Order status\*\* page. This is applicable to the \`customer-account.orders-status\` extension targets only.

  ##### React

  ```jsx
  import {
    reactExtension,
    Banner,
    useOrder,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension(
    'customer-account.order-status.customer-information.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

  ```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;
        }
      });
    },
  );
  ```

## 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)