Scanner APIAPIs
The Scanner API enables an extension to access scanner data and available scanning sources supported by the device.
Supporting targets
Anchor to scannerapiScannerApi
- Anchor to scannerDatascannerDataScannerDatarequired
Provides read-only access to scanner data and allows subscribing to new scan events.
- Anchor to sourcessourcesScannerSourcesrequired
Provides read-only access to the available scanner sources on the POS device.
ScannerData
- current
The current scan data. The `value` property provides the current scan result, and `subscribe` allows listening to new scans.
ReadonlySignalLike<ScannerSubscriptionResult>
export interface ScannerData {
/**
* The current scan data.
* The `value` property provides the current scan result, and `subscribe` allows listening to new scans.
*/
current: ReadonlySignalLike<ScannerSubscriptionResult>;
}ReadonlySignalLike
Represents a read-only value managed on the main thread that an extension can subscribe to. Example: Checkout uses this to manage the state of an object and communicate state changes to extensions running in a sandboxed web worker. This interface is compatible with [Preact's ReadonlySignal](https://github.com/preactjs/signals/blob/a023a132a81bd4ba4a0bebb8cbbeffbd8c8bbafc/packages/core/src/index.ts#L700-L709).
- subscribe
(fn: (value: T) => void) => () => void - value
T
export interface ReadonlySignalLike<T> {
readonly value: T;
subscribe(fn: (value: T) => void): () => void;
}ScannerSubscriptionResult
- data
The string data from the last scanner event received.
string - source
The scanning source from which the scan event came.
ScannerSource
export interface ScannerSubscriptionResult {
/** The string data from the last scanner event received. */
data?: string;
/** The scanning source from which the scan event came. */
source?: ScannerSource;
}ScannerSource
The scanner source the POS device supports.
'camera' | 'external' | 'embedded'ScannerSources
- current
The current available scanner sources. The `value` property provides the current sources, and `subscribe` allows listening to changes.
ReadonlySignalLike<ScannerSource[]>
export interface ScannerSources {
/**
* The current available scanner sources.
* The `value` property provides the current sources, and `subscribe` allows listening to changes.
*/
current: ReadonlySignalLike<ScannerSource[]>;
}Anchor to examplesExamples
Examples of receiving updates from the Scanner API
Anchor to example-conditional-scanner-source-rendering-exampleConditional scanner source rendering example
Conditional scanner source rendering example
jsx
Examples
Conditional scanner source rendering example
jsx
import {render} from 'preact'; import {useState, useEffect} from 'preact/hooks'; export default async () => { render(<Extension />, document.body); }; const Extension = () => { const [scanData, setScanData] = useState(''); const [scanSource, setScanSource] = useState(''); const [hasCameraScanner, setHasCameraScanner] = useState(false); const [hasExternalScanner, setHasExternalScanner] = useState(false); useEffect(() => { const unsubscribeData = shopify.scanner.scannerData.current.subscribe((result) => { setScanData(result.data || ''); setScanSource(result.source || ''); }); const unsubscribeSources = shopify.scanner.sources.current.subscribe((sources) => { setHasCameraScanner(sources.includes('camera')); setHasExternalScanner(sources.includes('external')); }); return () => { unsubscribeData(); unsubscribeSources(); }; }, []); return ( <s-page heading="Scanner Example"> <s-stack direction="block"> <s-text>Scanned data: {scanData}</s-text> <s-text>Scanned data source: {scanSource}</s-text> {hasCameraScanner && ( <s-text>Camera scanner is available</s-text> )} {hasExternalScanner && ( <s-text>External scanner is available</s-text> )} </s-stack> </s-page> ); };