Camera
component
The camera scanner uses the devices camera to scan and decode barcodes or QR codes. It displays a live feed with guidance markers for alignment and triggers actions within the app upon successful recognition.
Anchor to camerascannerCameraScanner
Was this section helpful?
Camera scanner and data text example
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 />,
);
Preview
Anchor to best-practicesBest Practices
- Utilize the error banner to display scanning errors or unrecognized barcodes at the top of the camera view screen.
- After a successful scan, dismiss the full-screen camera view and display a secondary screen showcasing the intended outcome.
- The camera scanner UI can be adjusted to display the camera view on part of the screen while dedicating the remaining portion to other components. This can be useful for tasks like inventory management.
- In situations where scanning should not be allowed within a specific section of your application, use an error banner to inform merchants that scanning is not permitted on that screen and offer alternative areas where the scanning function can be performed.
- Use the error banner at the top of the screen to denote errors while scanning or when encountering an unrecognized barcode.
- Upon successful scanning of an item, display a ‘Toast’ component with a message such as "Item scanned" to indicate the outcome. Additionally, altering the screen contents can also be used to signal a successful scan.
Was this section helpful?
Anchor to content-guidelinesContent guidelines
For banners:
- Be concise.
- Keep to 1 or 2 short sentences.
- Be dismissible unless it contains critical information or an important step merchants need to take.
Example:
✅ Scanning not permitted on this screen. Go to {Section} to scan items.
Dismiss (CTA)
❌Error.
✅ Barcode not recognized. Try scanning item again.
Dismiss (CTA)
❌ Didn’t work.
For toasts:
- Used for short messages to confirm an action.
- Never go over 3 or 4 words.
- Do not use for error messages.
- Should be used for success messages.
- Written in the pattern of noun + verb.
Example:
✅ Item scanned.
❌ Your item has been scanned and added to your inventory count!
Was this section helpful?
