pos.
Target
Renders a custom section within the POS receipt footer
Note
This is part of a POS UI Extensions developer preview. More information to come.
Anchor to transactioncompletewithreprintdataTransactionCompleteWithReprintData
The data object provided to this extension target.
Anchor to connectivity
connectivity
required
Anchor to device
device
required
Anchor to locale
locale
string
required
Anchor to session
session
required
Anchor to storage
storage
required
Anchor to transaction
transaction
|
|
|
|
required
Was this section helpful?
Block
import React from 'react';
import {
reactExtension,
useApi,
POSReceiptBlock,
QRCode,
Text,
} from '@shopify/ui-extensions-react/point-of-sale';
const Block = () => {
const {transaction} = useApi<'pos.receipt-footer.block.render'>();
const qrCodeValue =
transaction.transactionType === 'Exchange'
? `exampleExchange=${encodeURIComponent(transaction.exchangeId ?? '')}`
: `exampleOrder=${encodeURIComponent(transaction.orderId ?? '')}`;
return (
<POSReceiptBlock>
<Text>{`Transaction type: ${transaction.transactionType}`}</Text>
<Text>{`Total tax (${transaction.taxTotal.currency}): ${transaction.taxTotal.amount}`}</Text>
<QRCode value={`https://www.shopify.com?${qrCodeValue}`} />
</POSReceiptBlock>
);
};
export default reactExtension('pos.receipt-footer.block.render', () => (
<Block />
));
