Skip to main content

Scanner API
APIs

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 scannerDataSubscribable
scannerDataSubscribable
RemoteSubscribable<>
required

Creates a subscription to scan events Provides an initial value and a callback to subscribe to value changes. Currently supports only one subscription. You can utilize makeStatefulSubscribable on a RemoteSubscribable to implement multiple subscriptions. Using makeStatefulSubscribable or the corresponding hooks counts as a subscription.

Anchor to scannerSourcesSubscribable
scannerSourcesSubscribable
RemoteSubscribable<[]>
required

Creates a subscription to the scanning sources available on the POS device. Provides an initial value and a callback to subscribe to value changes. Currently supports only one subscription. You can utilize makeStatefulSubscribable on a RemoteSubscribable to implement multiple subscriptions. Using makeStatefulSubscribable or the corresponding hooks counts as a subscription.

Was this section helpful?

Anchor to examplesExamples

Examples of receiving updates from the Scanner API

Anchor to example-subscribe-to-scan-event-updatesSubscribe to scan event updates
Anchor to example-receiving-updates-on-available-scanner-sourcesReceiving updates on available scanner sources
Was this section helpful?

Subscribe to scan event updates

import React from 'react';
import {
Navigator,
Screen,
Stack,
Text,
useScannerDataSubscription,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
const {data, source} = useScannerDataSubscription();

return (
<Navigator>
<Screen name="Home" title="Home">
<Stack direction="horizontal">
<Text>{`Scanned data: ${data || ''} with ${source || ''}`}</Text>
</Stack>
</Screen>
</Navigator>
);
};

export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));

Anchor to example-use-casesUse cases

Anchor to example-hardware-scanner-exampleHardware scanner example

In this example, assuming a physical scanner is connected to the POS, any scans performed when ui extensions are in use will automatically add the product to the cart if the data exists on the shop.

Anchor to example-conditional-scanner-source-rendering-exampleConditional scanner source rendering example

There might be situations where a developer needs to conditionally render UI elements based on the available scanning sources of the device on which the extension is installed. For example, an extension could be designed for full-screen camera scanning, but a device like POS GO does not have a camera. In such cases, it would be necessary to avoid rendering the camera scanner component and instead create a UI that supports embedded scanning.

Was this section helpful?

Hardware scanner example

import React from 'react';
import {
Navigator,
Screen,
Stack,
Text,
useScannerDataSubscription,
useApi,
reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const SmartGridModal = () => {
const api = useApi<'pos.home.modal.render'>();
const {data} = useScannerDataSubscription();

return (
<Navigator>
<Screen name="Home" title="Home">
<Stack direction="horizontal">
<Text>{`Scanned data: ${data || ''}`}</Text>
</Stack>
</Screen>
</Navigator>
);
};

export default reactExtension('pos.home.modal.render', () => (
<SmartGridModal />
));