{"_id":"@ayasofyazilim/web-ui-sdk","name":"@ayasofyazilim/web-ui-sdk","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"author":{"name":"Ballerine","email":"dev@ballerine.com"},"repository":{"type":"git","url":"git+https://github.com/ballerine-io/ballerine.git#main"},"description":"Ballerine is an open-source infrastructure for user identity and risk management. Compose verification processes for any vertical and geography using modular building blocks, components, and 3rd party integrations.","keywords":["ballerine","fintech","risk","verification","authentication","authorization","auth","service","identity","kyc","kyb"],"types":"dist/index.d.ts","name":"@ayasofyazilim/web-ui-sdk","private":false,"version":"0.0.1","type":"module","main":"./dist/ballerine-sdk.umd.cjs","module":"./dist/ballerine-sdk.js","exports":{".":{"import":"./dist/ballerine-sdk.js","require":"./dist/ballerine-sdk.umd.cjs"}},"scripts":{"spellcheck":"cspell \"*\"","dev":"vite -c vite.dev.config.ts","build":"vite build","deprecated:build:sdk":"rollup --config","start":"vite preview","test":"vitest run","test:unit":"vitest run","test:watch":"vitest","test:e2e":"playwright test","playwright:install":"playwright install --with-deps","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}\"","lint":"eslint \"./**/*.{cjs,js,ts,mts,svelte}\" --fix","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","build:examples":"npm run build && for i in ./examples/sdk ./examples/standalone ./examples/standalone-future; do cp -R ./dist/ballerine-sdk.umd.cjs $i; done","example:sdk":"npm run build:examples && npx http-server ./examples/sdk -p 8081","example:standalone":"npm run build:examples && npx http-server ./examples/standalone -p 9090","example:standalone-future":"npm run build:examples && npx http-server ./examples/standalone-future -p 9090","deploy:cdn:cf":"vite build && aws s3 cp ./dist/ballerine-sdk.umd.cjs s3://blrn-cdn-prod/js/$npm_package_version/ballerine-sdk.umd.cjs && aws s3 cp ./dist/ballerine-sdk.umd.cjs.map s3://blrn-cdn-prod/js/$npm_package_version/ballerine-sdk.umd.cjs.map","publish:patch":"vite build && npm version patch && npm publish && npm run deploy:cdn:cf"},"devDependencies":{"@babel/core":"^7.18.5","@cspell/cspell-types":"^6.31.1","@playwright/test":"^1.27.1","@sveltejs/vite-plugin-svelte":"1.0.8","@testing-library/jest-dom":"^5.16.5","@testing-library/svelte":"^3.2.2","@tsconfig/svelte":"^2.0.1","@types/jslib-html5-camera-photo":"^3.1.2","@types/lodash.keyby":"^4.6.7","@types/node":"^18.11.9","@types/testing-library__jest-dom":"^5.14.5","@typescript-eslint/eslint-plugin":"^5.41.0","@typescript-eslint/parser":"^5.41.0","cspell":"^6.31.2","editorconfig":"^1.0.1","eslint":"8.22.0","eslint-config-prettier":"^8.5.0","eslint-plugin-storybook":"^0.6.6","eslint-plugin-svelte3":"^4.0.0","eslint-plugin-unused-imports":"^2.0.0","jsdom":"^20.0.2","postcss":"^8.4.31","prettier":"^3.2.4","prettier-plugin-svelte":"^3.1.2","rollup-plugin-visualizer":"^5.8.3","svelte":"^3.39.0","svelte-check":"^2.2.7","svelte-preprocess":"^4.9.8","typedoc":"^0.23.23","typedoc-plugin-markdown":"^3.14.0","typescript":"^4.5.4","vite":"4.5.3","vite-plugin-dts":"^1.6.6","vite-plugin-html":"^3.2.0","vitest":"^0.24.5"},"dependencies":{"@ballerine/common":"0.9.92","@zerodevx/svelte-toast":"^0.8.0","compressorjs":"^1.1.1","deepmerge":"^4.3.0","dotenv":"^16.0.3","jslib-html5-camera-photo":"^3.3.3"},"_id":"@ayasofyazilim/web-ui-sdk@0.0.1","bugs":{"url":"https://github.com/ballerine-io/ballerine/issues"},"homepage":"https://github.com/ballerine-io/ballerine/tree/main#readme","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-TaMLAhgkU/LZqZvRXKDENy5FEV/pWFw/rGj9VKbzMJ6xDNzdp2NcWSAyzXEJsmYv2zjFdTAtlH6nu4ylUA+WdA==","shasum":"cd299b10a6a3768521f8789bca7829cf5bdda001","tarball":"https://registry.npmjs.org/@ayasofyazilim/web-ui-sdk/-/web-ui-sdk-0.0.1.tgz","fileCount":3,"unpackedSize":14970,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD5VD8uQc1wHRpru1w91ZBlU7sHCJRFz5FudBVV1TfpmgIhAMgNWgza05S2WNwwKKZu8xlFc6YtoN3wbbV0OXBOAZKt"}]},"_npmUser":{"name":"ertugrulcan-ays","email":"ertugrul.bakas@ayasofyazilim.com"},"directories":{},"maintainers":[{"name":"ayasofyazilim-main","email":"info@ayasofyazilim.com"},{"name":"ertugrulcan-ays","email":"ertugrul.bakas@ayasofyazilim.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web-ui-sdk_0.0.1_1745847499716_0.7425692545610487"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-28T13:38:19.609Z","0.0.1":"2025-04-28T13:38:19.910Z","modified":"2025-04-28T13:38:20.523Z"},"maintainers":[{"name":"ayasofyazilim-main","email":"info@ayasofyazilim.com"},{"name":"ertugrulcan-ays","email":"ertugrul.bakas@ayasofyazilim.com"}],"description":"Ballerine is an open-source infrastructure for user identity and risk management. Compose verification processes for any vertical and geography using modular building blocks, components, and 3rd party integrations.","homepage":"https://github.com/ballerine-io/ballerine/tree/main#readme","keywords":["ballerine","fintech","risk","verification","authentication","authorization","auth","service","identity","kyc","kyb"],"repository":{"type":"git","url":"git+https://github.com/ballerine-io/ballerine.git#main"},"author":{"name":"Ballerine","email":"dev@ballerine.com"},"bugs":{"url":"https://github.com/ballerine-io/ballerine/issues"},"readme":"# Web SDK Flows\n\n### Description\n\nWeb SDK Flows can generate custom made, branded flows to collect KYC/KYB documents and user information.\nThe SDK UI is embeddable inside existing apps or deployed as an webapp.\n\n<img src=\"https://blrn-staging-assets.s3.eu-central-1.amazonaws.com/phones.png\">\n\n**Why you should use Ballerine's flows:**\n\n- Pre-made KYC/KYB templates.\n- Customizable UI and flow to fit your desired experience and brand.\n- Ability to use different vendors in the backend over the same flow with.\n- Multi platform support (Desktop, mobile web, mobile native).\n- All camera and different devices edge cases covered and tested.\n- Small and fast, built with Svelte (less than 50kb gzipped).\n\nLive examples:\n[KYC 1](https://simple-kyc-demo.ballerine.app/), [KYC 2](https://simple-kyc-demo.ballerine.app/), [KYB](https://simple-kyc-demo.ballerine.app/)\n\nDemo project:\n[View in jsfiddle](https://jsfiddle.net/ballerine/7d0g53xn)\n\n---\n\n<details><summary>Some examples of what you can do with it</summary>\n-  Create a custom flow you can use with any identity verification vendor.\n-  Create a custom flow that your customers can receive in an SMS.\n-  Create different types of flows for different types of customers.\n- And more...\n</details>\n\n---\n\n### Getting Started\n\n#### Installation\n\n<ins>CDN:</ins>\n\nAdd this code to your index.html header\n\n```html\n<script\n  async\n  src=\"https://cdn.ballerine.io/1.1.22/ballerine-sdk.umd.min.js\"\n  integrity=\"sha384-cHxaE8mk7COVrdyKoDw4cdPC6PLoMItItHZ+LwA18bDaiWJLxV2f2zyVf6Q9Vtww\"\n  crossorigin=\"anonymous\"\n  type=\"module\"\n></script>\n```\n\n<ins>Package Managers:</ins>\n\n```javascript\n# NPM\nnpm install --save @ballerine/web-ui-sdk\n# Yarn\nyarn add @ballerine/web-ui-sdk\n# PNPM\npnpm add @ballerine/web-ui-sdk\n```\n\n#### Flows API\n\n| Config Parameter | Type                                         | Description                                               |\n| ---------------- | -------------------------------------------- | --------------------------------------------------------- |\n| `uiConfig`       | [FlowsUIConfig](#ui-configuration)           | Initializing flows, preloading needed assets and ui packs |\n| `endUserInfo`    | [EndUserInfo]()                              | Use data like ID, name etc..                              |\n| `backendConfig`  | [FlowsBackendConfig](#backend-configuration) | Backend endpoint the flows should interact with           |\n| `translations`   | [FlowsTranslations](#translations)           | Change the config after init function                     |\n\n#### Embedded Flows\n\nCDN:\nAdd this code to your index.html header\n\n```javascript\n// 1. Add script (see installation)\n// 2. Initialize SDK & flows (see configuration)\nBallerineSDK.flows.init({...}).then(() => {\n\tconsole.log('flows ready');\n\t// 3. Mount selected flow on an element\n\tBallerineSDK.flows.mount('my-kyc-flow', 'flow-host-element', {});\n});\n// 4. Listen to finish event (see events)\nBallerineSDK.flows.on('finish', doSomethingFn)\n```\n\n[example folder]()\n\nPackage Manager:\n\n```javascript\nimport { flows as ballerineFlows } from '@ballerine/web-ui-sdk';\n\nawait ballerineFlows.init({...}).then(() => console.log('flows ready'));\n// 3. Mount selected flow on an element\nballerineFlows.mount('my-kyc-flow', 'flow-host-element', {});\n// 4. Listen to finish event (see events)\nballerineFlows.on('finish', doSomethingFn)\n```\n\n[example folder]()\n\n#### Standalone/Iframe Flows\n\nCode example:\n\n```html\n<script\n  src=\"https://cdn.ballerine.io/1.1.22/ballerine-sdk.umd.min.js\"\n  integrity=\"sha384-cHxaE8mk7COVrdyKoDw4cdPC6PLoMItItHZ+LwA18bDaiWJLxV2f2zyVf6Q9Vtww\"\n  crossorigin=\"anonymous\"\n  type=\"module\"\n></script>\n<script>\n  \tconst initConfig = {\n  \t\t\"flows\": { \"my-kyc-flow\": {\n  \t\t    \"steps\": [\n  \t\t\t{\"name\": \"welcome\", \"id\": \"welcome\" },\n  \t\t\t{ \"name\": \"document-selection\", \"id\": \"document-selection\",\n  \t\t\t    \"documentOptions\": [\"id_card\", \"drivers_license\", \"passport\"]},\n  \t\t\t{ \"name\": \"document-photo\", \"id\": \"identity-document-shot\" },\n  \t\t\t{ \"name\": \"check-document\", \"id\": \"identity-document-user-check\" },\n  \t\t\t{ \"name\": \"document-photo-back-start\", \"id\": \"document-photo-back-start\"},\n  \t\t\t{ \"name\": \"selfie\", \"id\": \"selfie\"},\n  \t\t\t{ \"name\": \"check-selfie\", \"id\": \"check-selfie\" },\n  \t\t\t{ \"name\": \"loading\", \"id\": \"custom-loader\" }\n  \t\t    ]}\n  \t\t}\n  \t}\n  \tBallerineSDK.flows.init(initConfig).then(() => {\n  \t\tBallerineSDK.flows.mount('my-kyc-flow', 'flow-host-element', {});\n  \t});\n  }\n</script>\n```\n\n#### Native Mobile apps\n\nThe approach to native apps are all the native functionalities happens inside Ballerine native sdks (Android, iOS) while and the representation layer is still an web app (inside a native webview).\n\nThis way we can enjoy both worlds:\n\n- Web UI: Flexible UI that can be changes instantly from the server (no app deployments or store submissions).\n- Native API's: Native camera, deep behavioral analysis, ekyc and more..\n\nSee Android and iOS repositories for guidance:\n\n[Android SDK](https://github.com/ballerine-io/ballerine-android-sdk) | [iOS SDK](https://github.com/ballerine-io/ballerine-ios-sdk)\n\n---\n\n### Customization\n\nCustomize the UI, the flow's steps and the backend.\n\n<img src=\"https://blrn-staging-assets.s3.eu-central-1.amazonaws.com/flow.png\">\n\n#### Flows Configuration\n\nFlow Initialization:\n\n```\nBallerineSDK.flows.init([CONFIG])\n```\n\n| Config Parameter | Type                                         | Description                                               |\n| ---------------- | -------------------------------------------- | --------------------------------------------------------- |\n| `uiConfig`       | [FlowsUIConfig](#ui-configuration)           | Initializing flows, preloading needed assets and ui packs |\n| `endUserInfo`    | [EndUserInfo]()                              | Use data like ID, name etc..                              |\n| `backendConfig`  | [FlowsBackendConfig](#backend-configuration) | Backend endpoint the flows should interact with           |\n| `translations`   | [FlowsTranslations](#translations)           | Change the config after init function                     |\n\nRunning a flow:\n\n```\nBallerineSDK.flows.mount('my-flow', elementId, [CONFIG]);\n// or\nBallerineSDK.flows.openModal('my-flow', [CONFIG]);\n```\n\n| Config Parameter | Type                                          | Description                                       |\n| ---------------- | --------------------------------------------- | ------------------------------------------------- |\n| `callbacks`      | [FlowsCallbacksConfig](#flowscallbacksconfig) | An object containing callback methods (see below) |\n\n##### FlowsCallbacksConfig:\n\n| Config Parameter         | Type                         | Description                                                                  |\n| ------------------------ | ---------------------------- | ---------------------------------------------------------------------------- |\n| `onFlowComplete`         | IFlowCompletePayload         | User completed the flow                                                      |\n| `onFlowExit`             | IFlowExitPayload             | User quits the flow (back button on the first page or pressed close buttons) |\n| `onFlowError`            | IFlowErrorPayload            | Unexpected errors                                                            |\n| `onFlowNavigationUpdate` | IFlowNavigationUpdatePayload | User moved between steps                                                     |\n\n---\n\n#### UI Configuration\n\n**Flows UI can be configured in three levels:**\n\n1. Theme and theme styles\n\n| Config Parameter | Type                   | Description                                                      |\n| ---------------- | ---------------------- | ---------------------------------------------------------------- |\n| `uiPack`         | `string` - Name or URL | Ui Pack is a complete bundles of styles, assets and translations |\n| `theme.general`  | FlowsGeneralTheme      | General colors, paddings, fonts..                                |\n\n2. General components styles (**overrides theme**)\n\n| Config Parameter  | Type              | Description          |\n| ----------------- | ----------------- | -------------------- |\n| `theme.layout`    | FlowsGeneralTheme | Global layout css    |\n| `theme.paragraph` | FlowsGeneralTheme | Global paragraph css |\n| `theme.button`    | FlowsGeneralTheme | Global button css    |\n\n... See more\n\n3. Specific step component style (**overrides theme & general component style**)\n\n| Config Parameter               | Type           | Description                                            |\n| ------------------------------ | -------------- | ------------------------------------------------------ |\n| `theme.flows['FlowName'].step` | ICSSProperties | Step includes style object and styles for each element |\n\n... See more\n\nAs the level is lower it will override the upper ones\n\n---\n\n#### Translations\n\n| Config Parameter | Type                     | Description                                          |\n| ---------------- | ------------------------ | ---------------------------------------------------- |\n| `remoteUrl`      | `string (URL)`           | Get a full translation json from remote url          |\n| `overrides`      | `Record<string, string>` | Override default translations or remote translations |\n\n---\n\n#### Backend Configuration\n\n| Config Parameter | Type           | Description                          |\n| ---------------- | -------------- | ------------------------------------ |\n| `baseUrl`        | `string (URL)` | Backend base URL                     |\n| `auth`           | BEAuthConfig   | Auth method and Authorization header |\n| `endpoints`      | BEEndpoints    | List of endpoints for each action    |\n\n---\n","readmeFilename":"README.md","_rev":"1-a4232532856586a2ac79598acbe0fddb"}