Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

QRCode

Used to quickly access scannable data.

Support
Targets (50)

Supported targets

Anchor to ExamplesExamples

Anchor to Basic QR CodeBasic QR Code

Basic QR Code

Example

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 (
<>
<QRCode content="https://shopify.com" />

<TextBlock>
Scan to visit{' '}
<Link to="https://shopify.com">
Shopify.com
</Link>
</TextBlock>
</>
);
}
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);
});

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.

With 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.

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"
/>

<TextBlock>
Scan to visit{' '}
<Link to="https://shopify.com">
Shopify.com
</Link>
</TextBlock>
</>
);
}
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);
},
);

Anchor to 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.

Fill 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.

Fill size

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

Anchor to 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

Copying 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

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

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

Anchor to PropertiesProperties

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 them with more context.

Anchor to border
border
'base' | 'none'
Default: 'base'

The border style around the QR code.

  • base: A standard border that visually frames the QR code.
  • none: No border is rendered.
Anchor to content
content
string

The data to encode in the QR code. Accepts any string, such as a URL, email address, or plain text. Specific string formats can trigger actions on the user’s device when scanned, like opening geolocation coordinates on a map, launching an app, preparing an email, or composing a text message.

Anchor to id
id
string

A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

string

The URL of an image to display in the center of the QR code. Use this for branding or to indicate what scanning the QR code will do. By default, no image is displayed.

Anchor to onError
onError
() => void

A callback that fires when the conversion of content to a QR code fails. When an error occurs, the QR code and its child elements are not displayed. Use this to show a fallback or error state.

Anchor to size
size
'auto' | 'fill'
Default: 'auto'

The displayed size of the QR code.

  • auto: The QR code is displayed at its default size.
  • fill: The QR code takes up 100% of the available inline size and maintains a 1:1 aspect ratio.

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 buyers are familiar with.
  • Increase usability by adding a text description of what the QR code does.
  • Always provide an alternate method for buyers 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.

Anchor to RelatedRelated

ComponentClipboardItem
Was this page helpful?