---
title: Order API
description: >-
  The Order API provides read-only access to order data. Use this API to get
  order information and build contextual experiences based on the selected order
  context. The API offers order details for implementing order-specific
  functionality and workflows.
api_version: 2024-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/target-apis/contextual-apis/order-api
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/target-apis/contextual-apis/order-api.md
---

# Order API

The Order API provides read-only access to order data. Use this API to get order information and build contextual experiences based on the selected order context. The API offers order details for implementing order-specific functionality and workflows.

#### Use cases

* **Order access:** Access the order identifier to implement order-specific functionality.
* **Order extensions:** Build extensions displaying order information or management tools.
* **Contextual UI:** Create contextual interfaces adapting based on current order context.
* **External integrations:** Link order data with external systems or order management platforms.

Support

Targets (6)

### Supported targets

* [pos.​order-details.​action.​menu-item.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-action-menu-item-)
* [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-action-modal-)
* [pos.​order-details.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/order-details#order-details-block-)
* [pos.​purchase.​post.​action.​menu-item.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-action-menu-item-)
* [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-action-modal-)
* [pos.​purchase.​post.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2024-10/targets/post-purchase#post-purchase-block-)

## OrderApi

The `OrderApi` object provides access to order data. Access this property through `api.order` to interact with the current order context.

* id

  number

  required

  The unique identifier for the order. Use for order lookups, implementing order-specific functionality, and integrating with external systems.

* name

  string

  required

  The name of the order as configured by the merchant. Use for order identification, displays, and customer-facing interfaces.

* customerId

  number

  The unique identifier of the customer associated with the order. Returns `undefined` if no customer is associated. Use for customer-specific functionality and personalized experiences.

Examples

### Examples

* #### Access order data in an action menu

  ##### Description

  Retrieve order information from action menu items on order detail screens. This example shows how to access the Order API to get the current order data, enabling you to build custom workflows, generate reports, or trigger integrations based on order details.

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    Screen,
    Navigator,
    ScrollView,
    Text,
    Section,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const PostPurchaseAction = () => {
    const api = useApi<'pos.purchase.post.action.render'>();
    const order = api.order;

    return (
      <Navigator>
        <Screen name="PostPurchaseAction" title="Post Purchase Action">
          <ScrollView>
            <Section title="Order Information">
              <Text>Order ID: {order.id}</Text>
              <Text>Order Name: {order.name}</Text>
              {order.customerId && <Text>Order Customer ID: {order.customerId}</Text>}
            </Section>
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };

  export default reactExtension('pos.purchase.post.action.render', () => (
    <PostPurchaseAction />
  ));
  ```

  ##### TS

  ```ts
  import {
    extension,
    Screen,
    ScrollView,
    Text,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.purchase.post.action.render', (root, api) => {
    const order = api.order;

    const screen = root.createComponent(Screen, {
      name: 'PostPurchaseAction',
      title: 'Post Purchase Action',
    });

    const scrollView = root.createComponent(ScrollView, {});

    const orderName = root.createComponent(Text, {}, `Order Name: ${order.name}`);
    const orderId = root.createComponent(Text, {}, `Order ID: ${order.id}`);
    const orderCustomerId = root.createComponent(
      Text,
      {},
      `Order Customer ID: ${order.customerId}`,
    );

    scrollView.append(orderName);
    scrollView.append(orderId);
    scrollView.append(orderCustomerId);

    screen.append(scrollView);

    root.append(screen);

    root.mount();
  });
  ```

* #### Show order details in a block

  ##### Description

  Show order details within a custom block on order detail screens. This example demonstrates how to use the Order API to fetch and display order information in a persistent block, providing merchants with quick access to relevant order data or additional context.

  ##### React

  ```tsx
  import React from 'react';
  import {
    reactExtension,
    POSBlock,
    POSBlockRow,
    useApi,
    Text,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const OrderDetailsBlock = () => {
    const api = useApi<'pos.purchase.post.action.render'>();
    const order = api.order;

    return (
      <POSBlock>
        <POSBlockRow>
          <Text>Order Name: {order.name}</Text>
          <Text>Order ID {order.id.toString()}</Text>
          {order.customerId && (
            <Text>Order Customer ID {order.customerId.toString()}</Text>
          )}
        </POSBlockRow>
      </POSBlock>
    );
  };

  export default reactExtension('pos.purchase.post.block.render', () => (
    <OrderDetailsBlock />
  ));
  ```

  ##### TS

  ```ts
  import {
    extension,
    Screen,
    Navigator,
    ScrollView,
    Text,
    Section,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.purchase.post.action.render', (root, api) => {
    const order = api.order;

    const screen = root.createComponent(Screen, {
      name: 'PostPurchaseAction',
      title: 'Post Purchase Action',
    });

    const scrollView = root.createComponent(ScrollView, {});

    const orderName = root.createComponent(Text, {}, `Order Name: ${order.name}`);
    const orderId = root.createComponent(Text, {}, `Order ID: ${order.id}`);
    const orderCustomerId = root.createComponent(
      Text,
      {},
      `Order Customer ID: ${order.customerId}`,
    );

    scrollView.append(orderName);
    scrollView.append(orderId);
    scrollView.append(orderCustomerId);

    screen.append(scrollView);

    root.append(screen);

    root.mount();
  });
  ```

## Best practices

* **Implement order-specific features:** Use the order context to enable specialized functionality like order fulfillment, customer communication, or order modification workflows.
* **Validate order access:** Verify that the order ID is valid before performing order-specific operations or external API calls.

## Limitations

* The API provides only basic order information—use Shopify APIs or external systems to fetch additional order details like line items, totals, or fulfillment status.
* Order data reflects the current POS session and may not include real-time updates from other channels until the session is refreshed.