New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@ballerine/web-ui-sdk
Advanced tools
@ballerine/web-ui-sdk - npm Package Compare versions
Comparing version 1.4.36 to 1.4.37
@@ -24,3 +24,3 @@ { | ||
| "private": false, | ||
| "version": "1.4.36", | ||
| "version": "1.4.37", | ||
| "type": "module", | ||
@@ -40,2 +40,3 @@ "files": [ | ||
| "@babel/core": "^7.18.5", | ||
| "@cspell/cspell-types": "^6.31.1", | ||
| "@playwright/test": "^1.27.1", | ||
@@ -53,3 +54,2 @@ "@sveltejs/vite-plugin-svelte": "1.0.8", | ||
| "cspell": "^6.31.2", | ||
| "@cspell/cspell-types": "^6.31.1", | ||
| "editorconfig": "^1.0.1", | ||
@@ -63,4 +63,4 @@ "eslint": "8.22.0", | ||
| "postcss": "^8.4.31", | ||
| "prettier": "^2.7.1", | ||
| "prettier-plugin-svelte": "^2.8.0", | ||
| "prettier": "^3.2.4", | ||
| "prettier-plugin-svelte": "^3.1.2", | ||
| "rollup-plugin-visualizer": "^5.8.3", | ||
@@ -79,3 +79,3 @@ "svelte": "^3.39.0", | ||
| "dependencies": { | ||
| "@ballerine/common": "0.7.39", | ||
| "@ballerine/common": "0.7.40", | ||
| "@zerodevx/svelte-toast": "^0.8.0", | ||
@@ -99,4 +99,4 @@ "compressorjs": "^1.1.1", | ||
| "check": "svelte-check --tsconfig ./tsconfig.json", | ||
| "format": "prettier --write \"./**/*.{cjs,js,svelte,html,ts,mts}\"", | ||
| "format:check": "prettier --check \"./**/*.{cjs,js,svelte,html,ts,mts}\"", | ||
| "_format": "prettier --write \"./**/*.{cjs,js,svelte,html,ts,mts}\"", | ||
| "_format:check": "prettier --check \"./**/*.{cjs,js,svelte,html,ts,mts}\"", | ||
| "lint": "eslint \"./**/*.{cjs,js,ts,mts,svelte}\" --fix", | ||
@@ -103,0 +103,0 @@ "storybook": "start-storybook -p 6006", |
189
README.md
| # Web SDK Flows | ||
| ### Description | ||
| Web SDK Flows can generate custom made, branded flows to collect KYC/KYB documents and user information. | ||
@@ -10,9 +11,10 @@ The SDK UI is embeddable inside existing apps or deployed as an webapp. | ||
| **Why you should use Ballerine's flows:** | ||
| * Pre-made KYC/KYB templates. | ||
| * Customizable UI and flow to fit your desired experience and brand. | ||
| * Ability to use different vendors in the backend over the same flow with. | ||
| * Multi platform support (Desktop, mobile web, mobile native). | ||
| * All camera and different devices edge cases covered and tested. | ||
| * Small and fast, built with Svelte (less than 50kb gzipped). | ||
| - Pre-made KYC/KYB templates. | ||
| - Customizable UI and flow to fit your desired experience and brand. | ||
| - Ability to use different vendors in the backend over the same flow with. | ||
| - Multi platform support (Desktop, mobile web, mobile native). | ||
| - All camera and different devices edge cases covered and tested. | ||
| - Small and fast, built with Svelte (less than 50kb gzipped). | ||
| Live examples: | ||
@@ -24,3 +26,3 @@ [KYC 1](https://simple-kyc-demo.ballerine.app/), [KYC 2](https://simple-kyc-demo.ballerine.app/), [KYB](https://simple-kyc-demo.ballerine.app/) | ||
| ___ | ||
| --- | ||
@@ -34,5 +36,6 @@ <details><summary>Some examples of what you can do with it</summary> | ||
| ___ | ||
| --- | ||
| ### Getting Started | ||
| #### Installation | ||
@@ -53,3 +56,5 @@ | ||
| ``` | ||
| <ins>Package Managers:</ins> | ||
| ```javascript | ||
@@ -65,13 +70,15 @@ # NPM | ||
| #### Flows API | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `uiConfig` | [FlowsUIConfig](#ui-configuration) |Initializing flows, preloading needed assets and ui packs| | ||
| | `endUserInfo` | [EndUserInfo]()| Use data like ID, name etc.. | | ||
| | `backendConfig` | [FlowsBackendConfig](#backend-configuration) |Backend endpoint the flows should interact with| | ||
| | `translations` | [FlowsTranslations](#translations) | Change the config after init function| | ||
| | Config Parameter | Type | Description | | ||
| | ---------------- | -------------------------------------------- | --------------------------------------------------------- | | ||
| | `uiConfig` | [FlowsUIConfig](#ui-configuration) | Initializing flows, preloading needed assets and ui packs | | ||
| | `endUserInfo` | [EndUserInfo]() | Use data like ID, name etc.. | | ||
| | `backendConfig` | [FlowsBackendConfig](#backend-configuration) | Backend endpoint the flows should interact with | | ||
| | `translations` | [FlowsTranslations](#translations) | Change the config after init function | | ||
| #### Embedded Flows | ||
| CDN: | ||
| Add this code to your index.html header | ||
| ```javascript | ||
@@ -88,5 +95,7 @@ // 1. Add script (see installation) | ||
| ``` | ||
| [example folder]() | ||
| Package Manager: | ||
| ```javascript | ||
@@ -101,6 +110,9 @@ import { flows as ballerineFlows } from '@ballerine/web-ui-sdk'; | ||
| ``` | ||
| [example folder]() | ||
| #### Standalone/Iframe Flows | ||
| Code example: | ||
| ```html | ||
@@ -114,21 +126,21 @@ <script | ||
| <script> | ||
| const initConfig = { | ||
| "flows": { "my-kyc-flow": { | ||
| "steps": [ | ||
| {"name": "welcome", "id": "welcome" }, | ||
| { "name": "document-selection", "id": "document-selection", | ||
| "documentOptions": ["id_card", "drivers_license", "passport"]}, | ||
| { "name": "document-photo", "id": "identity-document-shot" }, | ||
| { "name": "check-document", "id": "identity-document-user-check" }, | ||
| { "name": "document-photo-back-start", "id": "document-photo-back-start"}, | ||
| { "name": "selfie", "id": "selfie"}, | ||
| { "name": "check-selfie", "id": "check-selfie" }, | ||
| { "name": "loading", "id": "custom-loader" } | ||
| ]} | ||
| } | ||
| } | ||
| BallerineSDK.flows.init(initConfig).then(() => { | ||
| BallerineSDK.flows.mount('my-kyc-flow', 'flow-host-element', {}); | ||
| }); | ||
| } | ||
| const initConfig = { | ||
| "flows": { "my-kyc-flow": { | ||
| "steps": [ | ||
| {"name": "welcome", "id": "welcome" }, | ||
| { "name": "document-selection", "id": "document-selection", | ||
| "documentOptions": ["id_card", "drivers_license", "passport"]}, | ||
| { "name": "document-photo", "id": "identity-document-shot" }, | ||
| { "name": "check-document", "id": "identity-document-user-check" }, | ||
| { "name": "document-photo-back-start", "id": "document-photo-back-start"}, | ||
| { "name": "selfie", "id": "selfie"}, | ||
| { "name": "check-selfie", "id": "check-selfie" }, | ||
| { "name": "loading", "id": "custom-loader" } | ||
| ]} | ||
| } | ||
| } | ||
| BallerineSDK.flows.init(initConfig).then(() => { | ||
| BallerineSDK.flows.mount('my-kyc-flow', 'flow-host-element', {}); | ||
| }); | ||
| } | ||
| </script> | ||
@@ -142,5 +154,6 @@ ``` | ||
| This way we can enjoy both worlds: | ||
| * Web UI: Flexible UI that can be changes instantly from the server (no app deployments or store submissions). | ||
| * Native API's: Native camera, deep behavioral analysis, ekyc and more.. | ||
| - Web UI: Flexible UI that can be changes instantly from the server (no app deployments or store submissions). | ||
| - Native API's: Native camera, deep behavioral analysis, ekyc and more.. | ||
| See Android and iOS repositories for guidance: | ||
@@ -150,3 +163,4 @@ | ||
| ___ | ||
| --- | ||
| ### Customization | ||
@@ -159,49 +173,58 @@ | ||
| #### Flows Configuration | ||
| Flow Initialization: | ||
| ``` | ||
| BallerineSDK.flows.init([CONFIG]) | ||
| ``` | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `uiConfig` | [FlowsUIConfig](#ui-configuration) |Initializing flows, preloading needed assets and ui packs| | ||
| | `endUserInfo` | [EndUserInfo]()| Use data like ID, name etc.. | | ||
| | `backendConfig` | [FlowsBackendConfig](#backend-configuration) |Backend endpoint the flows should interact with| | ||
| | `translations` | [FlowsTranslations](#translations) | Change the config after init function| | ||
| ``` | ||
| BallerineSDK.flows.init([CONFIG]) | ||
| ``` | ||
| | Config Parameter | Type | Description | | ||
| | ---------------- | -------------------------------------------- | --------------------------------------------------------- | | ||
| | `uiConfig` | [FlowsUIConfig](#ui-configuration) | Initializing flows, preloading needed assets and ui packs | | ||
| | `endUserInfo` | [EndUserInfo]() | Use data like ID, name etc.. | | ||
| | `backendConfig` | [FlowsBackendConfig](#backend-configuration) | Backend endpoint the flows should interact with | | ||
| | `translations` | [FlowsTranslations](#translations) | Change the config after init function | | ||
| Running a flow: | ||
| ``` | ||
| ``` | ||
| BallerineSDK.flows.mount('my-flow', elementId, [CONFIG]); | ||
| // or | ||
| BallerineSDK.flows.openModal('my-flow', [CONFIG]); | ||
| ``` | ||
| ``` | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `callbacks` | [FlowsCallbacksConfig](#flowscallbacksconfig) |An object containing callback methods (see below)| | ||
| | Config Parameter | Type | Description | | ||
| | ---------------- | --------------------------------------------- | ------------------------------------------------- | | ||
| | `callbacks` | [FlowsCallbacksConfig](#flowscallbacksconfig) | An object containing callback methods (see below) | | ||
| ##### FlowsCallbacksConfig: | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `onFlowComplete` | IFlowCompletePayload |User completed the flow| | ||
| | `onFlowExit` | IFlowExitPayload |User quits the flow (back button on the first page or pressed close buttons)| | ||
| | `onFlowError` | IFlowErrorPayload |Unexpected errors| | ||
| | `onFlowNavigationUpdate` | IFlowNavigationUpdatePayload |User moved between steps| | ||
| ___ | ||
| | Config Parameter | Type | Description | | ||
| | ------------------------ | ---------------------------- | ---------------------------------------------------------------------------- | | ||
| | `onFlowComplete` | IFlowCompletePayload | User completed the flow | | ||
| | `onFlowExit` | IFlowExitPayload | User quits the flow (back button on the first page or pressed close buttons) | | ||
| | `onFlowError` | IFlowErrorPayload | Unexpected errors | | ||
| | `onFlowNavigationUpdate` | IFlowNavigationUpdatePayload | User moved between steps | | ||
| --- | ||
| #### UI Configuration | ||
| **Flows UI can be configured in three levels:** | ||
| 1. Theme and theme styles | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `uiPack` | `string` - Name or URL |Ui Pack is a complete bundles of styles, assets and translations| | ||
| | `theme.general` | FlowsGeneralTheme |General colors, paddings, fonts..| | ||
| | Config Parameter | Type | Description | | ||
| | ---------------- | ---------------------- | ---------------------------------------------------------------- | | ||
| | `uiPack` | `string` - Name or URL | Ui Pack is a complete bundles of styles, assets and translations | | ||
| | `theme.general` | FlowsGeneralTheme | General colors, paddings, fonts.. | | ||
| 2. General components styles (**overrides theme**) | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `theme.layout` | FlowsGeneralTheme |Global layout css | ||
| | `theme.paragraph` | FlowsGeneralTheme |Global paragraph css | ||
| | `theme.button` | FlowsGeneralTheme |Global button css | ||
| | Config Parameter | Type | Description | | ||
| | ----------------- | ----------------- | -------------------- | | ||
| | `theme.layout` | FlowsGeneralTheme | Global layout css | | ||
| | `theme.paragraph` | FlowsGeneralTheme | Global paragraph css | | ||
| | `theme.button` | FlowsGeneralTheme | Global button css | | ||
| ... See more | ||
@@ -211,25 +234,29 @@ | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `theme.flows['FlowName'].step` | ICSSProperties | Step includes style object and styles for each element | ||
| | Config Parameter | Type | Description | | ||
| | ------------------------------ | -------------- | ------------------------------------------------------ | | ||
| | `theme.flows['FlowName'].step` | ICSSProperties | Step includes style object and styles for each element | | ||
| ... See more | ||
| As the level is lower it will override the upper ones | ||
| ___ | ||
| --- | ||
| #### Translations | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `remoteUrl` | `string (URL)` | Get a full translation json from remote url | ||
| | `overrides` | `Record<string, string>` |Override default translations or remote translations | ||
| | Config Parameter | Type | Description | | ||
| | ---------------- | ------------------------ | ---------------------------------------------------- | | ||
| | `remoteUrl` | `string (URL)` | Get a full translation json from remote url | | ||
| | `overrides` | `Record<string, string>` | Override default translations or remote translations | | ||
| ___ | ||
| --- | ||
| #### Backend Configuration | ||
| | Config Parameter | Type | Description| | ||
| | - | - | - | | ||
| | `baseUrl` | `string (URL)` | Backend base URL | ||
| | `auth` | BEAuthConfig | Auth method and Authorization header | ||
| | `endpoints` | BEEndpoints | List of endpoints for each action | ||
| ----- | ||
| | Config Parameter | Type | Description | | ||
| | ---------------- | -------------- | ------------------------------------ | | ||
| | `baseUrl` | `string (URL)` | Backend base URL | | ||
| | `auth` | BEAuthConfig | Auth method and Authorization header | | ||
| | `endpoints` | BEEndpoints | List of endpoints for each action | | ||
| --- |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by17.07%
14966
- Number of lines in readme file
- increased by12.05%
251
Dependency changes
+ Added@ballerine/common@0.7.40(transitive)
- Removed@ballerine/common@0.7.39(transitive)
Updated@ballerine/common@0.7.40