POSReceiptBlock

Anchor to ExamplesExamples

Anchor to Add content to a receiptAdd content to a receipt

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.

Add content to a receipt

Add content to a receipt

ReactTS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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 />,

);

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

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

},

);

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

Anchor to Best practicesBest 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.

Anchor to LimitationsLimitations

• 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.