POSReceiptBlock

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

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