---
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-04
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/contextual-apis/order-api
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/target-apis/contextual-apis/order-api.md
---

# Order API

**Requires pos.purchase.post.action.menu-item.render:**

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 (2)

### Supported targets

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

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

  ##### Description

  Retrieve and display order information within an action modal. This example shows how to access order details like ID and line item count using \`api.data.order.initial\` in an action context, useful for building post-purchase workflows or order review interfaces.

  ##### 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 information in a block component

  ##### Description

  Display order data within a block target on the order details screen. This example demonstrates how to access and present order information like ID and line items in a block, enabling you to add custom order insights or actions directly on the order details page.

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