QRCode

Used to quickly access scannable data.

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

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

export default extension('purchase.checkout.block.render', (root) => {
  const qrCode = root.createComponent(QRCode, {
    content: 'https://shopify.com',
  });

  root.appendChild(qrCode);
});

QRCodeProps

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.

border

Adjust the border style.

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.

id

A unique identifier for the component.

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.

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.

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.

BorderStyle

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

Examples

Used to quickly access scannable data.

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.

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"
      logo="https://cdn.shopify.com/YOUR_IMAGE_HERE"
    />
  );
}

import {
  extension,
  QRCode,
} 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',
    });

    root.appendChild(qrCode);
  },
);

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"
      logo="https://cdn.shopify.com/YOUR_IMAGE_HERE"
    />
  );
}

import {
  extension,
  QRCode,
} 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',
    });

    root.appendChild(qrCode);
  },
);

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.

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

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