{"_id":"59f79e3c584eb200345cecc8","__v":0,"initVersion":null,"project":"59f79e3c584eb200345ceafc","user":{"_id":"54e4044e8ef7552300409dcb","username":"","name":"Sankaet Pathak"},"createdAt":"2015-06-05T01:38:58.129Z","changelog":[{"_id":"55834e12f709d825009ea934","update":"Updated the format in which data is sent to the KYC widget","type":"improved"},{"_id":"55834e12f709d825009ea933","update":"UX changes","type":"improved"},{"_id":"55834e12f709d825009ea932","update":"V3 Support","type":"added"},{"_id":"5584650780f67f1700ec568c","update":"","type":"added"}],"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Our KYC widget is no longer supported. Please contact our team for suggestions on integrating our KYC tools with your platform.\",\n  \"title\": \"Please Note: Our KYC Widget has been Deprecated\"\n}\n[/block]\nAs of late, we have been strengthening our KYC/AML/Risk offering (short for Know-Your-Customer, Anti-Money-Laundering & Risk Mitigation). This widget is a natural progression of that vision.\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/kyc/kyc_iframe.js\\\"></script>\",\n      \"language\": \"html\"\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};\\nvar payload = {\\n  'colors':colors,\\n  'userInfo':userInfo,\\n  'development_mode':true\\n};\\nsetupKYCIframe(payload);\\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\": \"kycReciver = function (e) {\\n  try{\\n    var json = JSON.parse(e.data);\\n    if (json.success) {\\n      // KYC info filled\\n      $(\\\"#synapse_iframe\\\").css(\\\"visibility\\\",\\\"hidden\\\");\\n      $(\\\"#synapse_iframe\\\").prop(\\\"src\\\",\\\"\\\");\\n      $(\\\"#synapse_iframe\\\").css(\\\"height\\\",\\\"0%\\\");\\n      $(\\\"#synapse_iframe\\\").css(\\\"width\\\",\\\"0%\\\");\\n    }else if(json.cancel){\\n      // KYC widget cancled by the user\\n      $(\\\"#synapse_iframe\\\").css(\\\"visibility\\\",\\\"hidden\\\");\\n      $(\\\"#synapse_iframe\\\").prop(\\\"src\\\",\\\"\\\");\\n      $(\\\"#synapse_iframe\\\").css(\\\"height\\\",\\\"0%\\\");\\n      $(\\\"#synapse_iframe\\\").css(\\\"width\\\",\\\"0%\\\");\\n    }\\n  }catch (e){\\n    // console.log(e);\\n  };\\n};\\nwindow.addEventListener('message', kycReciver, false);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"See it in action.\"\n}\n[/block]\nFinally, you can see it in action on our [Examples Page](https://synapsepay.com/examples/kyc).\n[block:image]\n{\n  \"images\": [\n    {\n      \"caption\": \"If everything was configured correctly, the widget would look something like this\",\n      \"image\": [\n        \"https://files.readme.io/LNBbpFoKQlaAsNhsrMS7_Screen%20Shot%202015-06-18%20at%204.02.04%20PM.png\",\n        \"Screen Shot 2015-06-18 at 4.02.04 PM.png\",\n        \"1920\",\n        \"981\",\n        \"#07acbc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]","slug":"using-synapses-kycamlrisk-widget","title":"Using Our KYC Widget"}

Using Our KYC Widget


[block:callout] { "type": "danger", "body": "Our KYC widget is no longer supported. Please contact our team for suggestions on integrating our KYC tools with your platform.", "title": "Please Note: Our KYC Widget has been Deprecated" } [/block] As of late, we have been strengthening our KYC/AML/Risk offering (short for Know-Your-Customer, Anti-Money-Laundering & Risk Mitigation). This widget is a natural progression of that vision. 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/kyc/kyc_iframe.js\"></script>", "language": "html" } ] } [/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};\nvar payload = {\n 'colors':colors,\n 'userInfo':userInfo,\n 'development_mode':true\n};\nsetupKYCIframe(payload);\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": "kycReciver = function (e) {\n try{\n var json = JSON.parse(e.data);\n if (json.success) {\n // KYC info filled\n $(\"#synapse_iframe\").css(\"visibility\",\"hidden\");\n $(\"#synapse_iframe\").prop(\"src\",\"\");\n $(\"#synapse_iframe\").css(\"height\",\"0%\");\n $(\"#synapse_iframe\").css(\"width\",\"0%\");\n }else if(json.cancel){\n // KYC widget cancled by the user\n $(\"#synapse_iframe\").css(\"visibility\",\"hidden\");\n $(\"#synapse_iframe\").prop(\"src\",\"\");\n $(\"#synapse_iframe\").css(\"height\",\"0%\");\n $(\"#synapse_iframe\").css(\"width\",\"0%\");\n }\n }catch (e){\n // console.log(e);\n };\n};\nwindow.addEventListener('message', kycReciver, false);", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "See it in action." } [/block] Finally, you can see it in action on our [Examples Page](https://synapsepay.com/examples/kyc). [block:image] { "images": [ { "caption": "If everything was configured correctly, the widget would look something like this", "image": [ "https://files.readme.io/LNBbpFoKQlaAsNhsrMS7_Screen%20Shot%202015-06-18%20at%204.02.04%20PM.png", "Screen Shot 2015-06-18 at 4.02.04 PM.png", "1920", "981", "#07acbc", "" ] } ] } [/block]
improved
Updated the format in which data is sent to the KYC widget
improved
UX changes
added
V3 Support