---
title: QRCode
description: >-
  The `QRCode` component renders a QR code for receipts in Shopify POS. Use QR
  codes to provide quick access to digital content, enable contactless
  interactions, or share information that customers and merchants can easily
  scan with mobile devices.


  The component generates QR codes with customizable size and error correction
  levels, suitable for various use cases from customer-facing displays to
  inventory labels. It automatically handle encoding, scaling, and rendering
  optimizations to ensure reliable scanning across different lighting conditions
  and device cameras commonly found in retail environments.


  automatically select appropriate error correction levels based on QR code
  content and intended display size, balancing scanability with data density for
  reliable reading across use cases.
api_version: 2025-07
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode.md
---

# QRCode

Requires use within a `POSReceiptBlock` component

The `QRCode` component renders a QR code for receipts in Shopify POS. Use QR codes to provide quick access to digital content, enable contactless interactions, or share information that customers and merchants can easily scan with mobile devices.

The component generates QR codes with customizable size and error correction levels, suitable for various use cases from customer-facing displays to inventory labels. It automatically handle encoding, scaling, and rendering optimizations to ensure reliable scanning across different lighting conditions and device cameras commonly found in retail environments.

automatically select appropriate error correction levels based on QR code content and intended display size, balancing scanability with data density for reliable reading across use cases.

Support

Targets (2)

### Supported targets

* [pos.​receipt-footer.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/receipts#receipt-block-footer-)
* [pos.​receipt-header.​block.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-07/targets/receipts#receipt-block-header-)

#### Use cases

* **Store information:** Share store information, contact details, or business hours via QR codes.
* **Product links:** Provide links to product pages or additional product information.
* **Loyalty enrollment:** Enable contactless loyalty program enrollment or promotional content sharing.
* **Digital receipts:** Display digital receipt access or app download links.

## Examples

### Display a QR code on a receipt

Render QR codes on receipts for quick access to digital content or contactless interactions. This example demonstrates generating QR codes with customizable size and error correction levels, enabling customers to easily scan information from printed or digital receipts.

### Examples

* #### Display a QR code on a receipt

  ##### Description

  Render QR codes on receipts for quick access to digital content or contactless interactions. This example demonstrates generating QR codes with customizable size and error correction levels, enabling customers to easily scan information from printed or digital receipts.

  ##### React

  ```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

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

## Properties

Configure the following properties on the `QRCode` component.

* value

  string

  required

  The content to be encoded in the QR code. Can be any string such as a URL, email address, plain text, phone number, or formatted data. Specific string formatting can trigger actions on the user's device when scanned, like opening apps, preparing messages, or navigating to locations.

## Best practices

* **Keep content concise and scannable:** QR codes become more complex and harder to scan with longer content. Keep encoded strings as short as possible while maintaining functionality. Use URL shorteners for long links or consider alternative approaches for extensive data.
* **Test QR code scannability:** Verify that generated QR codes scan correctly across different devices and QR code reader apps. Test in various lighting conditions and at different distances.
* **Provide context and instructions:** Include clear text near QR codes explaining what users can expect when they scan. For example, "Scan for store Wi-Fi access" or "Scan to view product details online." This helps users understand the value and builds confidence in scanning.
* **Consider placement and visibility:** Position QR codes where they're easily visible to customers. Ensure adequate contrast, appropriate sizing, and clear space around the code. Avoid placing QR codes in areas where they might be obscured or difficult to scan.

## Limitations

* QR codes are display-only components and don't support click events or interactive behaviors—they rely on external scanning devices for interaction.
* QR code scanning depends on user devices and apps—not all users may have QR code scanning capabilities readily available.
* The `QRCode` component must be wrapped in a `POSReceiptBlock` component to be displayed on a receipt.