Customer FlowsCustomer Verification

Customer Verification

Render a fullscreen capture component that analyzes frames from the user’s front-facing camera to determine whether the user matches a specified enrollmentId that they have previously registered in IDmission’s customer database.

Example

import React, { useState } from 'react'
import { CustomerVerification } from 'idmission-web-sdk'
 
function getSessionId() {
  return fetch('/api/get-session').then(resp => resp.json()).then(resp => resp.id)
}
 
function MyComponent() {
  const [running, setRunning] = useState(false)
 
  return (
    <>
      <button onClick={() => setRunning(true)}>Start Customer Verification</button>
 
      {running && (
        <CustomerVerification
          sessionId={getSessionId}
          enrollmentId="some-guy"
        />
      )}
    </>
  )
}

Props

enrollmentId
The unique identifier to match from previously enrolled customers.
lang
Language code to use. Supported values: ‘auto’ (detect based on user’s OS), ‘en’ (English), ‘es’ (Spanish). Defaults to auto.
sessionId
A session identifier generated with your IDmission credentials.
submissionUrl
URL to hit with all API requests. Defaults to the value specified in your decoded submissionToken.
authUrl
URL to validate session against. Defaults to https://portal-api.idmission.com.
documentServiceUrl
URL to upload captured documents to via Tus.
companyId
Company identifier to include with submission.
jobId
The ID of the job to associate with the submission.
taskId
The ID of the task to associate with the submission.
needImmediateResponse
Boolean flag to indicate if validation of the minimum resolution for an ID document image should be triggered. Defaults to true.
webhooksEnabled
Boolean flag to indicate whether customer-configured webhooks should be invoked after submission.
webhooksURL
URL to use when invoking customer-configured webhooks.
webhooksClientTraceId
A customer provided trace id to use when invoking customer-configured webhooks.
webhooksStripSpecialCharacters
Boolean flag to indicate whether non-alphanumeric characters should be removed from the submission data when customer-configured webhooks are invoked.
webhooksSendInputImages
Boolean flag to indicate whether raw user-captured images should be included in the submission data when customer-configured webhooks are invoked.
webhooksSendProcessedImages
Boolean flag to indicate whether processed user-captured images should be included in the submission data when customer-configured webhooks are invoked.
sendBase64DocumentsInSwaggerProxy
Boolean flag to enable download and replace behavior for documents in the Swagger Proxy API. Defaults to false.
useDocumentServiceForLivenessChecks
Boolean flag to indicate whether the liveness check photos should be uploaded to the document service, rather than sent as base64. Defaults to false.
loadingOverlayMode
String indicating which loading overlay screen should be used. Supported values: ‘default’ and ‘legacy’. Defaults to ‘default’.
timeoutDurationMs
The duration of time in milliseconds that the user may try to pass the realness check. Defaults to 15000 (15 seconds).
modelLoadTimeoutMs
Number of milliseconds indicating the maximum amount of time that should be spent trying to load the guided capture experience before giving up and resorting to the stock camera instead. Defaults to 45000 (45 seconds).
skipSuccessScreen
Boolean or async function to indicate whether to proceed automatically after capture guidance is satisfied. If an async function is supplied returning a boolean, it will be evaluated at the time of capture guidance satisfaction. Defaults to false.
theme
Name of an included theme or object containing theme properties. *
assets
Object containing any asset overrides.
classNames
Object containing any classNames for inner components. *
colors
Object containing any color overrides.
verbiage
Object containing any verbiage overrides.
onBeforeDocumentUpload
Callback function that fires immediately prior to each document upload, giving the client application an opportunity to specify custom asynchronous logic that captures the document contents before it is exchanged for a document token. The document content and metadata are passed in as parameters and a promise resolving to void or false should be returned. If the returned promise resolves to false, the document will not be uploaded.
onDocumentUploadProgress
Callback function that fires when progress information is available for a document upload. The progress info and metadata are passed in as parameters.
onDocumentUploaded
Callback function that fires immediately after each document upload, giving the client application an opportunity to specify custom asynchronous logic that captures the document token. The document token and metadata are passed in as parameters.
onDocumentUploadFailed
Callback function that fires when a document failed to upload. The error and metadata are passed in as parameters.
onBeforeSubmit
Callback function that fires immediately prior to submission, giving the client application an opportunity to specify custom asynchronous logic that mutates the request before it executes. The submission request is passed in as a parameter and a promise resolving to the updated request should be returned.
onSubmit
Callback function that fires when the user has completed the flow instead of making a call to IDmission’s servers, allowing customers to specify their own submission logic. Arguments: the request payload that would have been dispatched to IDmission’s API, which contains the images/documents/video submitted by the user. Note that when this parameter is supplied, onComplete will never fire, and the customer will need to implement their own error handling/retry logic. Use at your own risk!
onComplete
Callback function that fires when the user has completed the CustomerVerification flow. Arguments: the SubmissionResponse from IDmission’s API is passed as an argument to the customer’s application for further handling, which indicates whether the user passed the validation check, and the request payload dispatched to IDmission’s API, which contains the images submitted by the user.
onCustomerMatched
Callback function that fires when the user has completed the CustomerVerification flow and matches the specified customer enrollmentId. The SubmissionResponse from IDmission’s API is passed as an argument to the customer’s application for further handling, which indicates whether the user passed the validation check.
onCustomerNotMatched
Callback function that fires when the user has completed the CustomerVerification flow but does not match the specified customer enrollmentId. The SubmissionResponse from IDmission’s API is passed as an argument to the customer’s application for further handling, which indicates whether the user passed the validation check.
onRequestFailure
Callback function that fires when an error occurs during the submission process. Arguments: the Error object is passed as an argument to the customer’s application for further handling.
onExitCapture
Callback function that fires when the user clicks the exit button during ID or selfie capture.
onExitAfterFailure
Callback function that fires when the user clicks the exit button after failing the realness check.
onUserCancel
Callback function that fires when the user clicks the exit button from the loading overlay, declining to engage with IDmission. Binding this callback results in the cancel button being rendered on the loading overlay.
onModelError
Callback function that fires when the selfie capture models fail to load or fail during runtime.
onCameraAccessDenied
Callback function that fires when the camera access is denied.
geolocationEnabled
Boolean flag to indicate whether users should be prompted to share their location. Default is true.
geolocationRequired
Boolean flag to indicate whether users should be blocked from proceeding if they block location access. Default is false.
debugMode
Boolean flag to enable on-screen prediction information output. Default is false.

