QRCodecomponent
component
Requires use within a
POSReceiptBlock componentA component that renders a QR code in Shopify POS.
Note
This is part of a POS UI Extensions developer preview. More information to come.
Anchor to qrcodepropsQRCodeProps
Anchor to value
value
string
required
The content to be encoded in the QR code.
Was this section helpful?
Render a QRCode in POS receipts
import React from 'react';
import {
POSReceiptBlock,
QRCode,
reactExtension,
useApi,
} from '@shopify/ui-extensions-react/point-of-sale';
const ReceiptFooterWithQRCodeBlock = () => {
const api = useApi(
'pos.receipt-footer.block.render',
);
return (
<POSReceiptBlock>
<QRCode
value={`https://shopify.com?example=${encodeURIComponent(
api.transaction.orderId ?? '',
)}`}
/>
</POSReceiptBlock>
);
};
export default reactExtension(
'pos.receipt-footer.block.render',
() => <ReceiptFooterWithQRCodeBlock />,
);
