@kwik-id/sdk-web 0.1.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +211 -0
  2. package/dist/assets/image-processor.worker-CzywSQ7p.js +1 -0
  3. package/dist/components/kwik-id-verification.d.ts +13 -0
  4. package/dist/components/kwik-id-verification.d.ts.map +1 -0
  5. package/dist/index.d.ts +28 -0
  6. package/dist/index.d.ts.map +1 -0
  7. package/dist/kwik-id-sdk.js +72281 -0
  8. package/dist/kwik-id-sdk.umd.cjs +85 -0
  9. package/package.json +34 -0
package/README.md ADDED
@@ -0,0 +1,211 @@
1
+ # @kwik-id/sdk-web
2
+
3
+ CDN-ready Web Component for [KwikID](https://kwik-id.com) identity verification. Add KYC verification to any website with a single `<script>` tag — no framework required.
4
+
5
+ The `<kwik-id-verification>` element wraps the full React-powered SDK, so it's feature-identical to `@kwik-id/sdk-react`.
6
+
7
+ ## CDN Usage (Recommended)
8
+
9
+ Add one script tag — CSS is injected automatically:
10
+
11
+ ```html
12
+ <script src="https://cdn.jsdelivr.net/npm/@kwik-id/sdk-web/dist/kwik-id-sdk.umd.cjs"></script>
13
+
14
+ <kwik-id-verification
15
+ client-secret="your-client-secret"
16
+ app-name="My App"
17
+ theme-primary="#2563EB"
18
+ ></kwik-id-verification>
19
+
20
+ <script>
21
+ const el = document.querySelector("kwik-id-verification");
22
+
23
+ // Fires immediately when documents are uploaded and processing begins
24
+ el.addEventListener("kwik-id:submitted", (e) => {
25
+ console.log("Submitted! Job ID:", e.detail.jobId);
26
+ });
27
+
28
+ // Fires when the user dismisses the result screen
29
+ el.addEventListener("kwik-id:complete", (e) => {
30
+ console.log("User finished:", e.detail);
31
+ });
32
+
33
+ el.addEventListener("kwik-id:error", (e) => {
34
+ console.error("Verification error:", e.detail);
35
+ });
36
+ </script>
37
+ ```
38
+
39
+ ## npm Installation
40
+
41
+ ```bash
42
+ npm install @kwik-id/sdk-web
43
+ # or
44
+ pnpm add @kwik-id/sdk-web
45
+ # or
46
+ yarn add @kwik-id/sdk-web
47
+ ```
48
+
49
+ ```js
50
+ // The import auto-registers the <kwik-id-verification> custom element
51
+ import "@kwik-id/sdk-web";
52
+ ```
53
+
54
+ ## Integration Flow
55
+
56
+ ### 1. Create a session on your backend
57
+
58
+ Use [`@kwik-id/sdk-node`](https://www.npmjs.com/package/@kwik-id/sdk-node) to create a verification session:
59
+
60
+ ```js
61
+ // Your backend
62
+ const session = await kwikId.createSession({
63
+ referenceId: "user_123",
64
+ userName: "Jane Doe",
65
+ });
66
+ // Return session.token to the frontend as the clientSecret
67
+ ```
68
+
69
+ ### 2. Render the Web Component
70
+
71
+ ```html
72
+ <kwik-id-verification
73
+ client-secret="<token from your backend>"
74
+ app-name="My App"
75
+ theme-primary="#1E3A8A"
76
+ theme-accent="#FBBF24"
77
+ ></kwik-id-verification>
78
+ ```
79
+
80
+ ### 3. Listen for events
81
+
82
+ ```js
83
+ const el = document.querySelector("kwik-id-verification");
84
+
85
+ // Documents uploaded, processing started — save the jobId
86
+ el.addEventListener("kwik-id:submitted", (e) => {
87
+ console.log("Job ID:", e.detail.jobId);
88
+ // You'll receive final results via webhook on your backend
89
+ });
90
+
91
+ // User dismissed the result screen
92
+ el.addEventListener("kwik-id:complete", (e) => {
93
+ console.log("Done", e.detail);
94
+ });
95
+
96
+ el.addEventListener("kwik-id:error", (e) => {
97
+ console.error(e.detail);
98
+ });
99
+ ```
100
+
101
+ ## Attributes
102
+
103
+ | Attribute | Description |
104
+ |---|---|
105
+ | `client-secret` | **Required.** Session token from your backend |
106
+ | `app-name` | App name shown in the verification header |
107
+ | `theme-primary` | Primary brand color (hex, e.g. `#2563EB`) |
108
+ | `theme-accent` | Accent color (hex) |
109
+ | `theme-background` | Background color (hex) |
110
+ | `theme-foreground` | Foreground/text color (hex) |
111
+ | `show-logo` | Show org logo in header (`"true"` or `"false"`) |
112
+
113
+ ## Events
114
+
115
+ | Event | Description | `e.detail` |
116
+ |---|---|---|
117
+ | `kwik-id:submitted` | Documents uploaded, background processing started | `{ jobId: string }` |
118
+ | `kwik-id:complete` | User dismissed the result screen | `KYCFormData` |
119
+ | `kwik-id:error` | An error occurred | `Error` |
120
+
121
+ ## Vanilla JavaScript Example
122
+
123
+ ```html
124
+ <!DOCTYPE html>
125
+ <html>
126
+ <head>
127
+ <title>KYC Verification</title>
128
+ </head>
129
+ <body>
130
+ <div id="verification-container">
131
+ <button id="start-btn">Start Verification</button>
132
+ </div>
133
+
134
+ <script src="https://cdn.jsdelivr.net/npm/@kwik-id/sdk-web/dist/kwik-id-sdk.umd.cjs"></script>
135
+ <script>
136
+ document.getElementById("start-btn").addEventListener("click", async () => {
137
+ // Get session from your backend
138
+ const res = await fetch("/api/create-session", { method: "POST" });
139
+ const { clientSecret } = await res.json();
140
+
141
+ // Create and inject the verification element
142
+ const el = document.createElement("kwik-id-verification");
143
+ el.setAttribute("client-secret", clientSecret);
144
+ el.setAttribute("app-name", "My App");
145
+ el.setAttribute("theme-primary", "#2563EB");
146
+
147
+ el.addEventListener("kwik-id:submitted", (e) => {
148
+ console.log("Job ID:", e.detail.jobId);
149
+ });
150
+
151
+ el.addEventListener("kwik-id:complete", () => {
152
+ el.remove();
153
+ });
154
+
155
+ const container = document.getElementById("verification-container");
156
+ container.innerHTML = "";
157
+ container.appendChild(el);
158
+ });
159
+ </script>
160
+ </body>
161
+ </html>
162
+ ```
163
+
164
+ ## WordPress / No-Build Usage
165
+
166
+ ```html
167
+ <!-- In your page template or custom HTML block -->
168
+ <script src="https://cdn.jsdelivr.net/npm/@kwik-id/sdk-web/dist/kwik-id-sdk.umd.cjs"></script>
169
+
170
+ <kwik-id-verification
171
+ client-secret="your-client-secret"
172
+ app-name="My Business"
173
+ theme-primary="#1E3A8A"
174
+ ></kwik-id-verification>
175
+ ```
176
+
177
+ ## Advanced: Direct SDK Access
178
+
179
+ The package also re-exports the full `@kwik-id/sdk-core` API for advanced use cases:
180
+
181
+ ```js
182
+ import { KwikIdSDK, CameraEngine, QualityAnalyzer, FaceDetector } from "@kwik-id/sdk-web";
183
+
184
+ const sdk = new KwikIdSDK({
185
+ clientSecret: "...",
186
+ baseUrl: "https://api.kwik-id.com",
187
+ });
188
+
189
+ await sdk.initialize();
190
+ // Use camera, quality, face detection, liveness APIs directly
191
+ ```
192
+
193
+ ## Supported Document Types
194
+
195
+ - National ID Card
196
+ - Passport
197
+ - Driver's License
198
+ - Voter's Card
199
+
200
+ ## Browser Support
201
+
202
+ - Chrome 80+
203
+ - Firefox 78+
204
+ - Safari 14+
205
+ - Edge 80+
206
+
207
+ Camera access requires HTTPS in production (except `localhost` for development).
208
+
209
+ ## License
210
+
211
+ MIT
package/dist/assets/image-processor.worker-CzywSQ7p.js ADDED
@@ -0,0 +1 @@
1
+ !function(){"use strict";self.onmessage=async e=>{const{id:t,type:s}=e.data;if("analyze-quality"===s){const{buffer:s,width:a,height:i}=e.data,o=new Uint8ClampedArray(s),c=function(e){let t=0;const s=e.length/4;for(let o=0;o<e.length;o+=4)t+=.299*e[o]+.587*e[o+1]+.114*e[o+2];const a=t/s,i=Math.min(100,a/255*100);return a<50?{score:i,isAcceptable:!1,message:"Image is too dark. Please ensure better lighting."}:a>220?{score:i,isAcceptable:!1,message:"Image is too bright. Please reduce exposure or lighting."}:{score:i,isAcceptable:!0}}(o),n=function(e,t,s){const a=new Float32Array(t*s);for(let g=0;g<e.length;g+=4)a[g/4]=.299*e[g]+.587*e[g+1]+.114*e[g+2];let i=0,o=0,c=0;for(let g=1;g<s-1;g++)for(let e=1;e<t-1;e++){const s=g*t+e,n=a[s-t]+a[s-1]-4*a[s]+a[s+1]+a[s+t];i+=n,o+=n*n,c++}const n=i/c,r=o/c-n*n,l=Math.min(100,r/500*100);return r<0?{score:l,isAcceptable:!1,message:"Image is too blurry. Please hold the camera steady."}:{score:l,isAcceptable:!0}}(o,a,i),r={score:(c.score+n.score)/2,isAcceptable:c.isAcceptable&&n.isAcceptable,message:c.isAcceptable?n.isAcceptable?void 0:n.message:c.message};return void self.postMessage({id:t,luminance:c,blur:n,overall:r})}if("compress"===s){const{bitmap:s,maxSizeKB:a,quality:i,maxWidth:o,maxHeight:c}=e.data;if("undefined"==typeof OffscreenCanvas)return self.postMessage({id:t,fallback:!0}),void s.close();const n=Math.min(s.width,o??1920),r=Math.min(s.height,c??1920),l=new OffscreenCanvas(n,r);l.getContext("2d").drawImage(s,0,0,n,r),s.close();const g=1024*(a??500);let f=i??.8,m=await l.convertToBlob({type:"image/jpeg",quality:f}),p=0;for(;m.size>g&&p<5;)f*=.8,m=await l.convertToBlob({type:"image/jpeg",quality:f}),p++;const d=await m.arrayBuffer();self.postMessage({id:t,buffer:d},[d])}}}();
package/dist/components/kwik-id-verification.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ export declare class KwikIdVerificationElement extends HTMLElement {
2
+ private reactRoot;
3
+ private container;
4
+ static get observedAttributes(): string[];
5
+ connectedCallback(): void;
6
+ disconnectedCallback(): void;
7
+ attributeChangedCallback(): void;
8
+ /** Programmatically reset the verification flow */
9
+ reset(): void;
10
+ private buildConfig;
11
+ private mount;
12
+ }
13
+ //# sourceMappingURL=kwik-id-verification.d.ts.map
package/dist/components/kwik-id-verification.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kwik-id-verification.d.ts","sourceRoot":"","sources":["../../src/components/kwik-id-verification.tsx"],"names":[],"mappings":"AA6CA,qBAAa,yBAA0B,SAAQ,WAAW;IACtD,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,SAAS,CAA+B;IAEhD,MAAM,KAAK,kBAAkB,aAU5B;IAED,iBAAiB;IAWjB,oBAAoB;IAMpB,wBAAwB;IAIxB,mDAAmD;IACnD,KAAK;IAIL,OAAO,CAAC,WAAW;IA8CnB,OAAO,CAAC,KAAK;CAGhB"}
package/dist/index.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ /**
2
+ * KwikId SDK Web
3
+ *
4
+ * CDN distribution of KwikID — the Web Component wraps sdk-react so all UI
5
+ * is React-powered and feature-identical to the npm React package.
6
+ *
7
+ * CDN Usage (one script tag — CSS is injected automatically):
8
+ * <script src="https://cdn.jsdelivr.net/npm/@kwik-id/sdk-web/dist/kwik-id-sdk.umd.cjs"></script>
9
+ *
10
+ * <kwik-id-verification
11
+ * client-secret="your-secret"
12
+ * app-name="My App"
13
+ * theme-primary="#1E3A8A"
14
+ * ></kwik-id-verification>
15
+ *
16
+ * <script>
17
+ * document.querySelector('kwik-id-verification').addEventListener('kwik-id:complete', e => {
18
+ * console.log('Verified:', e.detail);
19
+ * });
20
+ * </script>
21
+ *
22
+ * @packageDocumentation
23
+ */
24
+ export { KwikIdVerificationElement } from './components/kwik-id-verification';
25
+ export { KwikIdSDK, type KwikIdSDKOptions, EventEmitter, CameraEngine, DEFAULT_CAMERA_CONFIG, QualityAnalyzer, DEFAULT_QUALITY_CONFIG, getImageDataFromVideo, getImageDataFromFile, getImageDataFromBlob, FaceDetector, DEFAULT_FACE_DETECTOR_CONFIG, AlignmentGuide, DEFAULT_ALIGNMENT_CONFIG, PassiveLivenessDetector, DEFAULT_PASSIVE_LIVENESS_CONFIG, ActiveLivenessDetector, SessionManager, generateFingerprint, detectEmulator, generateNonce, generateSessionId, ApiClient, ApiError, HandoffManager, detectDeviceType, isDesktop, shouldOfferHandoff, } from '../../sdk-core/src/index.ts';
26
+ export type { KwikIdConfig, KwikIdTheme, CameraConfig, CameraCapabilities, CaptureMetadata, QualityConfig, QualityCheckResult, QualityResult, QualityGuidance, FaceDetectorConfig, BoundingBox, Landmark, FacePose, DetectedFace, AlignmentConfig, AlignmentMetrics, AlignmentGuidance, AlignmentResult, ChallengeType, Challenge, ChallengeResult, PassiveLivenessConfig, PassiveLivenessResult, LivenessResult, DeviceFingerprint, Session, SecurePayload, DocumentType, CaptureType, ApiClientConfig, SessionResponse, UploadUrlRequest, UploadUrlResponse, ConfirmUploadRequest, UploadConfirmResponse, SubmissionPayload, VerificationScores, ExtractedData, VerificationResult, SubmitResponse, StatusResponse, KwikIdEvents, KwikIdEventName, KwikIdEventHandler, SDKState, SDKStatus, HandoffState, HandoffStatus, DeviceInfo, HandoffCreateResponse, HandoffValidateResponse, HandoffRedeemResponse, } from '../../sdk-core/src/index.ts';
27
+ export declare const VERSION = "0.0.1";
28
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,OAAO,EAEL,SAAS,EACT,KAAK,gBAAgB,EAGrB,YAAY,EAGZ,YAAY,EACZ,qBAAqB,EAGrB,eAAe,EACf,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,EAGpB,YAAY,EACZ,4BAA4B,EAC5B,cAAc,EACd,wBAAwB,EAGxB,uBAAuB,EACvB,+BAA+B,EAC/B,sBAAsB,EAGtB,cAAc,EACd,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,iBAAiB,EAGjB,SAAS,EACT,QAAQ,EAGR,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAG3B,YAAY,EAEV,YAAY,EACZ,WAAW,EAGX,YAAY,EACZ,kBAAkB,EAClB,eAAe,EAGf,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,eAAe,EAGf,kBAAkB,EAClB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EAGf,aAAa,EACb,SAAS,EACT,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EAGd,iBAAiB,EACjB,OAAO,EACP,aAAa,EAGb,YAAY,EACZ,WAAW,EACX,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,cAAc,EAGd,YAAY,EACZ,eAAe,EACf,kBAAkB,EAGlB,QAAQ,EACR,SAAS,EAGT,YAAY,EACZ,aAAa,EACb,UAAU,EACV,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAG3B,eAAO,MAAM,OAAO,UAAU,CAAC"}