QRCode

component

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);
    },
  );