POSReceipt
component
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 components as children.
Was this section helpful?
Render a POSReceiptBlock in POS receipts
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 />,
);
examples
Render a POSReceiptBlock in POS receipts
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); }, );
Preview
