# POSReceiptBlock

A component used to group other components together for display on POS receipts.
  > Note:
  > This is part of a POS UI Extensions developer preview. More information to come.
  >
  > This component only accepts `Text` and `QRCode` components as children.

```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
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);
  },
);

```