{"_id":"5ba178b00a916500030c6a0d","project":"59f79e3c584eb200345ceafc","version":{"_id":"5ba178b00a916500030c6a21","project":"59f79e3c584eb200345ceafc","__v":25,"forked_from":"59f79e3c584eb200345ceaff","createdAt":"2015-09-17T03:47:20.956Z","releaseDate":"2015-09-17T03:47:20.956Z","categories":["5ba178b00a916500030c69a2","5ba178b00a916500030c69a3","5ba178b00a916500030c69a4","5ba178b00a916500030c69a5","5ba178b00a916500030c69a6","5ba178b00a916500030c69a7","5ba178b00a916500030c69a8","5ba178b00a916500030c69a9","5ba178b00a916500030c69aa","5ba178b00a916500030c69ab","5ba178b00a916500030c69ac","5afb6888212c690003ae3d3b","5ba178b00a916500030c69ad","5ba178b00a916500030c69ae","5ba2dcbc99f53f0003b97e2c","5babd73fa0ab3e0003ead030","5bb4038be7222e000334dd97","5bb55954478c1300031a44c2","5bb665a1607307000327c81e","5bb6f90229a7fb0003a0650d","5bb7f9bc29a7fb0003a07ac1","5bba58bd7ba7710003bd901d","5bba6dac7ba7710003bd908d","5bba6e257ba7710003bd9090","5bbac87810189c0003e619ea","5bbb9d02b5862c00036266b2","5bbbadb6219c3e000376c2de","5bc417751d1b0000182bf7f6","5bc59e3b2a5b4f0044db5b97","5bc7bbce2262cc0041f6eff2","5bce6a3580a7250031199f34","5bcfac2c4082510019f2d91b","5bcfac3757bed90030e45d68","5bcfac45d305bc0049941539","5bd2a43548bb6f00289c8fad","5bd3a42a026ebe001f66259e","5bd9d5afffe003005b02f97b","5becb7ee85c6b300557662b6","5c5b12896f30e0004b3c8066"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.1.0","version":"3.1"},"category":{"_id":"5ba178b00a916500030c69aa","project":"59f79e3c584eb200345ceafc","version":"5ba178b00a916500030c6a21","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-09-21T23:56:39.346Z","from_sync":false,"order":22,"slug":"ui-as-a-service","title":"UI as a Service"},"user":"54e4044e8ef7552300409dcb","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-05-06T17:57:34.108Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"You can play with the demo [right here](https://uat-uiaas.synapsefi.com/interchange?oauth_key=oauth_y4NKwCgfj2QF1svkoV5pqHuU7Im8OXaxZTAtd0hL&public_key=public_key_n7YOZjuGemJ9cPWBKQLNMH2h0iaU1X0v5CrdgAIx). All [sandbox test credentials](https://docs.synapsefi.com/docs/sandbox-test-values#section-sample-bank-login-credentials) would work.\n\nSteps to deploying Interchange 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`, `NODES|GET`, `NODES|POST`, `NODE|PATCH`.\n[block:api-header]\n{\n \"title\": \"\"\n}\n[/block]\n## 3. Test the UI\n\nNext step is to go to the Interchange UI and see if everything is rendering appropriately.\n\nLink (for sandbox): https://uat-uiaas.synapsefi.com/interchange\nLink (for production): https://uiaas.synapsefi.com/interchange\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 link new accounts\",\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/interchange?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\",\n \"1-0\": \"Logo\",\n \"1-1\": \"Any landscape logo (recommended: 1388 × 367 pixels). By default it uses our logo\",\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":"Interchange UI is a simple user interface built on top of our INTERCHANGE-US API.","slug":"interchange-ui","type":"basic","title":"Interchange UI"}
Interchange UI
Interchange UI is a simple user interface built on top of our INTERCHANGE-US API.