---
title: QR code
description: Displays a scannable QR code representing data such as URLs or text. Use to let users quickly access information by scanning with a smartphone or other device.
api_version: 2026-04
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/qr-code
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/qr-code.md
---

# QR code

Displays a scannable QR code representing data such as URLs or text. Use to let users quickly access information by scanning with a smartphone or other device.

### Support Targets (29)

### Supported targets

* 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

## Properties

* **accessibilityLabel**

  **string**

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

  A label that describes the purpose or contents of the QR code for accessibility. When set, it will be announced to users using assistive technologies such as screen readers.

* **border**

  **'base' | 'none'**

  **Default: 'base'**

  Whether to display a border around the QR code.

  * `'base'`: Applies a standard border to frame the QR code.
  * `'none'`: Removes the border for seamless integration with the surrounding layout.

* **content**

  **string**

  The content to be encoded in the QR code, such as a URL, email address, or plain text. When scanned, the user's device will process this content — typically by opening a URL in a browser or prompting an action based on the content type.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

* **logo**

  **string**

  The URL of an image to display in the center of the QR code, typically used for branding. The image should be small enough not to interfere with the QR code's scannability.

* **onError**

  **(event: Event) => void**

  A callback fired when the conversion of `content` to a QR code fails. This can happen when the content is too long or contains unsupported characters.

* **size**

  **'base' | 'fill'**

  **Default: 'base'**

  The displayed size of the QR code.

  * `'base'`: The QR code is displayed at its default fixed size.
  * `'fill'`: The QR code takes up 100% of the available inline size, useful for responsive layouts.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/using-polaris-components#event-handling).

* **error**

  **CallbackEventListener\<typeof tagName>**

  A callback that's fired when the conversion of `content` to a QR code fails.

### CallbackEventListener

An event listener typed to a specific HTML element, with a strongly typed \`currentTarget\`.

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

A callback event typed to a specific HTML element, with a strongly typed \`currentTarget\`.

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/qr-code-default-WBrmncO_.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-qr-code content="https://shopify.com"></s-qr-code>
  <s-paragraph>
    Scan to visit <s-link href="https://shopify.com">Shopify.com</s-link>
  </s-paragraph>
  ```

## 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 [`s-link`](https://shopify.dev/docs/api/checkout-ui-extensions/components/link) nearby.
* If the content is data, provide a [`s-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 [`s-text-field`](https://shopify.dev/docs/api/checkout-ui-extensions/components/textfield).