Class Names

container
Class name for the outermost container of the SelfieCapture screen.
cameraFeed
Class name for the camera feed component of the SelfieCapture screen.
guides.container
Class name for the outermost container of the FaceCaptureGuideOverlay.
guides.oval
Class name for the oval of the FaceCaptureGuideOverlay.
guidanceMessageContainer
Class name for the guidance message container of the SelfieCapture screen.
guidanceMessage
Class name for the guidance message of the SelfieCapture screen.
exitCaptureBtn
Class name for the exit capture button of the SelfieCapture screen.
fallback.container
Class name for the outermost container of the SelfieCaptureFallback.
fallback.inner
Class name for the inner container of the SelfieCaptureFallback.
fallback.heading
Class name for the heading of the SelfieCaptureFallback.
fallback.description
Class name for the description of the SelfieCaptureFallback.
fallback.imageContainer
Class name for the container of the image in the SelfieCaptureFallback.
fallback.image
Class name for the image in the SelfieCaptureFallback.
fallback.buttonsRow
Class name for the buttons row in the SelfieCaptureFallback.
fallback.captureBtn
Class name for the capture button in the SelfieCaptureFallback.
fallback.doneBtn
Class name for the done button in the SelfieCaptureFallback.
fallback.retryCaptureBtn
Class name for the retry capture button in the SelfieCaptureFallback.
fallback.documentCaptureClassNames.container
fallback.documentCaptureClassNames.cameraFeedWrapper
fallback.documentCaptureClassNames.cameraFeed
fallback.documentCaptureClassNames.previewImage
fallback.documentCaptureClassNames.captureContainer
fallback.documentCaptureClassNames.headingRow
fallback.documentCaptureClassNames.heading
fallback.documentCaptureClassNames.footerRow
fallback.documentCaptureClassNames.instructions
fallback.documentCaptureClassNames.buttonsRow
fallback.documentCaptureClassNames.retryCameraAccessBtn
fallback.documentCaptureClassNames.retryCaptureBtn
fallback.documentCaptureClassNames.uploadBtn
fallback.documentCaptureClassNames.uploadProgressBtn
fallback.documentCaptureClassNames.captureBtn
imagePreview.container
Class name for the outermost container of the SelfieProgressPreview.
imagePreview.text
Class name for the text of the SelfieProgressPreview.
imagePreview.spinner
Class name for the spinner of the SelfieProgressPreview.
imagePreview.imageContainer
Class name for the image container of the SelfieProgressPreview.
imagePreview.image
Class name for the image of the SelfieProgressPreview.
loadingOverlay.container
Class name for the outermost container of the SelfieCaptureLoadingOverlay.
loadingOverlay.inner
Class name for the inner container of the SelfieCaptureLoadingOverlay.
loadingOverlay.headingContainer
Class name for the heading container of the SelfieCaptureLoadingOverlay.
loadingOverlay.heading
Class name for the heading of the SelfieCaptureLoadingOverlay.
loadingOverlay.imageContainer
Class name for the image container of the SelfieCaptureLoadingOverlay.
loadingOverlay.image
Class name for the image of the SelfieCaptureLoadingOverlay.
loadingOverlay.buttonsRow
Class name for the buttons row of the SelfieCaptureLoadingOverlay.
loadingOverlay.continueBtnContainer
Class name for the continue button container of the SelfieCaptureLoadingOverlay.
loadingOverlay.continueBtn
Class name for the continue button of the SelfieCaptureLoadingOverlay.
loadingOverlay.cancelBtn
Class name for the cancel button of the SelfieCaptureLoadingOverlay.
loadingOverlay.cameraAccessDenied.container
Class name for the outermost container of the CameraAccessDeniedOverlay.
loadingOverlay.cameraAccessDenied.inner
Class name for the inner container of the CameraAccessDeniedOverlay.
loadingOverlay.cameraAccessDenied.imageContainer
Class name for the container of the image in the CameraAccessDeniedOverlay.
loadingOverlay.cameraAccessDenied.image
Class name for the image in the CameraAccessDeniedOverlay.
loadingOverlay.cameraAccessDenied.heading
Class name for the heading of the CameraAccessDeniedOverlay.
loadingOverlay.cameraAccessDenied.description
Class name for the description text of the CameraAccessDeniedOverlay.
loadingOverlay.cameraAccessDenied.retryBtn
Class name for the button that will retry camera access in the CameraAccessDeniedOverlay.
loadingOverlay.microphoneAccessDenied.container
Class name for the outermost container of the MicrophoneAccessDeniedOverlay.
loadingOverlay.microphoneAccessDenied.inner
Class name for the inner container of the MicrophoneAccessDeniedOverlay.
loadingOverlay.microphoneAccessDenied.imageContainer
Class name for the image container of the MicrophoneAccessDeniedOverlay.
loadingOverlay.microphoneAccessDenied.image
Class name for the image of the MicrophoneAccessDeniedOverlay.
loadingOverlay.microphoneAccessDenied.heading
Class name for the heading of the MicrophoneAccessDeniedOverlay.
loadingOverlay.microphoneAccessDenied.description
Class name for the description of the MicrophoneAccessDeniedOverlay.
loadingOverlay.microphoneAccessDenied.retryBtn
Class name for the retry button of the MicrophoneAccessDeniedOverlay.
loadingOverlay.progressContainer
Class name for the progress container of the SelfieCaptureLoadingOverlay.
loadingOverlay.progressBackground
Class name for the progress background of the SelfieCaptureLoadingOverlay.
loadingOverlay.progressBar
Class name for the progress bar of the SelfieCaptureLoadingOverlay.
loadingOverlay.progressIndicator
Class name for the progress indicator of the SelfieCaptureLoadingOverlay.
loadingOverlay.loadingListContainer
Class name for the loading list container of the SelfieCaptureLoadingOverlay.
loadingOverlay.loadingList
Class name for the loading list of the SelfieCaptureLoadingOverlay.
loadingOverlay.loadingListItem
Class name for the loading list items of the SelfieCaptureLoadingOverlay.
loadingOverlay.loadingListItemIndicator
Class name for the icons on the loading list items of the SelfieCaptureLoadingOverlay.
success.container
Class name for the outer container of the CustomerVerificationSuccess screen.
success.inner
Class name for the inner container of the CustomerVerificationSuccess screen.
success.heading
Class name for the heading of the CustomerVerificationSuccess screen.
success.imageContainer
Class name for the container of the image of the CustomerVerificationSuccess screen.
success.image
Class name for the image of the CustomerVerificationSuccess screen.
success.buttonsRow
Class name for the container of the buttons of the CustomerVerificationSuccess screen.
success.doneBtn
Class name for the done button of the CustomerVerificationSuccess screen.
success.retryBtn
Class name for the retry button of the CustomerVerificationSuccess screen.
failure.container
Class name for the outer container of the CustomerVerificationFailure screen.
failure.inner
Class name for the inner container of the CustomerVerificationFailure screen.
failure.heading
Class name for the heading of the CustomerVerificationFailure screen.
failure.imageContainer
Class name for the container of the image of the CustomerVerificationFailure screen.
failure.image
Class name for the image of the CustomerVerificationFailure screen.
failure.buttonsRow
Class name for the container of the buttons of the CustomerVerificationFailure screen.
failure.retryBtn
Class name for the retry button of the CustomerVerificationFailure screen.
failure.exitBtn
Class name for the exit button of the CustomerVerificationFailure screen.

