---
title: POSReceiptBlock
description: >-
  The `POSReceiptBlock` component is part of the [POS UI extensions feature
  preview](/docs/api/feature-previews#pos-ui-extensions-preview). This feature
  preview is available on an invite-only basis and requires POS UI extensions
  version 2025-04 or 2025-07 and POS app version 9.31.0 or later.


  The `POSReceiptBlock` component groups components together for display on POS
  receipts. Use it to display text and QR codes within receipt extensions,
  providing structured content for printed or digital receipts. The component
  handles edge cases and loading states gracefully, providing clear feedback
  during operations and maintaining interface responsiveness even when
  processing intensive tasks or handling large datasets.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posreceiptblock
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/layout-and-structure/posreceiptblock.md
---

# POSReceipt​Block

The `POSReceiptBlock` component is part of the [POS UI extensions feature preview](https://shopify.dev/docs/api/feature-previews#pos-ui-extensions-preview). This feature preview is available on an invite-only basis and requires POS UI extensions version 2025-04 or 2025-07 and POS app version 9.31.0 or later.

The `POSReceiptBlock` component groups components together for display on POS receipts. Use it to display text and QR codes within receipt extensions, providing structured content for printed or digital receipts. The component handles edge cases and loading states gracefully, providing clear feedback during operations and maintaining interface responsiveness even when processing intensive tasks or handling large datasets.

### Examples

* #### Add content to a receipt

  ##### Description

  Display custom content on POS receipts using a structured block container. This example shows how to group text and QR codes within receipt extensions, providing structured content for printed or digital receipts with proper formatting and layout.

  ##### React

  ```tsx
  import React from 'react';
  import {
    POSReceiptBlock,
    QRCode,
    Text,
    reactExtension,
    useApi,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const ReceiptFooterBlock = () => {
    const api = useApi(
      'pos.receipt-footer.block.render',
    );

    return (
      <POSReceiptBlock>
        <Text>Custom receipt text</Text>
        <QRCode
          value={`https://www.shopify.com/?example=${encodeURIComponent(
            api.transaction.orderId ?? '',
          )}`}
        />
      </POSReceiptBlock>
    );
  };

  export default reactExtension(
    'pos.receipt-footer.block.render',
    () => <ReceiptFooterBlock />,
  );
  ```

  ##### TS

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

  export default extension(
    'pos.receipt-footer.block.render',
    (root, api) => {
      const block = root.createComponent(
        POSReceiptBlock,
      );
      const text = root.createComponent(
        Text,
        {},
        'Custom receipt text',
      );
      const qrCode = root.createComponent(QRCode, {
        value: `https://www.shopify.com/?example=${encodeURIComponent(
          api.transaction.orderId ?? '',
        )}`,
      });

      block.append(text);
      block.append(qrCode);
      root.append(block);
    },
  );
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-07/pos-receipt-block-default.png)

## Best practices

* **Optimize text for receipt formatting:** When using `Text` components within `POSReceiptBlock`, choose content and formatting that works well in receipt layouts. Keep text concise and ensure it remains readable when printed on receipt paper.
* **Design QR codes for easy scanning:** When including QR codes, ensure they encode useful information like store websites, feedback forms, or digital receipt access. Test QR code scanning in real-world conditions.
* **Consider both digital and print contexts:** Design your receipt block content to work effectively in both digital receipt displays and physical printed receipts. Ensure text remains legible and QR codes remain scannable across both formats.
* **Keep content focused and valuable:** Limit receipt block content to information that genuinely enhances the customer experience. Avoid cluttering receipts with excessive promotional content or information that isn't relevant to the transaction.
* **Maintain consistent receipt branding:** Use `POSReceiptBlock` consistently across your extension to create cohesive receipt experiences. Establish patterns for how you present information that customers can recognize and trust.

## Limitations

* `POSReceiptBlock` only accepts `Text` and `QRCode` components as children—other component types aren't supported to ensure receipt formatting compatibility.
* The component is designed specifically for receipt contexts—it can't be used in other POS UI extension targets or general interface layouts.
* Content styling and layout are optimized for receipt formats—custom styling that might interfere with receipt printing or digital display is not supported.
* Interactive elements beyond QR codes aren't supported—receipts are primarily informational documents rather than interactive interfaces.