Skip to main content

Custom View Flow

The Custom View flow offers greater control over the scan UI and experience than the Modal Flow, but it requires you to implement UI elements and user prompts to your liking. In this flow, you can attach a ScanView to your DOM. The ScanView appears as a camera feed with a card scanning region at the center. You will receive callbacks when events happen and you should show the appropriate UI elements to the user.

1. Check if the user's device is able to scan​

Check if scanning is available on the user's device. See Checking Scan Availability for details

2. Create a ScanView​

Provide your apiKey and Scan Configuration config object to the constructor:

const scanView = new DyScan.ScanView({key: apiKey, config: config});

3. Attach the ScanView to the DOM​

Call scanView.attachToElement(...) with the following values:

  • userId A user-id which will be echoed back to you for. See User ID for more details
  • parentEl The DOM node to which the scan view should append itself.
  • viewOptions A View Options configuration object which defines event handlers.
const result = await scanView.attachToElement(
    userId,
    parentEl,
    viewOptions
);

4. Use the results​

The awaited result from step 4 will contain two attributes, data and completed.

data is a Scan object. Please see the Scan document for an explanation of the returned fields.

completed is a boolean and indicates whether the user finished the scan flow. If they canceled the flow or it was unable to start completed will be false