Camera scanner adds leading 0 to barcode

Extensions
1

Hi POS team,
I think that I found a bug in useStatefulSubscribableScannerData: a colleague noticed that the camera scanner adds a leading 0 to UPC-A barcodes, It seems that the camera scanner might be interpreting them as EAN-13.

Here’s a simplified version of how I’m using the hook with the <CameraScanner /> component. I added a toast to log the actual value:

import { useEffect, useState } from "react";
import {
  useStatefulSubscribableScannerData,
  useApi,
} from "@shopify/ui-extensions-react/point-of-sale";

export function usePosScanner() {
  const statefulSubscribableScanner = useStatefulSubscribableScannerData();
  const [lastScanData, setLastScanData] = useState<ScanData>();

  const { toast } = useApi<"pos.home.modal.render">();

  useEffect(() => {
    const initialDate = new Date();

    return statefulSubscribableScanner.subscribe((x) => {
      const { data, source } = x;

      if (!source || !data) return;

      toast.show(JSON.stringify({ data, source }));

      if (initialDate.getTime() === Date.now()) {
        // The subscribe callback fires immediately with the last scan result.
        // This is undesired, as this would happen even closing and reopening an extension.
        return;
      }

      // Debounce if using the camera and scanning the same data.
      if (
        lastScanData &&
        source === "camera" &&
        data === lastScanData.value &&
        lastScanData.date.getTime() + DUPLICATED_SCAN_INTERVAL > Date.now()
      ) {
        return;
      }

      setLastScanData({ value: data, source, date: new Date() });
    });
  }, [statefulSubscribableScanner, lastScanData]);

  return lastScanData;
}

Screenshot 2025-07-04 at 13.43.01 2
Screenshot 2025-07-04 at 13.43.01 21179×2556 127 KB

Screenshot 2025-07-04 at 12.51.42
Screenshot 2025-07-04 at 12.51.42404×214 104 KB

2

Hey all!

We’ve run into the same issue lately with UPC-A vs EAN-13, in my case I’ve also seen the “0” leading and trailing, so i’m simply trimming all zeros from the barcode, which seems to work for the search api within the pos extensions.

I hope there’s a fix from shopify’s side so we dont have to do this :slight_smile:

export const trimBarcodeZeros = (value: string): string => {
  return value.replace(/^0+|0+$/g, '')
}