Migrate to the Polaris QR code component

The Polaris QR code component renders a scannable QR code that encodes a URL or other content. It replaces the previous QRCode component and is available as <s-qr-code> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris QR code component.

Anchor to sizesize

The size prop values have changed, and the default has been renamed.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-qr-code
      content="https://shopify.com"
      size="base"
      accessibilityLabel="Visit our store"
    ></s-qr-code>
  );
}

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

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

function Extension() {
  return (
    <QRCode
      content="https://shopify.com"
      size="auto"
      accessibilityLabel="Visit our store"
    />
  );
}

Anchor to onErroronError

The previous QRCode onError prop still uses onError in Preact, but it now handles the error event. The handler now receives an Event instead of being called with no arguments.