---
title: Order API
description: The Order API provides an extension with data about the current order.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/order-api'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/order-api.md'
---

# Order APIAPIs

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

The Order API provides an extension with data about the current order.

## OrderApi

* id

  number

  required

  The unique identifier for the order

* name

  string

  required

  The name of the order

* customerId

  number

  The unique identifier of the customer associated with the order

## Examples

Examples of using the Order API

### Examples

* #### Basic usage of the Order API in an action

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

* #### Display order details in a block

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