{"_id":"59f79e3c584eb200345cecc9","__v":0,"initVersion":{"_id":"59f79e3c584eb200345ceafe","version":"3.0"},"project":"59f79e3c584eb200345ceafc","user":{"_id":"54e4044e8ef7552300409dcb","username":"","name":"Sankaet Pathak"},"createdAt":"2015-06-18T03:11:00.205Z","changelog":[],"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"Please Note: Our Bank Login Widget has been deprecated\",\n  \"body\": \"Our Bank Login widget is no longer supported. Please contact our team for suggestions on integrating bank logins with your platform.\"\n}\n[/block]\nSince implementing bank logins can be tricky sometimes, so we thought we will make a widget to help you do just that.\n\nThis widget is intended to help you get up and running with the bank login and mfa logic in a matter of seconds\n\nFollowing are the steps to implementing this widget.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 1: Drop in an iFrame\"\n}\n[/block]\nAdd an iframe with id **synapse_iframe** anywhere in your HTML body .\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<iframe id=\\\"synapse_iframe\\\" style=\\\"top:0; height:0%;width:0%;position:fixed;z-index:100000;visibility:hidden;\\\" frameborder=\\\"0\\\"></iframe>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 2: Add our Javascript file\"\n}\n[/block]\nAdd the javascript file anywhere in your HTML file.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://d7630u3gvmjyq.cloudfront.net/static_assets/v2/iframes/bank_login/bank_login_iframe.js\\\"></script>\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 3: Initialize your environment\"\n}\n[/block]\nInitialize the environment by adding the following code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var colors = {\\n  'trim':'#059db1',\\n  'unfocused':'#95a5a6',\\n  'text':'#212121',\\n};\\nvar userInfo = {\\n  // For V2 APIs use the following\\n  'oauth_consumer_key':'some_oauth_consumer_key',\\n  // For V3 APIs use the following\\n  'oauth_key':'some_oauth_key',\\n\\t'fingerprint':'some_fingerprint',\\n\\t'v3':true\\n  \\n};\\nvar payload = {\\n  'colors':colors,\\n  'userInfo':userInfo,\\n  'development_mode':true\\n};\\nsetupBankLogins(payload);\\n// make it visible when ready\\n$(\\\"#synapse_iframe\\\").css(\\\"visibility\\\",\\\"visible\\\");\\n$(\\\"#synapse_iframe\\\").css(\\\"height\\\",\\\"100%\\\");\\n$(\\\"#synapse_iframe\\\").css(\\\"width\\\",\\\"100%\\\");\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Step 4: Set up a message receiver\"\n}\n[/block]\nSet up a message receiver. This allows you to receive responses from the iFrame (such as order id). [Learn more about event listeners](http://www.w3schools.com/js/js_htmldom_eventlistener.asp).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"setupLinkBankReciver = function (e) {\\n  try{\\n    var json = JSON.parse(e.data);\\n    if (json.success) {\\n      //login finished,\\n      $(\\\"#synapse_iframe\\\").css(\\\"visibility\\\",\\\"hidden\\\");\\n      $(\\\"#synapse_iframe\\\").css(\\\"height\\\",\\\"0%\\\");\\n      $(\\\"#synapse_iframe\\\").css(\\\"width\\\",\\\"0%\\\");\\n      $(\\\"#synapse_iframe\\\").prop(\\\"src\\\",\\\"\\\");\\n    }else if(json.cancel){\\n      //user pressed cancel, so iframe needs to be closed \\n      $(\\\"#synapse_iframe\\\").css(\\\"visibility\\\",\\\"hidden\\\");\\n      $(\\\"#synapse_iframe\\\").css(\\\"height\\\",\\\"0%\\\");\\n      $(\\\"#synapse_iframe\\\").css(\\\"width\\\",\\\"0%\\\");\\n      $(\\\"#synapse_iframe\\\").prop(\\\"src\\\",\\\"\\\");\\n    }\\n  }catch (e){\\n    // console.log(e);\\n  };\\n};\\nwindow.addEventListener('message', setupLinkBankReciver, false);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1eh5B87VSPuz6JqHzbWE_Screen%20Shot%202015-06-17%20at%208.11.38%20PM.png\",\n        \"Screen Shot 2015-06-17 at 8.11.38 PM.png\",\n        \"1920\",\n        \"1019\",\n        \"#089db5\",\n        \"\"\n      ],\n      \"caption\": \"If you have set it up correctly, it should look something like this\"\n    }\n  ]\n}\n[/block]","slug":"using-our-bank-login-widget","title":"Using Our Bank Login Widget"}

Using Our Bank Login Widget


[block:callout] { "type": "danger", "title": "Please Note: Our Bank Login Widget has been deprecated", "body": "Our Bank Login widget is no longer supported. Please contact our team for suggestions on integrating bank logins with your platform." } [/block] Since implementing bank logins can be tricky sometimes, so we thought we will make a widget to help you do just that. This widget is intended to help you get up and running with the bank login and mfa logic in a matter of seconds Following are the steps to implementing this widget. [block:api-header] { "type": "basic", "title": "Step 1: Drop in an iFrame" } [/block] Add an iframe with id **synapse_iframe** anywhere in your HTML body . [block:code] { "codes": [ { "code": "<iframe id=\"synapse_iframe\" style=\"top:0; height:0%;width:0%;position:fixed;z-index:100000;visibility:hidden;\" frameborder=\"0\"></iframe>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Step 2: Add our Javascript file" } [/block] Add the javascript file anywhere in your HTML file. [block:code] { "codes": [ { "code": "<script src=\"https://d7630u3gvmjyq.cloudfront.net/static_assets/v2/iframes/bank_login/bank_login_iframe.js\"></script>", "language": "text" } ] } [/block] [block:api-header] { "type": "basic", "title": "Step 3: Initialize your environment" } [/block] Initialize the environment by adding the following code: [block:code] { "codes": [ { "code": "var colors = {\n 'trim':'#059db1',\n 'unfocused':'#95a5a6',\n 'text':'#212121',\n};\nvar userInfo = {\n // For V2 APIs use the following\n 'oauth_consumer_key':'some_oauth_consumer_key',\n // For V3 APIs use the following\n 'oauth_key':'some_oauth_key',\n\t'fingerprint':'some_fingerprint',\n\t'v3':true\n \n};\nvar payload = {\n 'colors':colors,\n 'userInfo':userInfo,\n 'development_mode':true\n};\nsetupBankLogins(payload);\n// make it visible when ready\n$(\"#synapse_iframe\").css(\"visibility\",\"visible\");\n$(\"#synapse_iframe\").css(\"height\",\"100%\");\n$(\"#synapse_iframe\").css(\"width\",\"100%\");", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Step 4: Set up a message receiver" } [/block] Set up a message receiver. This allows you to receive responses from the iFrame (such as order id). [Learn more about event listeners](http://www.w3schools.com/js/js_htmldom_eventlistener.asp). [block:code] { "codes": [ { "code": "setupLinkBankReciver = function (e) {\n try{\n var json = JSON.parse(e.data);\n if (json.success) {\n //login finished,\n $(\"#synapse_iframe\").css(\"visibility\",\"hidden\");\n $(\"#synapse_iframe\").css(\"height\",\"0%\");\n $(\"#synapse_iframe\").css(\"width\",\"0%\");\n $(\"#synapse_iframe\").prop(\"src\",\"\");\n }else if(json.cancel){\n //user pressed cancel, so iframe needs to be closed \n $(\"#synapse_iframe\").css(\"visibility\",\"hidden\");\n $(\"#synapse_iframe\").css(\"height\",\"0%\");\n $(\"#synapse_iframe\").css(\"width\",\"0%\");\n $(\"#synapse_iframe\").prop(\"src\",\"\");\n }\n }catch (e){\n // console.log(e);\n };\n};\nwindow.addEventListener('message', setupLinkBankReciver, false);", "language": "javascript" } ] } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/1eh5B87VSPuz6JqHzbWE_Screen%20Shot%202015-06-17%20at%208.11.38%20PM.png", "Screen Shot 2015-06-17 at 8.11.38 PM.png", "1920", "1019", "#089db5", "" ], "caption": "If you have set it up correctly, it should look something like this" } ] } [/block]