---
title: OrderStatusApi
description: |
  
  This API object is provided to extensions registered for the extension targets that appear exclusively on the **Order status** page.

  It extends the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) and provides access to an order object.
api_version: 2023-07
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/orderstatusapi
  md: https://shopify.dev/docs/api/checkout-ui-extensions/2023-07/apis/orderstatusapi.md
---

# Order​Status​Api

This API object is provided to extensions registered for the extension targets that appear exclusively on the **Order status** page.

It extends the [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi) and provides access to an order object.

## Properties

See the [StandardApi examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi#examples) for more information on how to use the API.

* order

  StatefulRemoteSubscribable\<Order | undefined>

  required

  Order information that's available post-checkout.

### Order

Information about an order that was placed.

* id

  A globally-unique identifier.

  ```ts
  string
  ```

* name

  Unique identifier for the order that appears on the order.

  ```ts
  string
  ```

* cancelledAt

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

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

### Examples

* ####

  ##### React

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

  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/checkout';

  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/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi)

[APIsStandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi)

[APIsCheckoutApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/checkoutapi)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlineitemapi)

[APIsCartLineItemApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlineitemapi)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuppointlistapi)

[APIsPickupPointListApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuppointlistapi)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuplocationlistapi)

[APIsPickupLocationListApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/pickuplocationlistapi)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/apis/shippingoptionitemapi)

[APIsShippingOptionItemApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/shippingoptionitemapi)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensiontargets)

[APIsExtensionTargets](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensiontargets)