---
title: pos.draft-order-details.block.render
description: >-
  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 `api.action.presentModal()` for more complex draft order operations.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/draft-order-details/pos-draft-order-details-block-render
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/draft-order-details/pos-draft-order-details-block-render.md
---

# 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 `api.action.presentModal()` for more complex draft order operations.

### Examples

* #### Add a draft order details block

  ##### Description

  Display custom information within the draft order details screen as a persistent block. This example shows how to create blocks that show supplementary order information like processing status, payment status, or workflow indicators with interactive elements.

  ##### React

  ```tsx
  import React from 'react';

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

  const Block = () => {
    const api = useApi<'pos.draft-order-details.block.render'>();
    return (
      <POSBlock action={{title: 'Open action', onPress: api.action.presentModal}}>
        <POSBlockRow>
          <Text>{'This is a block extension'}</Text>
          <Text>{`Draft Order ID for this product: ${api.draftOrder.id}`}</Text>
        </POSBlockRow>
      </POSBlock>
    );
  };

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

  ##### TS

  ```ts
  import {
    POSBlock,
    Text,
    POSBlockRow,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension('pos.draft-order-details.block.render', (root, api) => {
    const block = root.createComponent(POSBlock, {
      action: {title: 'Open action', onPress: api.action.presentModal},
    });

    const mainText = root.createComponent(Text);
    mainText.append('This is a block extension');

    const subtitleText = root.createComponent(Text);
    subtitleText.append(`Order ID for this product: ${api.draftOrder.id}`);

    const blockMainRow = root.createComponent(POSBlockRow);
    blockMainRow.append(mainText);

    const blockSubtitleRow = root.createComponent(POSBlockRow);
    blockSubtitleRow.append(subtitleText);
    block.append(blockMainRow);
    block.append(blockSubtitleRow);

    root.append(block);
  });
  ```