Choose a version:

Order details

The order details screen appears when merchants access a completed transaction for customer service, refunds, or order fulfillment tasks. This screen displays transaction information including customer details, payment data, line items, and fulfillment status for completed sales.

Anchor to Use casesUse cases

Fulfillment tracking: Display status, tracking numbers, and special handling instructions.
Order processing: Launch workflows for gift wrapping, packaging, or delivery scheduling.
Order modifications: Adjust line items, apply discounts, or update customer information.
Post-sale actions: Process reprints, refunds, exchanges, or customer communications.

Anchor to Order details targetsOrder details targets

Use these targets for order management capabilities, fulfillment workflows, or tools for order processing and analysis during transactions.

Anchor to Order details action (menu item) ,[object Object]Order details action (menu item) target

pos.order-details.action.menu-item.render

Renders a single interactive button component as a menu item in the order details action menu. Use this target for order-specific operations like reprints, refunds, exchanges, or launching fulfillment workflows.

Extensions at this target can access the order identifier through the Order API to perform order-specific operations. Menu items typically invoke api.action.presentModal() to launch the companion modal for complete order workflows.

Support

Components (1)

APIs (9)

Supported components

ActionItem

Available APIs

Examples

import React from 'react';

import {

reactExtension,

ActionItem,

useApi,

} from '@shopify/ui-extensions-react/point-of-sale';

const ActionItemComponent = () => {

const api = useApi<'pos.order-details.action.menu-item.render'>();

return <ActionItem enabled onPress={() => api.action.presentModal()} />;

};

export default reactExtension(

'pos.order-details.action.menu-item.render',

() => <ActionItemComponent />,

);

Examples

Show an order action menu item

Description

Create an action menu item on order detail screens. This example demonstrates rendering a button in the order action menu for operations like printing receipts, processing refunds, handling exchanges, or launching fulfillment workflows.

React

import React from 'react';
import {
  reactExtension,
  ActionItem,
  useApi,
} from '@shopify/ui-extensions-react/point-of-sale';

const ActionItemComponent = () => {
  const api = useApi<'pos.order-details.action.menu-item.render'>();
  return <ActionItem enabled onPress={() => api.action.presentModal()} />;
};

export default reactExtension(
  'pos.order-details.action.menu-item.render',
  () => <ActionItemComponent />,
);

TS

import {ActionItem, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.order-details.action.menu-item.render',
  (root, api) => {
    const actionItem = root.createComponent(ActionItem, {
      onPress: () => api.action.presentModal(),
      enabled: true,
    });

    root.append(actionItem);
  },
);

Anchor to Order details action (modal) ,[object Object]Order details action (modal) target

pos.order-details.action.render

Renders a full-screen modal interface launched from order details menu items. Use this target for complex order workflows that require forms, multi-step processes, or detailed information displays beyond what a simple button can provide.

Extensions at this target have access to order data through the Order API and support workflows with multiple screens, navigation, and interactive components.

Support

Components (30)

APIs (10)

Examples

import React from 'react';

import {

Text,

Screen,

ScrollView,

useApi,

Navigator,

reactExtension,

} from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {

const api = useApi<'pos.order-details.action.render'>();

return (

<Text>{`Order ID: ${api.order.id}`}</Text>

</ScrollView>

</Screen>

</Navigator>

);

};

export default reactExtension('pos.order-details.action.render', () => (

));

Examples

Show an order action modal

Description

Create a full-screen modal for order workflows launched from order details menu items. This example shows how to build complex order operations with forms, multi-step processes, and access to order data through the Order API.

React

import React from 'react';

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

const Modal = () => {
  const api = useApi<'pos.order-details.action.render'>();
  return (
    <Navigator>
      <Screen name="OrderDetailsAction" title="Order Details Action">
        <ScrollView>
          <Text>{`Order ID: ${api.order.id}`}</Text>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension('pos.order-details.action.render', () => (
  <Modal />
));

TS

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

export default extension('pos.order-details.action.render', (root, api) => {
  const navigator = root.createComponent(Navigator);
  const screen = root.createComponent(Screen, {
    name: 'OrderDetailsAction',
    title: 'Order Details Action',
  });
  const scrollView = root.createComponent(ScrollView);
  const text = root.createComponent(Text);

  text.append(`ID for current order screen: ${api.order.id}`);
  scrollView.append(text);
  screen.append(scrollView);
  navigator.append(screen);
  root.append(navigator);
});

Anchor to Best practicesBest practices

Show clear action confirmations: Show clear success or error messages that specify which order was affected and what change was made. Use messages like "Order #1001 updated successfully," "Tracking number added to order," or "Unable to process - order not found" to provide immediate feedback.
Ensure order continuity: Ensure that order-related changes integrate properly with the overall transaction and order lifecycle, such as updated order status, applied additional discounts, and recorded fulfillment actions.
Handle error states gracefully: Communicate order data limitations clearly rather than showing generic error messages. If your extension accesses or modifies order information, ensure you handle data responsibly, display only necessary information, and provide clear messaging about any data collection, processing, or sharing that occurs through your extension functionality.
Write clear and action-oriented labels: Use action-oriented labels that specify what will happen for this particular order, with descriptive titles that indicate the information type. Use "Add tracking number" or "Fulfillment Status" instead of generic labels like "Order options" or "Order App."
Show status and contextual data: Show current order status, relevant metrics, and action eligibility to support fulfillment decisions, such as fulfillment status and tracking, "Priority order - expedited shipping," and payment and refund history.

Anchor to LimitationsLimitations

You can only render one Button component for each POS UI extension using the action (menu item) target.
Order data is read-only through the Order API, which provides only the order ID, name, and customer ID. To access additional order information or modify order data, use external API calls or integrate with the Admin API through your app backend.

Was this page helpful?