Assets

loadingOverlay.instructionImageUrl
URL to the instruction image on the loading overlay. Defaults to https://websdk-cdn-dev.idmission.com/assets/Selfie-Image-1.png.
loadingOverlay.cameraAccessDenied.imageUrl
URL to the image to display when camera access is denied. Defaults to https://websdk-cdn-dev.idmission.com/assets/camera-disable-icon.png.
loadingOverlay.microphoneAccessDenied.imageUrl
URL to the image to display when microphone access is denied. Defaults to https://websdk-cdn-dev.idmission.com/assets/microphone-disable-icon.svg.
failure.imageUrl
URL to the image to display in the CustomerVerificationFailure screen. Defaults to https://websdk-cdn-dev.idmission.com/assets/manual_capture.png.
failureImageUrl

Colors

guidesUnsatisfiedColor
Color of the guides when they are not satisfied. Defaults to white.
guidesSatisfiedColor
Color of the guides when they are satisfied. Defaults to green.
guidanceMessagesSatisfiedBackgroundColor
Background color of the guidance messages when they are satisfied. Defaults to green.
guidanceMessagesUnsatisfiedBackgroundColor
Background color of the guidance messages when they are not satisfied. Defaults to red.
guidanceMessagesSatisfiedTextColor
Text color of the guidance messages when they are satisfied. Defaults to white.
guidanceMessagesUnsatisfiedTextColor
Text color of the guidance messages when they are not satisfied. Defaults to white.
loadingOverlay.continueBtn.backgroundColor
Background color of the button. Defaults to #0d6efd.
loadingOverlay.continueBtn.borderColor
Border color of the button. Defaults to none.
loadingOverlay.continueBtn.textColor
Text color of the button. Defaults to white.
loadingOverlay.continueBtn.loadingBackgroundColor
Background color of the button while loading. Defaults to none.
loadingOverlay.continueBtn.loadingBorderColor
Border color of the button while loading. Defaults to secondary-500.
loadingOverlay.continueBtn.loadingTextColor
Text color of the button while loading. Defaults to white.
loadingOverlay.cameraAccessDenied.retryBtn.backgroundColor
Background color of the button. Defaults to #0d6efd.
loadingOverlay.cameraAccessDenied.retryBtn.borderColor
Border color of the button. Defaults to none.
loadingOverlay.cameraAccessDenied.retryBtn.textColor
Text color of the button. Defaults to white.
loadingOverlay.cameraAccessDenied.retryBtn.loadingBackgroundColor
Background color of the button while loading. Defaults to none.
loadingOverlay.cameraAccessDenied.retryBtn.loadingBorderColor
Border color of the button while loading. Defaults to secondary-500.
loadingOverlay.cameraAccessDenied.retryBtn.loadingTextColor
Text color of the button while loading. Defaults to white.
loadingOverlay.microphoneAccessDenied.retryBtn.backgroundColor
Background color of the button. Defaults to #0d6efd.
loadingOverlay.microphoneAccessDenied.retryBtn.borderColor
Border color of the button. Defaults to none.
loadingOverlay.microphoneAccessDenied.retryBtn.textColor
Text color of the button. Defaults to white.
loadingOverlay.microphoneAccessDenied.retryBtn.loadingBackgroundColor
Background color of the button while loading. Defaults to none.
loadingOverlay.microphoneAccessDenied.retryBtn.loadingBorderColor
Border color of the button while loading. Defaults to secondary-500.
loadingOverlay.microphoneAccessDenied.retryBtn.loadingTextColor
Text color of the button while loading. Defaults to white.
success.doneBtn.backgroundColor
Background color of the button. Defaults to #0d6efd.
success.doneBtn.borderColor
Border color of the button. Defaults to none.
success.doneBtn.textColor
Text color of the button. Defaults to white.
success.doneBtn.loadingBackgroundColor
Background color of the button while loading. Defaults to none.
success.doneBtn.loadingBorderColor
Border color of the button while loading. Defaults to secondary-500.
success.doneBtn.loadingTextColor
Text color of the button while loading. Defaults to white.
success.retryBtn.backgroundColor
Background color of the button. Defaults to #0d6efd.
success.retryBtn.borderColor
Border color of the button. Defaults to none.
success.retryBtn.textColor
Text color of the button. Defaults to white.
success.retryBtn.loadingBackgroundColor
Background color of the button while loading. Defaults to none.
success.retryBtn.loadingBorderColor
Border color of the button while loading. Defaults to secondary-500.
success.retryBtn.loadingTextColor
Text color of the button while loading. Defaults to white.
failure.retryBtn.backgroundColor
Background color of the button. Defaults to #0d6efd.
failure.retryBtn.borderColor
Border color of the button. Defaults to none.
failure.retryBtn.textColor
Text color of the button. Defaults to white.
failure.retryBtn.loadingBackgroundColor
Background color of the button while loading. Defaults to none.
failure.retryBtn.loadingBorderColor
Border color of the button while loading. Defaults to secondary-500.
failure.retryBtn.loadingTextColor
Text color of the button while loading. Defaults to white.
failure.exitBtn.backgroundColor
Background color of the button. Defaults to #0d6efd.
failure.exitBtn.borderColor
Border color of the button. Defaults to none.
failure.exitBtn.textColor
Text color of the button. Defaults to white.
failure.exitBtn.loadingBackgroundColor
Background color of the button while loading. Defaults to none.
failure.exitBtn.loadingBorderColor
Border color of the button while loading. Defaults to secondary-500.
failure.exitBtn.loadingTextColor
Text color of the button while loading. Defaults to white.

