Choose a version:

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

Anchor to propertiesProperties

The OrderApi object provides access to order data. Access these properties through api.order to interact with the current order context.

Anchor to id id number required: The unique identifier for the order. Use for order lookups, implementing order-specific functionality, and integrating with external systems.
Anchor to name name string required: The name of the order as configured by the merchant. Use for order identification, displays, and customer-facing interfaces.
Anchor to customerId 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

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 (

<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', () => (

));

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

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

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

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

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

Anchor to best-practicesBest 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.

Anchor to limitationsLimitations

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.

Was this page helpful?