---
title: Order details
description: 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.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/order-details
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/order-details.md
---

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

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

![Order details targets overview](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/api/pos-ui-extensions/targets-overview-images/order-details-overview-BeIPYTGu.png)

***

## Order details targets

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

### Order details block target

`pos.order-details.block.render`

Renders a custom information section within the order details screen. Use this target for displaying supplementary order data like fulfillment status, tracking numbers, or custom order analytics alongside standard order details.

Extensions at this target appear as persistent blocks within the order details interface and support interactive elements that can launch modal workflows using `shopify.action.presentModal()` for more complex order operations.

Support

Components (15)

APIs (12)

### Supported components

* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/badge)
* [Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button)
* [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/datepicker)
* [Date​Spinner](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/datespinner)
* [Heading](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/heading)
* [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/media-and-visuals/image)
* [Modal](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/modal)
* [Pos​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/posblock)
* [Pos​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/posblock)
* [Section](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/section)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/stack)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/text)
* [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/timepicker)

### Available APIs

* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/action-api)
* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/cart-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/locale-api)
* [Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/order-api)
* [Pin​Pad API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/pinpad-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/product-search-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/toast-api)

Examples

### Examples

* ####

  ##### Description

  Add a custom information section to the order details screen for displaying supplementary order data. This example shows how to create a block that provides additional order information, tracking details, or order-specific status alongside standard order details.

  ##### jsx

  ```jsx
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  const Extension = () => {
    return (
      <s-pos-block>
        <s-button
          slot="secondary-actions"
          onClick={() => shopify.action.presentModal()}
        >
          Open action
        </s-button>
        <s-text>This is a block extension</s-text>
        <s-text>Order ID: {shopify.order.id}</s-text>
      </s-pos-block>
    );
  };
  ```

### 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 `shopify.action.presentModal()` to launch the companion [modal](#order-details-action-modal-) for complete order workflows.

Support

Components (1)

APIs (12)

### Supported components

* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button)

### Available APIs

* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/action-api)
* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/cart-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/locale-api)
* [Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/order-api)
* [Pin​Pad API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/pinpad-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/product-search-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/toast-api)

Examples

### Examples

* ####

  ##### Description

  Add an interactive menu item to the order details action menu for order-specific operations. This example shows how to create a menu item that accesses order data and launches modal workflows for tasks like reprints, refunds, exchanges, or fulfillment processes.

  ##### jsx

  ```jsx
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  const Extension = () => {
    return (
      <s-button
        onClick={() => shopify.action.presentModal()}
      />
    );
  };
  ```

### Order details action (modal) target

`pos.order-details.action.render`

Renders a full-screen modal interface launched from order details [menu items](#order-details-action-menu-item-). 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 (28)

APIs (12)

### Supported components

* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/badge)
* [Banner](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/banner)
* [Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/box)
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button)
* [Choice​List](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/choicelist)
* [Clickable](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/clickable)
* [Date​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/datefield)
* [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/datepicker)
* [Date​Spinner](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/datespinner)
* [Divider](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/divider)
* [Email​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/emailfield)
* [Heading](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/heading)
* [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/media-and-visuals/image)
* [Modal](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/feedback-and-status-indicators/modal)
* [Number​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/numberfield)
* [Pos​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/posblock)
* [Page](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/page)
* [Pos​Block](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/posblock)
* [Scroll​Box](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/scrollbox)
* [Search​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/searchfield)
* [Section](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/section)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/stack)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/layout-and-structure/text)
* [Text​Area](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/textarea)
* [Text​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/textfield)
* [Time​Field](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/timefield)
* [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/forms/timepicker)

### Available APIs

* [Cart API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/cart-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/locale-api)
* [Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/order-api)
* [Pin​Pad API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/pinpad-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/product-search-api)
* [Scanner API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/scanner-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/session-api)
* [Storage API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/platform-apis/storage-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/toast-api)

Examples

### Examples

* ####

  ##### Description

  Build a full-screen modal workflow launched from an order details action menu item. This example demonstrates creating order-specific experiences with multi-step processes, forms, and order data access for operations like refund processing or fulfillment management.

  ##### jsx

  ```jsx
  import {render} from 'preact';

  export default async () => {
    render(<Extension />, document.body);
  };

  const Extension = () => {
    return (
      <s-page heading="Order Details Action">
        <s-scroll-box>
          <s-text>Order ID: {shopify.order.id}</s-text>
        </s-scroll-box>
      </s-page>
    );
  };
  ```

***

## Best practices

* **Update order information in real time:** Update displayed order information immediately when changes are made to reflect the current state, like updated fulfillment status, refreshed tracking information, and changed order notes.
* **Show clear action confirmations:** Show clear success or error messages that specify which order was affected. Use messages like "Order #1001 updated successfully," "Tracking number added to order," or "Unable to process - order not found".
* **Ensure order continuity:** Ensure that order-related changes integrate properly with the overall transaction and order lifecycle, like updated order status, applied additional discounts, and recorded fulfillment actions.
* **Handle error states gracefully:** Communicate order data limitations clearly instead of 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 clearly 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, like fulfillment status and tracking, "Priority order - expedited shipping," and payment and refund history.

***

## Limitations

* You can only render one [`Button`](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button) component for each POS UI extension using the action (menu item) target.

* Order data is read-only through the [Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/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.

***