Choose a version:

QRCode

Used to quickly access scannable data.

Anchor to qrcodepropsQRCodeProps

Anchor to accessibilityLabel 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.
Anchor to border border Extract<, 'none' | 'base'> Default: 'base': Adjust the border style.
Anchor to content 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.
Anchor to id id string: A unique identifier for the component.
Anchor to logo 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.
Anchor to onError 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.
Anchor to size 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.

QRCodeProps

accessibilityLabel
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.
```
string
```
border
Adjust the border style.
```
Extract<BorderStyle, 'none' | 'base'>
```
content
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.
```
string
```
id
A unique identifier for the component.
```
string
```
logo
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.
```
string
```
onError
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.
```
() => void
```
size
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.
```
'auto' | 'fill'
```

export interface QRCodeProps extends IdProps {
  /**
   * 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.
   */
  content?: 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.
   */
  logo?: string;

  /**
   * 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.
   *
   * @default 'auto'
   */
  size?: 'auto' | 'fill';

  /**
   * Adjust the border style.
   *
   * @default 'base'
   */
  border?: Extract<BorderStyle, 'none' | 'base'>;

  /**
   * 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.
   *
   * @default 'QR code' (translated to the user’s locale)
   */
  accessibilityLabel?: string;

  /**
   * 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.
   */
  onError?: () => void;
}

BorderStyle

'base' | 'dashed' | 'dotted' | 'none'

Was this section helpful?

Basic QR Code

import {

reactExtension,

Link,

QRCode,

TextBlock,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

Scan to visit{' '}

Shopify.com

</Link>

</TextBlock>

</>

);

}

examples

Basic QR Code

React

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

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

Preview

Anchor to best-practicesBest 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 nearby.
- If the content is data, provide a Button to copy the data to the clipboard, or show the data in a readonly TextField.

Was this section helpful?

Anchor to examplesExamples

Anchor to example-with-logoWith logo

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.

Anchor to example-fill-sizeFill size

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.

Anchor to example-copying-content-of-a-qr-code-to-the-user's-clipboardCopying content of a QR code to the user's clipboard

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

Was this section helpful?

With logo

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"

Scan to visit{' '}

Shopify.com

</Link>

</TextBlock>

</>

);

}

examples

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

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

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

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

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

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

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

Preview

Anchor to relatedRelated

ComponentClipboardItem