Web SDK Architecture
How the eKYC Web SDK is organized internally: the module layout, the five architectural layers, and the classes that make up each one. Useful when extending the SDK or injecting custom views.
Module Layout
| Field | Type | Description |
|---|---|---|
CakeEkycSDK.ts | module | Main entry point, containing the CakeEkycSDK class. |
common/ | directory | Utility classes and constants used across the SDK. |
data/ | directory | Data operations — HTTP requests and repository logic. |
face/ | directory | Face scanning, verification and configuration. |
nid/ | directory | NID scanning, verification and configuration. |
pipeline/ | directory | Processing workflow logic. |
utils/ | directory | Utility functions. |
Layers
1. Presentation Layer
The UI that the user interacts with — renders elements, captures input, displays feedback.
| Field | Type | Description |
|---|---|---|
DefaultCakeFaceScanView | class | Face scanning UI. |
DefaultCakeNIDScanView | class | NID scanning UI. |
DefaultCakeNIDPreview | class | NID confirmation UI. |
DefaultCakeLoadingView | class | Loading UI. |
2. Business Logic Layer
| Field | Type | Description |
|---|---|---|
CakeEkycSDK | class | Orchestrates the flow and connects components. |
DefaultCakeFaceScanner | class | Runs a face scan. |
CakeNIDScanTask | class | Runs an NID scan. |
CakeFaceVerifyStep | class | Verifies face images. |
CakeNIDVerifyStep | class | Verifies NID images. |
FaceAssessorFactory | class | Builds the composite face assessor. |
NIDAssessorFactory | class | Builds the composite NID assessor. |
3. Data Access Layer
| Field | Type | Description |
|---|---|---|
CakeKYCRepository | interface | Contract for all API calls. |
DefaultCakeKYCRepository | class | Implementation — handles every API call including image uploads. |
HttpClient | class | Performs the HTTP requests. |
4. Configuration Layer
| Field | Type | Description |
|---|---|---|
SDKConfigParams | type | Base URL, token and resource path. |
CakeLivenessConfig | class | Local checks, remote checks and schemas for liveness. |
CakeNIDConfig | class | Local and remote checks for NID. |
DefaultCakeConfigParsers | class | Parses configuration fetched from the server. |
5. Model Layer
| Field | Type | Description |
|---|---|---|
CESUploadRequest / CESUploadResponse | type | Image upload. |
CESCardSanityRequest / CESCardSanityResponse | type | Card sanity. |
CESCardTamperingRequest / CESCardTamperingResponse | type | Card tampering. |
CESReadCardInfoRequest / CESReadCardInfoResponse | type | Card info extraction. |
CESFaceSanityRequest / CESFaceSanityResponse | type | Face sanity. |
CESFaceLivenessRequest / CESFaceLivenessResponse | type | Face liveness. |
CESCompareFaceRequest / CESCompareFaceResponse | type | Face comparison. |
CakeNIDCardSide | enum | FRONT or BACK. |
Communication Flow
- The user interacts with the Presentation Layer.
- The Business Logic Layer processes those interactions.
- Where needed, it requests data from the Data Access Layer.
- The Data Access Layer calls the external service — for example uploading an image.
- Results flow back up through the layers to update the UI.
Image upload happens in the Data Access Layer: DefaultCakeKYCRepository.uploadImage() builds a FormData and posts it to the API endpoint.
CakeEkycSDK
The main interface.
| Field | Type | Description |
|---|---|---|
container | HTMLElement | DOM element where the SDK renders its UI. |
faceConfig | CakeLivenessConfig | Configuration for face operations. |
nidConfig | CakeNIDConfig | Configuration for NID operations. |
sdkConfig | SDKConfigParams | General SDK configuration. |
repository | CakeKYCRepository | Handles API calls and data operations. |
Methods
| Field | Type | Description |
|---|---|---|
initialize(container, sdkConfig) | Promise<CakeEkycSDK> | Initializes the SDK, fetching and parsing configuration from the server. |
scanFace() | CakeFaceScanner | Starts a face scan using a face scan view and assessor. |
scanNID(cardSide, elements?) | CakeNIDScanner | null | Starts an NID scan for one side, using injected or default views and assessors. |
verifyNID(input) | CakeNIDVerifyStep | Verifies the scanned NID. |
verifyFaces(faceImages, isFaceAuth?) | CakeFaceVerifyStep | Verifies face images for liveness or authentication. |
verifyPair(params) | Promise<CESCompareFaceResponse> | Compares two faces for similarity. |
verifyFaceAuthentication(params) | Promise<CESVerifyFaceAuthenticationResponse> | Verifies face authentication server-side. |
CakeKYCRepository
The data-access contract. Each method maps to a API endpoint.
| Field | Type | Description |
|---|---|---|
config() | Promise<HttpResponse<CESConfigResponse>> | Fetches SDK configuration. |
uploadImage(params) | Promise<HttpResponse<CESUploadResponse>> | Upload Image |
checkCardSanity(params) | Promise<HttpResponse<CESCardSanityResponse>> | Verify ID Card Sanity |
checkCardTampering(params) | Promise<HttpResponse<CESCardTamperingResponse>> | Detect ID Card Tampering |
readIdCardInfo(params) | Promise<HttpResponse<CESReadCardInfoResponse>> | Read ID Card Info |
checFaceSanity(params) | Promise<HttpResponse<CESFaceSanityResponse>> | Verify Face Sanity |
checFaceLiveness(params) | Promise<HttpResponse<CESFaceLivenessResponse>> | Verify Face Liveness |
compareFace(params) | Promise<HttpResponse<CESCompareFaceResponse>> | Compare Faces |
verifyFaceAuthentication(params) | Promise<HttpResponse<CESVerifyFaceAuthenticationResponse>> | FaceAuthen verification. |
INFO
checFaceSanity and checFaceLiveness are spelled without the second k in the SDK source. Use them as written — this is the actual method name, not a typo in this documentation.
Injecting Custom Views
scanNID accepts a CakeNIDScanInjectElements so you can replace the default UI.
| Field | Type | Description |
|---|---|---|
scanView | CakeNIDScanView | Implements render, presentAccessingResult, startCamera, stopCamera. |
assessor | NIDAssessor | Implements execute(input): NIDAssessingResult. |
confirmationView | CakeNIDPreview | Implements show, hide, onConfirm, onRetry. |
The same pattern applies to face scanning via CakeFaceScanView and FaceAssessor.
Next Steps
- Web SDK Reference — the public API surface
- Web SDK Integration — setup and scanning