1. Upgrade the Incode Web SDK to version 1.83.0 or higher

The full UXv2 experience is available starting on WebSDK version 1.83.0. Depending on your integration type (CDN or Package manager), please update to the latest Web SDK version.

 <!-- Include Incode Web SDK inside the head tag -->
  <script src="https://sdk.incode.com/sdk/onBoarding-{user.WEB_SDK_VERSION}.js" defer></script>

  "dependencies": {
    //...
    "@incodetech/welcome": "^{user.WEB_SDK_VERSION}"
  }

2. Replace the ID capture-related methods.

The new renderCaptureId() is a streamlined method that centralizes all the ID capture process.

Instead of using renderDocumentSelector() ➔ renderCamera("front") ➔renderCamera("back"), and/or renderCamera("passport"), Now you can simply use only renderCaptureId() and all logic will be handled internally.

// Remove all the logic an chaining of methods for:
// renderDocumentSelector()
// if id ➔ renderCamera('front') ➔ renderCamera('back')
// if passport ➔ renderCamera('passport')  

// Use the single method renderCaptureId()
incode.renderCaptureId(cameraContainer, {
  session: incodeSession,
  onSuccess: processId, // Method to call incode.processId();
  onError: showError,
  //forceIdV2: true, // Optional: To force UXv2 during development, leave it blank for production.
  //uiConfig: UiConfig, // Optional: custom theming.
});

2.1. Where are all my options?

⚙️

Most of the parameters you used to pass with the options object are now automatically retrieved from the ID Capture module on your Flow configuration within the Incode Dashboard.

2.2. What happens now to the renderDocumentSelector() method?

To toggle the Document Selection screen, just change the option ID Capture ➔ "Show document chooser screen" in your flow configuration at the Incode Dashboard.

The document selector screen is optional; the new capture experience can recognize the document type and adjust automatically. However, using it provides a custom UI that can assist the user in capturing the passport more effectively.

🚧

Notice that the processId() method is still required after capturing the ID document.

3. Replace renderCamera('selfie')method

The new renderCaptureFace() method is a direct replacement of renderCamera('selfie') Use it now to execute the new face capture experience:

// Remove renderCamera('selfie')

// Use the method renderCaptureFace()
incode.renderCaptureFace(cameraContainer, {
  session: incodeSession,
  onSuccess: processFace, // Method to call incode.processFace();
  onError: showError,
  //forceV2: true, // Optional: To force UXv2 during development, leave it blank for production.
  //uiConfig: UiConfig, // Optional: custom theming.
});

3.1. Where are all myoptions?

⚙️

Most of the parameters you used to pass with the options object are now automatically retrieved from the Face Capture module on your Flow configuration within the Incode Dashboard.

4. Call processFace() after

Starting Web SDK version 1.83.0, in order to complete the face capture process, you must call the processFace() method.

async function processFace() {
  try {
    const results = await incode.processFace(incodeSession); // {token: 'sdfsfs....sdfsdf'}
    console.log("processFace results", results);
    nextStep();
  } catch (error) {
    showError(error);
  }
}

5. Customization

Now, instead of using CSS classes to customize your capture experience, the UXV2 uses Design Tokens.

Customize the UI by passing an object with the value to overwrite, allowing for more direct customization while maintaining a coherent UI.

const UiConfig = {
  theming: {
    designTokens: {
      button: {
        primary: {
          surface: { default: '#fda9cc', hover: '#fa91bd' },
          text: { default: '#ffffff' },
        }
      },
    }
  },
};

incode.renderCaptureId(cameraContainer, {
  session: incodeSession,
  onSuccess: processId, // Method to call incode.processId();
  onError: showError,
  uiConfig: UiConfig, // Optional: custom theming.
}

More details in Theming can be found on Theming

6. Turn on the UXv2 experience

All this changes are just to be able to turn on the experience, now you can turn it on by setting forceIdV2 in renderIdCapture and forceV2in renderFaceCapture to true.