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,
  showDynetiLogo: true,
  showFirstSecondSideProgress: true,
  showProgressBar: true,
  showExplanation: true,
  showResult: true,
  showThrobber: true,
  toastTimeout: 5000,
};

3. Specify which card features you would like to verify​

const verify = {
  cardholderName: "John Smith",
  firstSix: "123456",
  lastFour: "4321",
  detectWrongCard: true
}

Please see the Verification Request documentation for an explanation of the fields.

4. 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
});

5. Present the Scan Modal to the user​

Call scan.present 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.present(
  userId,
  verify,
);

6. 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