--- title: Scanner description: Learn more about the Scanner action in App Bridge. api_name: app-bridge source_url: html: https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner md: https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner.md --- ExpandOn this page * [Requirements](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner#requirements) * [Setup](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner#setup) * [Scanner Capture action](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner#scanner-capture-action) * [Request access and Open Camera action](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner#request-access-and-open-camera-action) # Scanner Note This is a legacy API. Use the latest version of [`Scanner`](https://shopify.dev/docs/api/app-home/apis/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.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/tools/app-bridge-scanner-Dojp0OnL.png) *** ## 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](https://shopify.dev/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 | 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](https://shopify.dev/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 | 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. | ```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 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()`. *** * [Requirements](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner#requirements) * [Setup](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner#setup) * [Scanner Capture action](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner#scanner-capture-action) * [Request access and Open Camera action](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/scanner#request-access-and-open-camera-action)