CameraScanner
The camera scanner uses the device's 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.
Receiving scan event updates
Anchor link to section titled "Receiving scan event updates"The scannerDataSubscribable
will return the scanner data and source that is executed on the extension. You can learn more in the Scanner API documentation.
Camera Scanning
Anchor link to section titled "Camera Scanning"Camera scanning is available when the device has a camera and the user grants POS permission to access it. For third-party apps, camera scanning can be initiated from within the app via a ‘Button’ component that launches the camera scanner feature.
Full Screen
Anchor link to section titled "Full Screen"The full-screen camera scanning UI should resemble the functionality in the core POS app.
Best practices
Anchor link to section titled "Best practices"Error Scanning
Anchor link to section titled "Error Scanning"Utilize the error banner to display scanning errors or unrecognized barcodes at the top of the camera view screen.
Successful Scanning
Anchor link to section titled "Successful Scanning"After a successful scan, dismiss the full-screen camera view and display a secondary screen showcasing the intended outcome.
Partial Screen
Anchor link to section titled "Partial Screen"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.
Best practices
Anchor link to section titled "Best practices"Blocking Scenarios
Anchor link to section titled "Blocking Scenarios"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.
Error Scanning
Anchor link to section titled "Error Scanning"Use the error banner at the top of the screen to denote errors while scanning or when encountering an unrecognized barcode.
Successful Scanning
Anchor link to section titled "Successful Scanning"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.
Content guidelines
Anchor link to section titled "Content guidelines"Blocking or Error Scenarios
Anchor link to section titled "Blocking or Error Scenarios"- 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.
Successful Scanning
Anchor link to section titled "Successful Scanning"- 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!