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 />,
);
Preview
