{"_id":"59c45b44dcca7400108a7dc1","project":"54e405191e51932d006abc39","version":{"_id":"55fa37c88065a10d004e5bb6","project":"54e405191e51932d006abc39","__v":11,"createdAt":"2015-09-17T03:47:20.956Z","releaseDate":"2015-09-17T03:47:20.956Z","categories":["55fa37ca8065a10d004e5bb7","55fa37ca8065a10d004e5bb8","55fa37ca8065a10d004e5bb9","55fa37ca8065a10d004e5bba","55fca6bf34ae7c0d00ab8ea0","55ff80fd9e7ccf0d000a1d93","560220af7435de0d00fabd0d","56107f21bb9d920d00303e70","563e184077681a0d00d96a02","56fafc6596ec7e0e002ac85f","5915e54f7c2c552d008b8549","59499fcd64b5f5002690bbc1","59c451b7772699001c0f1df1","59c9b42dec84880010c1f348"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"REST V3","version_clean":"3.1.0","version":"3.1"},"category":{"_id":"59c451b7772699001c0f1df1","project":"54e405191e51932d006abc39","version":"55fa37c88065a10d004e5bb6","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-09-21T23:56:39.346Z","from_sync":false,"order":9,"slug":"ui-as-a-service","title":"UI as a Service"},"user":"54e4044e8ef7552300409dcb","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-09-22T00:37:24.756Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"You can play with the demo [right here](https://uat-uiaas.synapsefi.com/link?oauth_key=oauth_0RbmrQae3N2onwHhXsTuxY5DGyzJUF1lIKE7qiZp&success_uri=https://synapsefi.com/success&failure_uri=https://synapsefi.com/failure&public_key=public_key_zm413PLGejtYEB7wIMJRSiyCdv0bgFHpDKsqcuTf). All [sandbox test credentials](https://docs.synapsepay.com/docs/sandbox-test-values#section-sample-bank-login-credentials) would work.\n\nSteps to deploying Bank Login 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 Bank Login UI and see if everything is rendering appropriately.\n\nLink (for sandbox): https://uat-uiaas.synapsefi.com/link\nLink (for production): https://uiaas.synapsefi.com/link\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    \"2-0\": \"success_uri\",\n    \"3-0\": \"failure_uri\",\n    \"0-1\": \"OAuth key of the user who needs to link new accounts\",\n    \"1-1\": \"Your public key\",\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]\nSo the final URL would look something like this:\n\nhttps://uat-uiaas.synapsefi.com/link?oauth_key=oauth_key&public_key=public_key&success_uri=https://your-url.com/success&failure_uri=https://your-url.com/fail.\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    \"2-0\": \"Disclosure\",\n    \"2-1\": \"The footer disclosure text can be modified. By default it says **Banking services are provided by Evolve Bank and Trust; Members FDIC.**\",\n    \"3-0\": \"Legal Agreements\",\n    \"3-1\": \"Any bank login privacy agreements that you want the user to agree to while logging into a bank. By default the user agrees to our [Website Terms of Use](https://synapsefi.com/website-terms-of-use) and our [Privacy Policy](https://synapsefi.com/privacy)\",\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  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\nIf you wish to change any of these fields, please [contact us](doc:contact-us) and send us your platform user ID and updated values for these fields and we will update approve and update them for you.","excerpt":"Bank Logins UI is a simple user interface built on top of our Bank Login API.","slug":"bank-logins","type":"basic","title":"Bank Logins"}

Bank Logins

Bank Logins UI is a simple user interface built on top of our Bank Login API.

You can play with the demo [right here](https://uat-uiaas.synapsefi.com/link?oauth_key=oauth_0RbmrQae3N2onwHhXsTuxY5DGyzJUF1lIKE7qiZp&success_uri=https://synapsefi.com/success&failure_uri=https://synapsefi.com/failure&public_key=public_key_zm413PLGejtYEB7wIMJRSiyCdv0bgFHpDKsqcuTf). All [sandbox test credentials](https://docs.synapsepay.com/docs/sandbox-test-values#section-sample-bank-login-credentials) would work. Steps to deploying Bank Login 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`, `NODES|GET`, `NODES|POST`, `NODE|PATCH`. [block:api-header] { "title": "" } [/block] ## 3. Test the UI Next step is to go to the Bank Login UI and see if everything is rendering appropriately. Link (for sandbox): https://uat-uiaas.synapsefi.com/link Link (for production): https://uiaas.synapsefi.com/link GET Params needed in the URL [block:parameters] { "data": { "h-0": "GET Param", "h-1": "Note", "0-0": "oauth_key", "1-0": "public_key", "2-0": "success_uri", "3-0": "failure_uri", "0-1": "OAuth key of the user who needs to link new accounts", "1-1": "Your public key", "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] So the final URL would look something like this: https://uat-uiaas.synapsefi.com/link?oauth_key=oauth_key&public_key=public_key&success_uri=https://your-url.com/success&failure_uri=https://your-url.com/fail. [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)", "2-0": "Disclosure", "2-1": "The footer disclosure text can be modified. By default it says **Banking services are provided by Evolve Bank and Trust; Members FDIC.**", "3-0": "Legal Agreements", "3-1": "Any bank login privacy agreements that you want the user to agree to while logging into a bank. By default the user agrees to our [Website Terms of Use](https://synapsefi.com/website-terms-of-use) and our [Privacy Policy](https://synapsefi.com/privacy)", "1-0": "Logo", "1-1": "Any landscape logo (recommended: 1388 × 367 pixels). By default it uses [our logo](https://synapsefi.com/resources#logos)" }, "cols": 2, "rows": 4 } [/block] If you wish to change any of these fields, please [contact us](doc:contact-us) and send us your platform user ID and updated values for these fields and we will update approve and update them for you.