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 valuevaluestringrequired
The content to be encoded in the QR code.
QRCodeProps
The `QRCode` component renders a QR code in Shopify POS.
- value
The content to be encoded in the QR code.
string
export interface QRCodeProps {
/**
* The content to be encoded in the QR code.
*/
value: string;
}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 />,
);
examples
Render a QRCode in POS receipts
React
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 />, );TS
import { POSReceiptBlock, QRCode, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.receipt-footer.block.render', (root, api) => { const block = root.createComponent( POSReceiptBlock, ); const qrCode = root.createComponent(QRCode, { value: `https://shopify.com?example=${encodeURIComponent( api.transaction.orderId ?? '', )}`, }); block.append(qrCode); root.append(block); }, );
