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

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

### Examples

* #### Add an order details block

  ##### Description

  Display custom information within the order details screen as a persistent block. This example shows how to create blocks that show supplementary order data like fulfillment status, tracking numbers, or custom analytics with interactive elements that can launch modal workflows.

  ##### 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.order-details.block.render'>();
    return (
      <POSBlock action={{title: 'Open action', onPress: api.action.presentModal}}>
        <POSBlockRow>
          <Text>{'This is a block extension'}</Text>
          <Text>{`Order ID: ${api.order.id}`}</Text>
        </POSBlockRow>
      </POSBlock>
    );
  };

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

  ##### TS

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

  export default extension('pos.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: ${api.order.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);
  });
  ```