---
title: QRCode
description: Used to quickly access scannable data.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/other/qrcode
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/other/qrcode.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04-rc/upgrading-to-2026-04) to upgrade your extension.

# QRCode

Used to quickly access scannable data.

### Support Targets (50)

### Supported targets

* Checkout::Actions::Render​Before
* Checkout::Cart​Line​Details::Render​After
* Checkout::Cart​Lines::Render​After
* Checkout::Contact::Render​After
* Checkout::Customer​Information::Render​After
* Checkout::Delivery​Address::Render​Before
* Checkout::Dynamic::Render
* Checkout::Pickup​Locations::Render​After
* Checkout::Pickup​Locations::Render​Before
* Checkout::Pickup​Points::Render​After
* Checkout::Pickup​Points::Render​Before
* Checkout::Reductions::Render​After
* Checkout::Reductions::Render​Before
* Checkout::Shipping​Method​Details::Render​After
* Checkout::Shipping​Method​Details::Render​Expanded
* Checkout::Shipping​Methods::Render​After
* Checkout::Shipping​Methods::Render​Before
* Checkout::Thank​You::Cart​Line​Details::Render​After
* Checkout::Thank​You::Cart​Lines::Render​After
* Checkout::Thank​You::Customer​Information::Render​After
* Checkout::Thank​You::Dynamic::Render
* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## QRCodeProps

* **accessibilityLabel**

  **string**

  **Default: 'QR code' (translated to the user’s locale)**

  A label that describes the purpose or contents of the QR code. When set, it will be announced to users using assistive technologies and will provide more context about what the QR code may do when scanned.

* **border**

  **'base' | 'none'**

  **Default: 'base'**

  Adjust the border style.

* **content**

  **string**

  The content to be encoded in the QR code, which can be any string such as a URL, email address, plain text, etc. Specific string formatting can trigger actions on the user’s device when scanned, like opening geolocation coordinates on a map, opening a preferred app or app store entry, preparing an email, text message, and more.

* **id**

  **string**

  A unique identifier for the component.

* **logo**

  **string**

  URL of an image to be displayed in the center of the QR code. This is useful for branding or to indicate to the user what scanning the QR code will do. By default, no image is displayed.

* **onError**

  **() => void**

  Invoked when the conversion of `content` to a QR code fails. If an error occurs, the QR code and its child elements will not be displayed.

* **size**

  **'auto' | 'fill'**

  **Default: 'auto'**

  The displayed size of the QR code.

  `fill`: the QR code will takes up 100% of the available inline-size and maintain a 1:1 aspect ratio.

  `auto`: the QR code will be displayed at its default size.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-01/qrcode-default-B8Ik8Yjd.png)

### Examples

* #### Basic QR Code

  ##### React

  ```tsx
  import {
    reactExtension,
    Link,
    QRCode,
    TextBlock,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <>
        <QRCode content="https://shopify.com" />

        <TextBlock>
          Scan to visit{' '}
          <Link to="https://shopify.com">
            Shopify.com
          </Link>
        </TextBlock>
      </>
    );
  }
  ```

  ##### JS

  ```js
  import {
    extension,
    Link,
    QRCode,
    TextBlock,
  } from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const qrCode = root.createComponent(QRCode, {
      content: 'https://shopify.com',
    });

    const textBlock = root.createComponent(TextBlock, null, [
      'Scan to visit ',
      root.createComponent(Link, {to: 'https://shopify.com'}, 'Shopify.com'),
    ]);

    root.appendChild(qrCode);
    root.appendChild(textBlock);
  });
  ```

