Scanner
The Scanner
action set allows you to use the mobile device's camera to scan barcodes.
Requirements
These actions require the following app versions:
- Shopify iOS v8.25.0 or above
- Shopify Android v8.24.0 or above
- Point of Sale iOS v5.32.0 or above
- Point of Sale Android v3.25.0 or above
Setup
Create an app and import the Scanner
module from @shopify/app-bridge/actions
. Note that we'll be referring to this sample application throughout the examples below.
import createApp from '@shopify/app-bridge';
import {Group, Scanner} from '@shopify/app-bridge/actions';
var app = createApp({
apiKey: '12345',
shopOrigin: shopOrigin,
});
var scanner = Scanner.create(app);
Scanner Capture action
Group | Scanner |
---|---|
Action | CAPTURE |
Action Type | APP::SCANNER::CAPTURE |
Description | Dispatches when a scan is successful. |
To open a Scanner component, you must first use Feature Detection to check whether it's available. If it is, then you can open it. To learn more about Feature Detection, see Features.
scanner.subscribe(Scanner.Action.CAPTURE, function(payload) {
// The payload will contain `scanData`, a string representation of the data scanned.
});
Response
Key | Type | Description |
---|---|---|
scanData |
String? | The resulting string from scanning a barcode. |
Request access and Open Camera action
Group | Scanner |
---|---|
Action | OPEN::CAMERA |
Action Type | APP::SCANNER::OPEN::CAMERA |
Description | Opens a camera component for scanning barcodes. |
var features = Features.create(app);
// Subscribe to the update action (triggered when the permission dialog is interacted with)
features.subscribe(Features.Action.REQUEST_UPDATE, function (payload) {
if (payload.feature[Scanner.Action.OPEN_CAMERA]) {
var available = payload.feature[Scanner.Action.OPEN_CAMERA].Dispatch;
// If the Camera Scanner actions were enabled, open a Scanner
if (available) {
scanner.dispatch(Scanner.Action.OPEN_CAMERA)
}
}
});
// Dispatch an action to request access to Scanner actions
features.dispatch(Features.Action.REQUEST, {
feature: Group.Scanner,
action: Scanner.Action.OPEN_CAMERA
});