# Order

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

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

```

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

```

## OrderConfirmationApi

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

### OrderConfirmationApi

### orderConfirmation

value: `StatefulRemoteSubscribable<OrderConfirmation>`

  - OrderConfirmation: 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;
}
Order information that's available post-checkout.

### OrderConfirmation

### number

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.

### order

value: `{ id: string; }`


## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples

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


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

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

```

```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 `customer-account.order-status` extension targets.

### Docs_OrderStatus_OrderApi

### order

value: `StatefulRemoteSubscribable<Order | undefined>`

  - Order: 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;
}
Order information that's available post-checkout.

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

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples

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


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

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

```

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

```

## useOrder

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

### UseOrderGeneratedType

Returns the order information that's available post-checkout.

#### Returns: Order | undefined
export function useOrder<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): Order | undefined {
  const api = useApi<Target>();

  if ('order' in api) {
    return useSubscription(api.order);
  }

  throw new ExtensionHasNoMethodError('order', api.extension.target);
}


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

## Related

- [Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)
- [Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)
- [Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)
- [Tutorials](/apps/checkout)

## Examples

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


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

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

```

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

```

## Examples

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


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

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

```

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

```