Skip to main content

Modal Flow Usage

The Modal flow is our most straightforward implementation option. This method embeds our pre-built UI components directly on your page through a modal overlay. While it is the simplest path to implementation, customization options are more limited than with the Custom View flow.

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. Scan Configuration​

Create a configuration object to customize the scanning UI.

See Scan Configuration for a complete explanation of the available options.

const config = {
  logoUrl: "https://example.com/your-logo-url.png",
  promptIfFewDigits: true,
};

3. Create a Scan Object​

Provide your apiKey and the config object you to make a new scan object.

const scan = new DyScan.Scan({
  key: apiKey,
  config: config
});

4. Present the Scan Modal to the user​

Call scan.begin to show the UI to the user and begin the scan and await the result.

The userId is echoed back to you in the result. See User ID for more details

const result = await scan.begin(
  userId,
);

5. Use the results​

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

data is a Scan Status object. Please see the Scan Status 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

Optimizing for Scan Speed​

If you would prefer to prioritize scanning speed over guiding the user through the scan, configure the scan to skip the explanation and results screens:

const config = {
  showExplanation: false,  // Skip the explanation screen
  showResult: false,       // Skip the results screen - modal closes immediately
  showCancelButton: true,  // Allow users to cancel if needed
};

const scan = new DyScan.Scan({
  key: apiKey,
  config: config
});

const result = await scan.begin(userId);

// The modal closes immediately after scanning
// Populate your form directly with the results
if (result.completed && result.data.scanResult) {
  document.getElementById('card-number').value = result.data.scanResult.cardNumber;
  if (result.data.scanResult.expirationDate) {
    document.getElementById('expiration').value = result.data.scanResult.expirationDate;
  }
}

This configuration provides the fastest user experience by removing intermediate screens and immediately returning control to your application after the scan completes.