---
title: pos.purchase.post.block.render
description: |-
  Renders a custom information section within the post-purchase screen. Use this target for displaying supplementary purchase data like completion status, customer feedback prompts, or next-step workflows alongside standard purchase details.

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

# pos.​purchase.​post.​block.​render

Renders a custom information section within the post-purchase screen. Use this target for displaying supplementary purchase data like completion status, customer feedback prompts, or next-step workflows alongside standard purchase details.

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

Support

Components (11)

APIs (9)

### Supported components

* [Badge](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/feedback-and-status-indicators/badge)
* [Button](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/actions/button)
* [Date​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/forms/datepicker)
* [Dialog](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/feedback-and-status-indicators/dialog)
* [Icon](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/media-and-visuals/icon)
* [Image](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/media-and-visuals/image)
* [POSBlock](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/layout-and-structure/posblock)
* [POSBlock​Row](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/layout-and-structure/posblockrow)
* [Stack](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/layout-and-structure/stack)
* [Text](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/layout-and-structure/text)
* [Time​Picker](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/ui-components/forms/timepicker)

### Available APIs

* [Action API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/standard-apis/action-api)
* [Connectivity API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/platform-apis/connectivity-api)
* [Device API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/platform-apis/device-api)
* [Locale API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/standard-apis/locale-api)
* [Order API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/contextual-apis/order-api)
* [Print API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/platform-apis/print-api)
* [Product Search API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/standard-apis/product-search-api)
* [Session API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/standard-apis/session-api)
* [Toast API](https://shopify.dev/docs/api/pos-ui-extensions/2025-01/target-apis/standard-apis/toast-api)

Examples

### Examples

* #### Add a post-purchase block

  ##### Description

  Display custom information within the post-purchase screen as a persistent block. This example shows how to create blocks that show supplementary purchase data like completion status, customer feedback prompts, or next-step workflows 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.purchase.post.block.render'>();
    return (
      <POSBlock action={{title: 'Open action', onPress: api.action.presentModal}}>
        <POSBlockRow>
          <Text>{'This is a block extension'}</Text>
          <Text>{`Order ID for complete checkout: ${api.order.id}`}</Text>
        </POSBlockRow>
      </POSBlock>
    );
  };

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

  ##### TS

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

  export default extension('pos.purchase.post.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 complete checkout: ${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);
  });
  ```