---
title: Draft order details
description: The draft order details screen appears when merchants access saved orders, quotes, or incomplete transactions that need to be finalized later. This screen displays draft order information, customer details, and line items for sales that haven't been completed.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/draft-order-details
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/targets/draft-order-details.md
---

# Draft order details

The draft order details screen appears when merchants access saved orders, quotes, or incomplete transactions that need to be finalized later. This screen displays draft order information, customer details, and line items for sales that haven't been completed.

### Use cases

* **Order status:** Display approval requirements, processing notes, and estimated delivery dates.
* **Pricing adjustments:** Apply special pricing, bulk discounts, or approval-based modifications.
* **Order completion:** Launch fulfillment preparation and customer communication workflows.
* **Approval workflows:** Process approvals, modifications, and manager escalations.

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

***

## Draft order details targets

Use these targets for quote management, approval workflows, or integration with external systems for draft order processing and completion.

### Draft order details block target

`pos.draft-order-details.block.render`

Renders a custom information section within the draft order details screen. Use this target for displaying supplementary order information like processing status, payment status, or workflow indicators alongside standard draft order details.

Extensions at this target appear as persistent blocks within the draft order interface and support interactive elements that can launch modal workflows using `shopify.action.presentModal()` for more complex draft 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)
* [Draft Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/draft-order-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/locale-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 draft order details screen for displaying supplementary draft order data. This example shows how to create a block that provides additional draft order information, payment status, or custom order notes alongside standard draft 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>Draft Order ID for this product: {shopify.draftOrder.id}</s-text>
      </s-pos-block>
    );
  };
  ```

### Draft order details action (menu item) target

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

Renders a single interactive button component as a menu item in the draft order details action menu. Use this target for draft order-specific operations like sending invoices, updating payment status, or launching custom workflow processes for pending orders.

Extensions at this target can access draft order information including order ID, name, and associated customer through the Draft Order API. Menu items typically invoke `shopify.action.presentModal()` to launch the companion [modal](#draft-order-details-action-modal-) for complete draft 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)
* [Draft Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/draft-order-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/locale-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 draft order details action menu for draft order-specific operations. This example shows how to create a menu item that accesses draft order data and launches modal workflows for tasks like sending invoices, updating payment status, or custom workflow processes.

  ##### jsx

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

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

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

### Draft order details action (modal) target

`pos.draft-order-details.action.render`

Renders a full-screen modal interface launched from draft order details [menu items](#draft-order-details-action-menu-item-). Use this target for complex draft 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 draft order data through the Draft 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)
* [Draft Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/draft-order-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/standard-apis/locale-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 a draft order details action menu item. This example demonstrates creating draft order-specific experiences with multi-step processes, forms, and draft order data access for operations like payment processing or order modifications.

  ##### jsx

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

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

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

***

## Best practices

* **Update draft order information in real time:** Update displayed draft order information immediately when changes are made to reflect current state, like updated order status, refreshed approval state, and changed processing notes.
* **Show clear action confirmations:** Show clear success or error messages that specify which draft order was affected. Use messages like "Draft order #1001 completed successfully," "Approval request sent to manager," or "Unable to process - customer payment failed".
* **Ensure workflow continuity:** Ensure that draft order changes integrate properly with the overall order processing and fulfillment systems, like updated order status, triggered notifications, and recorded workflow steps.
* **Handle error states gracefully:** Communicate draft order processing requirements and limitations clearly. If your extension modifies draft orders or triggers processing workflows, ensure you handle state transitions responsibly, provide clear feedback about processing stages, and communicate any requirements or restrictions that affect order completion or customer communication.
* **Write clear and action-oriented labels:** Use action-oriented labels that specify what will happen to this particular draft order, with descriptive titles that clearly indicate the information type. Use "Complete order" or "Approval Status" instead of generic labels like "Order options" or "Order App."
* **Show status and order information:** Show current draft order status, relevant details, and action eligibility to support workflow decisions, like order completion status, "Ready for completion," and draft order ID and customer.

***

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

* Draft order data is read-only through the [Draft Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/target-apis/contextual-apis/draft-order-api), which provides the order ID, name, and customer ID. To access additional draft order information or modify draft orders, use external API calls or integrate with the Draft Order API through your app backend.

***