---
title: Draft Order API
description: >-
  The Draft Order API provides read-only access to draft order data. Use this
  API to get draft order information and build contextual experiences based on
  the selected draft order context. The API offers draft order details for
  implementing order-specific functionality and workflows.
api_version: 2024-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/target-apis/contextual-apis/draft-order-api
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/target-apis/contextual-apis/draft-order-api.md
---

# Draft Order API

The Draft Order API provides read-only access to draft order data. Use this API to get draft order information and build contextual experiences based on the selected draft order context. The API offers draft order details for implementing order-specific functionality and workflows.

## DraftOrderApi

The `DraftOrderApi` object provides access to draft order data. Access this property through `api.draftOrder` to interact with the current draft order context.

* id

  number

  required

  The unique identifier for the draft order. Use for draft order lookups, implementing order-specific functionality, and integrating with external systems.

* name

  string

  required

  The name of the draft order as configured by the merchant. Use for draft order identification, displays, and customer-facing interfaces.

* customerId

  number

  The unique identifier of the customer associated with the draft order. Returns `undefined` if no customer is associated. Use for customer-specific functionality and personalized experiences.

## Best practices

* **Implement draft order-specific features:** Use the draft order context to enable specialized functionality like draft order conversion, customer assignment, or order modification workflows.
* **Validate draft order access:** Verify that the draft order ID is valid before performing draft order-specific operations or external API calls.

## Limitations

* The API provides only basic draft order information—use Shopify APIs or external systems to fetch additional draft order details like line items, totals, or timestamps.
* Draft order data reflects the current POS session and may not include real-time updates from other channels until the session is refreshed.

## Examples

Learn how to access draft order information and build contextual experiences for draft order workflows.

### Examples

* #### Get the current draft order ID

  ##### Description

  Retrieve the unique identifier of the draft order currently associated with the extension's context. This example shows how to access the draft order ID from draft order detail screens, enabling you to fetch additional order data, implement custom workflows, or integrate with external systems.

  ##### React

  ```tsx
  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.draftOrder.id}`}</Text>
          </ScrollView>
        </Screen>
      </Navigator>
    );
  };

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

  ##### TS

  ```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.draftOrder.id}`);
      scrollView.append(text);
      screen.append(scrollView);
      navigator.append(screen);
      root.append(navigator);
    },
  );
  ```