> Note: > This is a legacy API. Use the latest version of [`Scanner`](/docs/api/app-bridge-library/apis/scanner) instead. The `Scanner` action set allows you to use the mobile device's camera to scan barcodes. <img alt="A simplified drawing of a smartphone. On the phone's screen is a graphic of a barcode being scanned." src="/assets/apps/tools/app-bridge-scanner.png" style="display: block; width: 100%; max-width: 524px"> ## 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. > Note > In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app). ```js import createApp from '@shopify/app-bridge'; import {Group, Scanner} from '@shopify/app-bridge/actions'; var app = createApp(config); var scanner = Scanner.create(app); ``` ## Scanner Capture action <table> <tr> <th>Group</th><td>Scanner</td> </tr> <tr> <th>Action</th><td>CAPTURE</td> </tr> <tr> <th>Action Type</th><td>APP::SCANNER::CAPTURE</td> </tr> <tr> <th>Description</th><td>Dispatches when a scan is successful.</td> </tr> </table> 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](/docs/api/app-bridge/previous-versions/actions/features). ```js scanner.subscribe(Scanner.Action.CAPTURE, function(payload) { // The payload will contain `scanData`, a string representation of the data scanned. }); ``` ### Response <table> <thead> <tr> <th>Key</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>scanData</code></td> <td>String?</td> <td>The resulting string from scanning a barcode.</td> </tr> </tbody> </table> ## Request access and Open Camera action <table> <tr> <th>Group</th><td>Scanner</td> </tr> <tr> <th>Action</th><td>OPEN::CAMERA</td> </tr> <tr> <th>Action Type</th><td>APP::SCANNER::OPEN::CAMERA</td> </tr> <tr> <th>Description</th><td>Opens a camera component for scanning barcodes.</td> </tr> </table> ```js 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: 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()`.