{"_id":"5b4520da69638a0003bc6288","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":"59dbbf21ab0b3200260786c5","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-07-10T21:10:50.449Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"You can play with the demo [right here](https://uat-uiaas.synapsefi.com/card?oauth_key=oauth_d6wQXC0T2mLoycGgYvZK0z98R1bhU3SEFDB4Naxi&node_id=5b19991ec1c81d004fb55f7e&public_key=public_key_n7YOZjuGemJ9cPWBKQLNMH2h0iaU1X0v5CrdgAIx).\n\nSteps to deploying Debit Cards 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` and `USER|GET`.\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`, `NODE|GET`, `NODES|GET`, `TRANS|GET`, `TRANS|POST`.\n[block:api-header]\n{\n  \"title\": \"\"\n}\n[/block]\n## 3. Test the UI\n\nNext step is to go to the Debit Cards UI and see if everything is rendering appropriately.\n\nLink (for sandbox): https://uat-uiaas.synapsefi.com/card\nLink (for production): https://uiaas.synapsefi.com/card\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 debit card node\",\n    \"1-1\": \"Your public key\",\n    \"2-0\": \"node_id\",\n    \"2-1\": \"Synapse ID of the node\"\n  },\n  \"cols\": 2,\n  \"rows\": 3\n}\n[/block]\nSo the final URL would look something like this:\n\nhttps://uat-uiaas.synapsefi.com/card?oauth_key=oauth_key&public_key=public_key&node_id=node_id.\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 `failure_uri`:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"GET Param\",\n    \"h-1\": \"Note\",\n    \"0-0\": \"error_code\",\n    \"0-1\": \"Error code from [Errors Section](doc:errors)\",\n    \"1-0\": \"http_code\",\n    \"1-1\": \"HTTP code from [Errors Section](doc:errors)\",\n    \"2-0\": \"message\",\n    \"3-0\": \"user_id\",\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\": \"Failure URI\",\n    \"3-0\": \"Page Title for Unsaved Progress Warning\",\n    \"4-0\": \"Transactions Controls\",\n    \"5-0\": \"Balance Controls\",\n    \"6-0\": \"Cash In / Out Controls\",\n    \"7-0\": \"Card Number Controls\",\n    \"2-1\": \"The link where the user will be redirected if actions are unsuccessful.\",\n    \"3-1\": \"What title should go back warning page have\",\n    \"4-1\": \"If the UI should display transactions associated with the card or not\",\n    \"5-1\": \"If the UI should display the balance of the card or not\",\n    \"6-1\": \"If UI should allow the user should be allowed to add or withdraw funds out of the card or not\",\n    \"7-1\": \"If the card number should be visible by default or hidden\",\n    \"8-0\": \"Preferences Controls\",\n    \"8-1\": \"If the UI should display the card preferences controls. This includes card status, card pin update, and foreign transaction controls.\"\n  },\n  \"cols\": 2,\n  \"rows\": 9\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":"Debit Cards UI is a simple user interface built on top of our debit cards API.","slug":"debit-cards-ui","type":"basic","title":"Debit Cards UI"}

Debit Cards UI

Debit Cards UI is a simple user interface built on top of our debit cards API.

You can play with the demo [right here](https://uat-uiaas.synapsefi.com/card?oauth_key=oauth_d6wQXC0T2mLoycGgYvZK0z98R1bhU3SEFDB4Naxi&node_id=5b19991ec1c81d004fb55f7e&public_key=public_key_n7YOZjuGemJ9cPWBKQLNMH2h0iaU1X0v5CrdgAIx). Steps to deploying Debit Cards 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` and `USER|GET`. [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`, `NODE|GET`, `NODES|GET`, `TRANS|GET`, `TRANS|POST`. [block:api-header] { "title": "" } [/block] ## 3. Test the UI Next step is to go to the Debit Cards UI and see if everything is rendering appropriately. Link (for sandbox): https://uat-uiaas.synapsefi.com/card Link (for production): https://uiaas.synapsefi.com/card 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 link new debit card node", "1-1": "Your public key", "2-0": "node_id", "2-1": "Synapse ID of the node" }, "cols": 2, "rows": 3 } [/block] So the final URL would look something like this: https://uat-uiaas.synapsefi.com/card?oauth_key=oauth_key&public_key=public_key&node_id=node_id. [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 `failure_uri`: [block:parameters] { "data": { "h-0": "GET Param", "h-1": "Note", "0-0": "error_code", "0-1": "Error code from [Errors Section](doc:errors)", "1-0": "http_code", "1-1": "HTTP code from [Errors Section](doc:errors)", "2-0": "message", "3-0": "user_id", "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": "Failure URI", "3-0": "Page Title for Unsaved Progress Warning", "4-0": "Transactions Controls", "5-0": "Balance Controls", "6-0": "Cash In / Out Controls", "7-0": "Card Number Controls", "2-1": "The link where the user will be redirected if actions are unsuccessful.", "3-1": "What title should go back warning page have", "4-1": "If the UI should display transactions associated with the card or not", "5-1": "If the UI should display the balance of the card or not", "6-1": "If UI should allow the user should be allowed to add or withdraw funds out of the card or not", "7-1": "If the card number should be visible by default or hidden", "8-0": "Preferences Controls", "8-1": "If the UI should display the card preferences controls. This includes card status, card pin update, and foreign transaction controls." }, "cols": 2, "rows": 9 } [/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)).