{"_id":"5b4d1e5baed2c200034576c3","project":"59f79e3c584eb200345ceafc","version":{"_id":"59f79e3c584eb200345ceaff","project":"59f79e3c584eb200345ceafc","__v":8,"createdAt":"2015-09-17T03:47:20.956Z","releaseDate":"2015-09-17T03:47:20.956Z","categories":["59f79e3c584eb200345ceb3a","59f79e3c584eb200345ceb3b","59f79e3c584eb200345ceb3c","59f79e3c584eb200345ceb3d","59f79e3c584eb200345ceb3e","59f79e3c584eb200345ceb3f","59f79e3c584eb200345ceb45","59f79e3c584eb200345ceb46","59f79e3c584eb200345ceb48","59f79e3c584eb200345ceb49","5aa21b60c0bda0002d1568b6","5afb6888212c690003ae3d3b","5b4bdcd3737d1800031d2293","5b9ed89212362100036b5a1c","5bb29bec77c22500034757ea","5bb29bfe77c22500034757ec","5bc8fa8063924c00186c5ded","5bc8fe9fa472190014a6b103"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.1.0","version":"3.1"},"category":{"_id":"59f79e3c584eb200345ceb48","project":"59f79e3c584eb200345ceafc","version":"59f79e3c584eb200345ceaff","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-09-21T23:56:39.346Z","from_sync":false,"order":12,"slug":"ui-as-a-service","title":"UI as a Service"},"user":"5b1f0406c2505d0003124b09","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-07-16T22:38:19.879Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"You can play with the demo right here: [Business KYC](https://uat-uiaas.synapsefi.com/kyc?oauth_key=oauth_b6epKJY8h9HIZ0ruRFPOkg3L2lxAXD7cSN01omBM&public_key=public_key_PmS1RpeqCf6z08YyvgQThsjxa7Wc2ZNoulIHknMi) | [Personal KYC](https://uat-uiaas.synapsefi.com/kyc?oauth_key=oauth_D4Me6juatFPSAY0wzOd03XmrNH7VyBJRg8nEQcW9&public_key=public_key_PmS1RpeqCf6z08YyvgQThsjxa7Wc2ZNoulIHknMi). All [sandbox test documents](https://docs.synapsefi.com/docs/sandbox-test-values#section-sample-virtual-document) would work.\n** Please do not put your personal information in the demo. If you would like to test with real information, generate your own OAuth and public key for testing purposes.\n\n\nSteps to deploying the KYC UI are the following:\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"\"\n}\n[/block]\n## 1. Issue Public Key\n\nAt your backend, where you have stored `client_id` and `client_secret` securely, issue a [public key](doc:issuing-public-key) with scope `CLIENT|CONTROLS`.\n[block:api-header]\n{\n  \"title\": \"\"\n}\n[/block]\n## 2. Issue OAuth Key\n\nIssue an [OAuth Key](doc:get-oauth_key-refresh-token) for the user, with scopes `USER|GET` and `USER|PATCH`.\n[block:api-header]\n{\n  \"title\": \"\"\n}\n[/block]\n## 3. Test the UI\n\nNext step is to go to the KYC UI and see if everything is rendering appropriately.\n\nLink (for sandbox): https://uat-uiaas.synapsefi.com/kyc\nLink (for production): https://uiaas.synapsefi.com/kyc\n\nGET Params needed in the URL\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"GET Param\",\n    \"h-1\": \"Note\",\n    \"0-0\": \"oauth_key\",\n    \"1-0\": \"public_key\",\n    \"0-1\": \"OAuth key of the user who needs to add new documents\",\n    \"1-1\": \"Your public key\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\nSo the final URL would look something like this:\n\nhttps://uat-uiaas.synapsefi.com/kyc?oauth_key=oauth_key&public_key=public_key.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Android webviews\",\n  \"body\": \"If you are rendering this component inside an Android webview, please make sure that you have DOM storage enabled `settings.setDomStorageEnabled(true);`\"\n}\n[/block]\n\n[block:api-header]\n{}\n[/block]\n## GET Params on redirect\n\nGET Params returned on `success_uri`:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"GET Param\",\n    \"h-1\": \"Note\",\n    \"0-0\": \"user_id\",\n    \"0-1\": \"Synapse ID of the user\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]\nGET Params returned on `failure_uri`:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"GET Param\",\n    \"h-1\": \"Note\",\n    \"0-0\": \"error_code\",\n    \"1-0\": \"http_code\",\n    \"2-0\": \"message\",\n    \"3-0\": \"user_id\",\n    \"0-1\": \"Error code from [Errors Section](doc:errors)\",\n    \"1-1\": \"HTTP code from [Errors Section](doc:errors)\",\n    \"2-1\": \"Reason for failure\",\n    \"3-1\": \"Synapse ID of the user\"\n  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\n\n[block:api-header]\n{}\n[/block]\n## Customizing the UI\n\nYou can customize the following things on the UI\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Field\",\n    \"h-1\": \"Comment\",\n    \"0-0\": \"Color Palette\",\n    \"0-1\": \"You can update the color with any hex value. By default it uses our [colors](https://synapsefi.com/resources#colors)\",\n    \"1-0\": \"Logo\",\n    \"1-1\": \"Any landscape logo (recommended: 1388 × 367 pixels). By default it uses [our logo](https://synapsefi.com/resources#logos)\",\n    \"2-0\": \"Success URI\",\n    \"3-0\": \"Failure URI\",\n    \"2-1\": \"Once login is successful where should we redirect the user\",\n    \"3-1\": \"If login fails or user wants to abandon the login, where should we redirect the user\"\n  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\nIf you wish to change any of these fields, please go to Client Manager on the dashboard to do so. (FAQ on how to get to the [Client Manager](https://help.synapsefi.com/hc/en-us/articles/215602077-Creating-a-production-account)).","excerpt":"Know Your Customer (KYC) UI is a simple user interface built on top of our Add Documents API.","slug":"kyc-ui","type":"basic","title":"Know Your Customer UI"}

Know Your Customer UI

Know Your Customer (KYC) UI is a simple user interface built on top of our Add Documents API.

You can play with the demo right here: [Business KYC](https://uat-uiaas.synapsefi.com/kyc?oauth_key=oauth_b6epKJY8h9HIZ0ruRFPOkg3L2lxAXD7cSN01omBM&public_key=public_key_PmS1RpeqCf6z08YyvgQThsjxa7Wc2ZNoulIHknMi) | [Personal KYC](https://uat-uiaas.synapsefi.com/kyc?oauth_key=oauth_D4Me6juatFPSAY0wzOd03XmrNH7VyBJRg8nEQcW9&public_key=public_key_PmS1RpeqCf6z08YyvgQThsjxa7Wc2ZNoulIHknMi). All [sandbox test documents](https://docs.synapsefi.com/docs/sandbox-test-values#section-sample-virtual-document) would work. ** Please do not put your personal information in the demo. If you would like to test with real information, generate your own OAuth and public key for testing purposes. Steps to deploying the KYC UI are the following: [block:api-header] { "type": "basic", "title": "" } [/block] ## 1. Issue Public Key At your backend, where you have stored `client_id` and `client_secret` securely, issue a [public key](doc:issuing-public-key) with scope `CLIENT|CONTROLS`. [block:api-header] { "title": "" } [/block] ## 2. Issue OAuth Key Issue an [OAuth Key](doc:get-oauth_key-refresh-token) for the user, with scopes `USER|GET` and `USER|PATCH`. [block:api-header] { "title": "" } [/block] ## 3. Test the UI Next step is to go to the KYC UI and see if everything is rendering appropriately. Link (for sandbox): https://uat-uiaas.synapsefi.com/kyc Link (for production): https://uiaas.synapsefi.com/kyc GET Params needed in the URL [block:parameters] { "data": { "h-0": "GET Param", "h-1": "Note", "0-0": "oauth_key", "1-0": "public_key", "0-1": "OAuth key of the user who needs to add new documents", "1-1": "Your public key" }, "cols": 2, "rows": 2 } [/block] So the final URL would look something like this: https://uat-uiaas.synapsefi.com/kyc?oauth_key=oauth_key&public_key=public_key. [block:callout] { "type": "info", "title": "Android webviews", "body": "If you are rendering this component inside an Android webview, please make sure that you have DOM storage enabled `settings.setDomStorageEnabled(true);`" } [/block] [block:api-header] {} [/block] ## GET Params on redirect GET Params returned on `success_uri`: [block:parameters] { "data": { "h-0": "GET Param", "h-1": "Note", "0-0": "user_id", "0-1": "Synapse ID of the user" }, "cols": 2, "rows": 1 } [/block] GET Params returned on `failure_uri`: [block:parameters] { "data": { "h-0": "GET Param", "h-1": "Note", "0-0": "error_code", "1-0": "http_code", "2-0": "message", "3-0": "user_id", "0-1": "Error code from [Errors Section](doc:errors)", "1-1": "HTTP code from [Errors Section](doc:errors)", "2-1": "Reason for failure", "3-1": "Synapse ID of the user" }, "cols": 2, "rows": 4 } [/block] [block:api-header] {} [/block] ## Customizing the UI You can customize the following things on the UI [block:parameters] { "data": { "h-0": "Field", "h-1": "Comment", "0-0": "Color Palette", "0-1": "You can update the color with any hex value. By default it uses our [colors](https://synapsefi.com/resources#colors)", "1-0": "Logo", "1-1": "Any landscape logo (recommended: 1388 × 367 pixels). By default it uses [our logo](https://synapsefi.com/resources#logos)", "2-0": "Success URI", "3-0": "Failure URI", "2-1": "Once login is successful where should we redirect the user", "3-1": "If login fails or user wants to abandon the login, where should we redirect the user" }, "cols": 2, "rows": 4 } [/block] If you wish to change any of these fields, please go to Client Manager on the dashboard to do so. (FAQ on how to get to the [Client Manager](https://help.synapsefi.com/hc/en-us/articles/215602077-Creating-a-production-account)).