---
title: pos.exchange.post.block.render
description: >-
  Renders a custom information section within the post-exchange screen. Use this
  target for displaying supplementary exchange data like completion status,
  payment adjustments, or follow-up workflows alongside standard exchange
  details.


  Extensions at this target appear as persistent blocks within the post-exchange
  interface and support interactive elements that can launch modal workflows
  using `api.action.presentModal()` for more complex post-exchange operations.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/post-exchange/pos-exchange-post-block-render
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/post-exchange/pos-exchange-post-block-render.md
---

# pos.​exchange.​post.​block.​render

Renders a custom information section within the post-exchange screen. Use this target for displaying supplementary exchange data like completion status, payment adjustments, or follow-up workflows alongside standard exchange details.

Extensions at this target appear as persistent blocks within the post-exchange interface and support interactive elements that can launch modal workflows using `api.action.presentModal()` for more complex post-exchange operations.

### Examples

* #### Add a post-exchange block

  ##### Description

  Display custom information within the post-exchange screen as a persistent block. This example shows how to create blocks that show supplementary exchange data like completion status, payment adjustments, or follow-up workflows with interactive elements.

  ##### React

  ```tsx
  import React from 'react';

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

  const ExchangeBlock = () => {
    const api = useApi<'pos.exchange.post.block.render'>();
    return (
      <POSBlock
        action={{
          title: 'View exchange details',
          onPress: api.action.presentModal,
        }}
      >
        <POSBlockRow>
          <Text>{'Exchange block extension'}</Text>
          <Text>{`Order ID: ${api.order.id}`}</Text>
        </POSBlockRow>
      </POSBlock>
    );
  };

  export default reactExtension('pos.exchange.post.block.render', () => (
    <ExchangeBlock />
  ));
  ```

  ##### TS

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

  export default extension('pos.exchange.post.block.render', (root, api) => {
    const block = root.createComponent(POSBlock, {
      action: {title: 'View exchange details', onPress: api.action.presentModal},
    });

    const mainText = root.createComponent(Text);
    mainText.append('Exchange 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);
  });
  ```