Choose a version:

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.

Anchor to Use casesUse 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.

Anchor to Draft order details targetsDraft order details targets

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

Anchor to Draft order details action (menu item) ,[object Object]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 api.action.presentModal() to launch the companion modal for complete draft 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.draft-order-details.action.menu-item.render'>();

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

};

export default reactExtension(

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

() => <ActionItemComponent />,

);

Examples

Show a draft order action menu item

Description

Create an action menu item on draft order detail screens. This example demonstrates rendering a button in the draft order action menu for operations like sending invoices, updating payment status, or launching custom workflows for pending orders.

React

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

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

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

TS

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

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

    root.append(actionItem);
  },
);

Anchor to Draft order details action (modal) ,[object Object]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. 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 (30)

APIs (10)

Examples

import React from 'react';

import {

Text,

Screen,

ScrollView,

Navigator,

reactExtension,

useApi,

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

const Modal = () => {

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

return (

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

</ScrollView>

</Screen>

</Navigator>

);

};

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

));

Examples

Show a draft order action modal

Description

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

React

import React from 'react';

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

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

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

TS

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

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

    text.append(`ID for current draft 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 draft order was affected and what change was made. Use messages like "Draft order #1001 completed successfully," "Approval request sent to manager," or "Unable to process - customer payment failed" to provide immediate feedback.
Ensure workflow continuity: Ensure that draft order changes integrate properly with the overall order processing and fulfillment systems, such as 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 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, such as order completion status, "Ready for completion," and draft order ID and customer.

Anchor to LimitationsLimitations

You can only render one Button component for each POS UI extension using the action (menu item) target.
Draft order data is read-only through the 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.

Was this page helpful?