--- title: QRCode description: Used to quickly access scannable data. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/qrcode md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/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/customer-account-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/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # QRCode Used to quickly access scannable data. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * customer-account.​footer.​render-after * customer-account.​order-index.​announcement.​render * customer-account.​order-index.​block.​render * customer-account.​order-status.​announcement.​render * customer-account.​order-status.​block.​render * customer-account.​order-status.​cart-line-item.​render-after * customer-account.​order-status.​cart-line-list.​render-after * customer-account.​order-status.​customer-information.​render-after * customer-account.​order-status.​fulfillment-details.​render-after * customer-account.​order-status.​payment-details.​render-after * customer-account.​order-status.​return-details.​render-after * customer-account.​order-status.​unfulfilled-items.​render-after * customer-account.​order.​action.​menu-item.​render * customer-account.​order.​action.​render * customer-account.​order.​page.​render * customer-account.​page.​render * customer-account.​profile.​addresses.​render-after * customer-account.​profile.​announcement.​render * customer-account.​profile.​block.​render * customer-account.​profile.​company-details.​render-after * customer-account.​profile.​company-location-addresses.​render-after * customer-account.​profile.​company-location-payment.​render-after * customer-account.​profile.​company-location-staff.​render-after * customer-account.​profile.​payment.​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 them with more context. * **border** **Extract\** **Default: 'base'** The border style around the QR code. * `base`: A standard border that visually frames the QR code. * `none`: No border is rendered. * **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. * **id** **string** A unique identifier for the component. * **logo** **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. * **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. * **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. ### BorderStyle A keyword that maps to a predefined border style from the design system. - \`base\`: A solid border line, suitable for most use cases. - \`dashed\`: A dashed border line, often used for drop zones or placeholder boundaries. - \`dotted\`: A dotted border line. - \`none\`: No border is rendered. ```ts 'base' | 'dashed' | 'dotted' | 'none' ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/qrcode-default-B8Ik8Yjd.png) ### Examples * #### Basic QR Code ##### React ```tsx import { reactExtension, Link, QRCode, TextBlock, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( <> Scan to visit{' '} Shopify.com ); } ``` ##### JS ```js import { extension, Link, QRCode, TextBlock, } from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.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', () => , ); function Extension() { return ( <> Scan to visit{' '} Shopify.com ); } ``` ##### 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', () => , ); function Extension() { return ( ); } ``` ##### 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', () => , ); function Extension() { const bitcoinAddress = '14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd'; return ( ); } ``` ##### 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)