Scanner

Note

This is a legacy API. Use the latest version of Scanner instead.

The Scanner action set allows you to use the mobile device's camera to scan barcodes.

A simplified drawing of a smartphone. On the phone's screen is a graphic of a barcode being scanned.

Anchor to RequirementsRequirements

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

Anchor to SetupSetup

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.

Note

In the following example, config is a valid App Bridge configuration object. Learn more about configuring App Bridge.

import createApp from '@shopify/app-bridge';

import {Group, Scanner} from '@shopify/app-bridge/actions';

var app = createApp(config);

var scanner = Scanner.create(app);

Anchor to Scanner Capture actionScanner 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.

});

Anchor to ResponseResponse

Key	Type	Description
`scanData`	String?	The resulting string from scanning a barcode.

Anchor to Request access and Open Camera actionRequest 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

});

Note

Note: If the Camera Scanner Open action is already available, then dispatching Scanner.Action.OPEN_CAMERA is the only required step to use the Camera Scanner component. The state of the actions can be determined by calling app.featuresAvailable().

Was this page helpful?