Step One: Upgrade the Incode Web SDK

The full UXv2 experience is available starting on WebSDK version 1.83.0. Depending on your integration type (CDN or Package manager), you should 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}"
  }

Step Two: Replace ID capture-related methods

The new renderCaptureId() is a streamlined method. It incorporates the previously separate steps into a centralized ID capture process, as shown in the image.

For example, instead of using renderDocumentSelector() ➔ renderCamera("front") ➔renderCamera("back"), and/or renderCamera("passport"), you now use only renderCaptureId(). All logic is handled internally. The following code shows the changes you must make for the new ID capture experience.

// Remove all the logic and 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?

⚙️

Previously, many parameters had to be passed with the options object. Now, most parameters are automatically retrieved by the ID Capture module in your Flow or Workflow configuration.

2.2. What happened to the renderDocumentSelector() method?

You can toggle the Document Selector screen by selecting the option ID Capture ➔ "Show document chooser screen". You'll find this in your Flow or Workflow configuration, as shown here.

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

🚧

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

Step Three: Replace the renderCamera('selfie') method

The new renderCaptureFace() method is a direct replacement of renderCamera('selfie') The following code shows the changes you must make for 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?

⚙️

Previously, many parameters had to be passed with the options object. Now, most parameters are automatically retrieved by the Face Capture module in your Flow or Workflow configuration.

Step Four: Call processFace() after

In order to complete the face capture process with the new UI/UX experience, you must call the processFace() method after the face capture. The following code shows the changes you must make.

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

Step Five: Customization

Previously, customers who wanted to customize the capture experience used CSS classes. The new UX v2 uses Design Tokens as shown here.

uiConfig

export type UiConfig = {
  branding?: {
    logo?: { src?: string; height?: string };
    hideFooterBranding?: boolean;
  };
  closeButton?: {
    show?: boolean;
    position?: 'left' | 'right';
    offset?: number | string;
  };
  theming?: {
    designTokens?: DesignTokens
    shirtColor?: string;
  };
  notifications?: {
    minimal?: boolean;
  };
};

You can now customize the UI by passing an object with the value to overwrite, as shown in the following code. This allows for more direct customization while still 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.
}

For more information, review the Theming page.

Step Six: Turn on the UXv2 experience

Once you've completed these changes, just turn on the new experience. To do so, set forceIdV2 in renderIdCapture and forceV2in renderFaceCapture to true.