CameraScanner

Examples

• Scan barcodes with the camera

  Description

  Enable barcode and QR code scanning using the device camera. This example demonstrates a full-screen camera scanner with scan data display and banner messaging, showing how to integrate camera-based scanning into your workflow for product lookups or inventory management.

  React

  import React from 'react';
  import {
    CameraScanner,
    Screen,
    Text,
    useScannerDataSubscription,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const SmartGridModal = () => {
    const {data} = useScannerDataSubscription();
  
    return (
      <Screen
        name="CameraScanner"
        title="Camera Scanner Title"
      >
        <CameraScanner />
        <Text>{`Scanned data: ${data || ''}`}</Text>
      </Screen>
    );
  };
  
  export default reactExtension(
    'pos.home.modal.render',
    () => <SmartGridModal />,
  );
  

  TS

  import {
    CameraScanner,
    Screen,
    Text,
    Stack,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.modal.render',
    (root, api) => {
      const mainScreen = root.createComponent(
        Screen,
        {
          title: 'CameraScanner',
          name: 'Camera Scanner Title',
        },
      );
  
      const cameraScanner = root.createComponent(
        CameraScanner,
      );
  
      const text = root.createComponent(
        Text,
        null,
        'Scanned data: ',
      );
  
      mainScreen.append(cameraScanner);
      mainScreen.append(text);
      root.append(mainScreen);
  
      api.scanner.scannerDataSubscribable.subscribe(
        (data) => {
          text.replaceChildren(
            `Scanned data: ${data || ''}`,
          );
        },
      );
    },
  );