Verbiage

guidanceHoldStillText
Text to display on the guidance message when capture/verification is in progress. Defaults to “Hold still for a few seconds…“.
guidanceLookStraightText
Text to display on the guidance message when the user is not looking at the camera. Defaults to “Look straight into the camera…“.
guidanceMoveBackText
Text to display on the guidance message when the user is too close to the camera. Defaults to “Move back…“.
guidanceMoveForwardText
Text to display on the guidance message when the user is too far from the camera. Defaults to “Move forward…“.
guidanceMoveToCenterText
Text to display on the guidance message when the user’s face is not centered in the frame. Defaults to “Move to the center…“.
guidanceNoFaceDetectedText
Text to display on the guidance message when the user’s face is not detected in the frame. Defaults to “Waiting for face to be detected…“.
guidanceNotStableText
Text to display on the guidance message when the user’s face is not stable. Defaults to “Please hold still…“.
loadingOverlay.headingText
Text to display on the heading of the SelfieCaptureLoadingOverlay. Defaults to “Use your device camera to capture your face”.
loadingOverlay.removeEyeCoveringsText
Text to display on the SelfieCaptureLoadingOverlay when the user is wearing dark sunglasses, eye patches, etc. Defaults to “Remove Sunglasses & Hat”.
loadingOverlay.avoidExcessiveBacklightingText
Text to display on the SelfieCaptureLoadingOverlay when the lighting in the background is too bright. Defaults to “Avoid Excessive Backlighting”.
loadingOverlay.continueText
Text to display on the continue button of the SelfieCaptureLoadingOverlay. Defaults to “Continue”.
loadingOverlay.cameraInitializingText
Text to display on the SelfieCaptureLoadingOverlay when access to the camera is being requested. Defaults to “Camera initializing…“.
loadingOverlay.downloadingText
Text to display on the SelfieCaptureLoadingOverlay when the models are being downloaded. Defaults to “Downloading…“.
loadingOverlay.modelsWarmingUpText
Text to display on the SelfieCaptureLoadingOverlay when the models are warming up. Defaults to “Models warming up…“.
loadingOverlay.modelsReadyText
Text to display on the SelfieCaptureLoadingOverlay when the models are ready. Defaults to “Guided capture experience ready”.
loadingOverlay.cameraInitializedText
Text to display on the SelfieCaptureLoadingOverlay when the camera is ready. Defaults to “Camera ready”.
loadingOverlay.cameraAccessDenied.headingText
Text informing the user that camera access is denied. Defaults to “Your camera permission is disabled”.
loadingOverlay.cameraAccessDenied.descriptionText
Text elaborating on the meaning of camera access being denied. Defaults to “This application requires access to your camera to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for camera permissions, you must go to settings and provide camera access to the current browser.”.
loadingOverlay.cameraAccessDenied.retryBtnText
Text for the button that will retry camera access. Defaults to “Retry”.
loadingOverlay.microphoneAccessDenied.headingText
Text to display on the heading of the MicrophoneAccessDeniedOverlay. Defaults to “Your microphone permission is disabled”.
loadingOverlay.microphoneAccessDenied.descriptionText
Text to display on the description of the MicrophoneAccessDeniedOverlay. Defaults to “This application requires access to your microphone to continue. Please accept the permission once prompted by the browser. If the browser does not prompt for microphone permissions, you must go to settings and provide microphone access to the current browser.”.
loadingOverlay.microphoneAccessDenied.retryBtnText
Text to display on the retry button of the MicrophoneAccessDeniedOverlay. Defaults to “Retry”.
success.headingText
Text to display in the heading of the CustomerVerificationSuccess screen. Defaults to “Customer has been verified!“.
success.retryBtnText
Text to display in the retry button of the CustomerVerificationSuccess screen. Defaults to “Retry”.
success.doneBtnText
Text to display in the done button of the CustomerVerificationSuccess screen. Defaults to “Done”.
failure.headingText
Text to display in the heading of the CustomerVerificationFailure screen. Defaults to “Customer not verified”.
failure.retryBtnText
Text to display in the retry button of the CustomerVerificationFailure screen. Defaults to “Retry”.
failure.exitBtnText
Text to display in the exit button of the CustomerVerificationFailure screen. Defaults to “Exit”.