# QRCode

A component that renders a QR code in Shopify POS.
  > Note:
  > This is part of a POS UI Extensions developer preview. More information to come.

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

```

## QRCodeProps

### QRCodeProps

The `QRCode` component renders a QR code in Shopify POS.

### value

value: `string`

The content to be encoded in the QR code.

## Related

- [POSReceiptBlock](https://shopify.dev/docs/api/pos-ui-extensions/components/posreceiptblock)