* #### With logo

  ##### Description

  The QRCode component can display an image in the center. Adding a logo can increase brand trust and set expectations for the action when scanning.

  ##### React

  ```jsx
  import {
    reactExtension,
    Link,
    QRCode,
    TextBlock,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <>
        <QRCode
          content="https://shopify.com"
          logo="https://cdn.shopify.com/YOUR_IMAGE_HERE"
        />

        <TextBlock>
          Scan to visit{' '}
          <Link to="https://shopify.com">
            Shopify.com
          </Link>
        </TextBlock>
      </>
    );
  }
  ```

  ##### JavaScript

  ```js
  import {
    extension,
    QRCode,
    TextBlock,
    Link,
  } from '@shopify/ui-extensions/checkout';

  export default extension(
    'purchase.checkout.block.render',
    (root) => {
      const qrCode = root.createComponent(QRCode, {
        content: 'https://shopify.com',
        logo: 'https://cdn.shopify.com/YOUR_IMAGE_HERE',
      });

      const textBlock = root.createComponent(
        TextBlock,
        null,
        [
          'Scan to visit ',
          root.createComponent(
            Link,
            {to: 'https://shopify.com'},
            'Shopify.com',
          ),
        ],
      );

      root.appendChild(qrCode);
      root.appendChild(textBlock);
    },
  );
  ```

* #### Fill size

  ##### Description

  In most cases the default size should work well. If you need a different size, use \`fill\` to make it grow to the size of its parent container.

  ##### React

  ```jsx
  import {
    reactExtension,
    QRCode,
    View,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <View maxInlineSize={300}>
        <QRCode
          content="https://shopify.com"
          size="fill"
        />
      </View>
    );
  }
  ```

  ##### JavaScript

  ```js
  import {
    extension,
    View,
    QRCode,
  } from '@shopify/ui-extensions/checkout';

  export default extension(
    'purchase.checkout.block.render',
    (root) => {
      const view = root.createComponent(View, {
        maxInlineSize: 300,
      });

      const qrCode = root.createComponent(QRCode, {
        content: 'https://shopify.com',
        size: 'fill',
      });

      view.appendChild(qrCode);
      root.appendChild(view);
    },
  );
  ```

* #### Copying content of a QR code to the user's clipboard

  ##### Description

  When displaying a QR code, include an alternative way for the user to get the content

  ##### React

  ```jsx
  import {
    reactExtension,
    BlockStack,
    Button,
    ClipboardItem,
    QRCode,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    const bitcoinAddress =
      '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd';

    return (
      <BlockStack maxInlineSize={200}>
        <QRCode
          size="fill"
          content={`bitcoin:${bitcoinAddress}`}
        />
        <Button activateTarget="bitcoin-address">
          Copy Bitcoin address
        </Button>
        <ClipboardItem
          text={bitcoinAddress}
          id="bitcoin-address"
        />
      </BlockStack>
    );
  }
  ```

  ##### JavaScript

  ```js
  import {
    extension,
    BlockStack,
    Button,
    ClipboardItem,
    QRCode,
  } from '@shopify/ui-extensions/checkout';

  export default extension(
    'purchase.checkout.block.render',
    (root) => {
      const bitcoinAddress =
        '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd';
      const qrCodeContent = `bitcoin:${bitcoinAddress}`;

      const qrCode = root.createComponent(QRCode, {
        content: qrCodeContent,
        size: 'fill',
      });

      const clipboardItem = root.createComponent(
        ClipboardItem,
        {
          text: bitcoinAddress,
          id: 'bitcoin-address',
        },
      );

      const button = root.createComponent(
        Button,
        {
          activateTarget: 'bitcoin-address',
        },
        'Copy Bitcoin address',
      );

      const blockStack = root.createComponent(
        BlockStack,
        {
          maxInlineSize: 200,
        },
      );

      blockStack.appendChild(qrCode);
      blockStack.appendChild(button);
      blockStack.appendChild(clipboardItem);

      root.appendChild(blockStack);
    },
  );
  ```

## Best Practices

* Always test that the QR code is scannable from a smartphone.

* Include a square logo if that’s what your customers are familiar with.

* Increase usability by adding a text description of what the QR code does.

* Always provide an alternate method for customers to access the content of the QR code.

  * If the content is a URL, provide a [`Link`](https://shopify.dev/docs/api/checkout-ui-extensions/components/link) nearby.
  * If the content is data, provide a [`Button`](https://shopify.dev/docs/api/checkout-ui-extensions/components/button) to copy the data to the clipboard, or show the data in a readonly [`TextField`](https://shopify.dev/docs/api/checkout-ui-extensions/components/textfield).

## Related

[Component - ClipboardItem](clipboarditem)