{"_id":"59f79e3c584eb200345cecc4","__v":0,"user":{"_id":"54e4044e8ef7552300409dcb","username":"","name":"Sankaet Pathak"},"project":"59f79e3c584eb200345ceafc","createdAt":"2015-05-10T04:34:42.429Z","changelog":[{"_id":"55771d86a042551900b00289","update":"Documentation For SynapseExpress V2","type":"added"},{"_id":"55771d86a042551900b00288","update":"Example Page","type":"added"},{"_id":"55771d86a042551900b00287","update":"","type":"added"}],"body":"Synapse Express is an iframe widget that allows you to get started with SynapsePay in a matter of seconds\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/express/synapse_express_v2.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  'background':'white'\\n};\\nvar userInfo = {\\n  'oauth_consumer_key':'Yvrg9EXbfQmp1QEKmcLDxzPIvLSLFpsOUGby4GpS',\\n};\\n//you can also supply the user info like how you could in V1\\n//var userInfo = {\\n//    'client_id':'YOUR_SYNAPSE_EXPRESS_CLIENT_ID',\\n//    'client_secret':'YOUR_SYNAPSE_EXPRESS_CLIENT_SECRET',\\n//    'email':'[email protected]',\\n//    'full_name':'Test User',\\n//    'phone_number':'(901)861-1010'\\n//};\\nvar payload = {\\n  'colors':colors,\\n  'userInfo':userInfo,\\n  'seller_id':1694,\\n  'amount':'1.00',\\n  'development_mode':true\\n};\\nsetupSynapseSite(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:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Please do not use your standard production client_id and secrets for the iframe. Just [contact us](http://help.synapsepay.com/hc/en-us/requests/new) and we will furnish you with an iframe specific client id and secret.\\n\\nWith an iFrame specific client_id and secret, all the oauth_consumer_key generated will be for one time use only. If you need expended oauth_consumer_key and refresh_token, you will have to set up a web hook and then everytime a customer would be created, we will send you the updated oauth_customer_key and refresh_token on that web hook. Example below\",\n  \"title\": \"Contact us for iFrame specific client_id and client_secret.\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n\\n  \\\"bank_id\\\": 9817,\\n  \\\"username\\\": \\\"618f90390d604df7a6dcee9ed15b66\\\",\\n  \\\"user_id\\\": 123,\\n  \\\"order\\\": {\\n    \\\"account_type\\\": 2,\\n    \\\"amount\\\": 10.0,\\n    \\\"date\\\": \\\"Mar 24\\\",\\n    \\\"date_settled\\\": null,\\n    \\\"discount\\\": 0.0,\\n    \\\"facilitator_fee\\\": 1.0,\\n    \\\"fee\\\": 0.25,\\n    \\\"id\\\": 296,\\n    \\\"supp_id\\\": \\\"LB105\\\",\\n    \\\"is_buyer\\\": true,\\n    \\\"note\\\": \\\"\\\",\\n    \\\"resource_uri\\\": \\\"/api/v2/order/296/\\\",\\n    \\\"seller\\\": {\\n      \\\"accept_gratuity\\\": false,\\n      \\\"has_avatar\\\": false,\\n      \\\"seller_avatar\\\": \\\"https://d7630u3gvmjyq.cloudfront.net/\\\",\\n      \\\"seller_fullname\\\": \\\"Test Account\\\",\\n      \\\"seller_id\\\": 2\\n    },\\n    \\\"status\\\": 1,\\n    \\\"status_url\\\": \\\"\\\",\\n    \\\"ticket_number\\\": 1,\\n    \\\"tip\\\": 0.0,\\n    \\\"total\\\": 10.0\\n  },\\n  \\\"success\\\": true\\n\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Order Webhook Payload\"\n    },\n    {\n      \"code\": \"{\\n  \\n   \\\"access_token\\\":\\\"04d3486af79834d686fa6ada8e3ee5321afdb6e1\\\",\\n   \\\"oauth_consumer_key\\\":\\\"04d3486af79834d686fa6ada8e3ee5321afdb6e1\\\",\\n   \\\"expires_in\\\":2591999,\\n   \\\"reason\\\":\\\"Profile created.\\\",\\n   \\\"refresh_token\\\":\\\"04d3486af79834d686fa6ada8e3ee5321afdb6e1\\\",\\n   \\\"success\\\":true,\\n   \\\"username\\\":\\\"32cb5132b30e431eaf8b31467966fc\\\",\\n   \\\"user_id\\\": 145\\n  \\n}\",\n      \"language\": \"json\",\n      \"name\": \"User Webhook Payload\"\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\": \"expressReciver = function (e) {\\n  try{\\n    var json = JSON.parse(e.data);\\n    if (json.success) {\\n      //transaction went through, so do something\\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 hit go back, so close the iFrame\\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{\\n      //transaction failed.\\n    };\\n  }catch (e){\\n    // console.log(e);\\n  };\\n};\\nwindow.addEventListener('message', expressReciver, false);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"See it action\"\n}\n[/block]\nFinally, you can see it in action on our [Examples Page](https://synapsepay.com/examples/) or watch the video [here](https://www.youtube.com/watch?v=VazU6YxFgVU)","slug":"synapse-express","title":"Synapse Express"}

Synapse Express


Synapse Express is an iframe widget that allows you to get started with SynapsePay in a matter of seconds [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/express/synapse_express_v2.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 'background':'white'\n};\nvar userInfo = {\n 'oauth_consumer_key':'Yvrg9EXbfQmp1QEKmcLDxzPIvLSLFpsOUGby4GpS',\n};\n//you can also supply the user info like how you could in V1\n//var userInfo = {\n// 'client_id':'YOUR_SYNAPSE_EXPRESS_CLIENT_ID',\n// 'client_secret':'YOUR_SYNAPSE_EXPRESS_CLIENT_SECRET',\n// 'email':'[email protected]',\n// 'full_name':'Test User',\n// 'phone_number':'(901)861-1010'\n//};\nvar payload = {\n 'colors':colors,\n 'userInfo':userInfo,\n 'seller_id':1694,\n 'amount':'1.00',\n 'development_mode':true\n};\nsetupSynapseSite(payload);\n$(\"#synapse_iframe\").css(\"visibility\",\"visible\");\n$(\"#synapse_iframe\").css(\"height\",\"100%\");\n$(\"#synapse_iframe\").css(\"width\",\"100%\");", "language": "javascript" } ] } [/block] [block:callout] { "type": "danger", "body": "Please do not use your standard production client_id and secrets for the iframe. Just [contact us](http://help.synapsepay.com/hc/en-us/requests/new) and we will furnish you with an iframe specific client id and secret.\n\nWith an iFrame specific client_id and secret, all the oauth_consumer_key generated will be for one time use only. If you need expended oauth_consumer_key and refresh_token, you will have to set up a web hook and then everytime a customer would be created, we will send you the updated oauth_customer_key and refresh_token on that web hook. Example below", "title": "Contact us for iFrame specific client_id and client_secret." } [/block] [block:code] { "codes": [ { "code": "{\n\n \"bank_id\": 9817,\n \"username\": \"618f90390d604df7a6dcee9ed15b66\",\n \"user_id\": 123,\n \"order\": {\n \"account_type\": 2,\n \"amount\": 10.0,\n \"date\": \"Mar 24\",\n \"date_settled\": null,\n \"discount\": 0.0,\n \"facilitator_fee\": 1.0,\n \"fee\": 0.25,\n \"id\": 296,\n \"supp_id\": \"LB105\",\n \"is_buyer\": true,\n \"note\": \"\",\n \"resource_uri\": \"/api/v2/order/296/\",\n \"seller\": {\n \"accept_gratuity\": false,\n \"has_avatar\": false,\n \"seller_avatar\": \"https://d7630u3gvmjyq.cloudfront.net/\",\n \"seller_fullname\": \"Test Account\",\n \"seller_id\": 2\n },\n \"status\": 1,\n \"status_url\": \"\",\n \"ticket_number\": 1,\n \"tip\": 0.0,\n \"total\": 10.0\n },\n \"success\": true\n\n}", "language": "json", "name": "Order Webhook Payload" }, { "code": "{\n \n \"access_token\":\"04d3486af79834d686fa6ada8e3ee5321afdb6e1\",\n \"oauth_consumer_key\":\"04d3486af79834d686fa6ada8e3ee5321afdb6e1\",\n \"expires_in\":2591999,\n \"reason\":\"Profile created.\",\n \"refresh_token\":\"04d3486af79834d686fa6ada8e3ee5321afdb6e1\",\n \"success\":true,\n \"username\":\"32cb5132b30e431eaf8b31467966fc\",\n \"user_id\": 145\n \n}", "language": "json", "name": "User Webhook Payload" } ] } [/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": "expressReciver = function (e) {\n try{\n var json = JSON.parse(e.data);\n if (json.success) {\n //transaction went through, so do something\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 hit go back, so close the iFrame\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{\n //transaction failed.\n };\n }catch (e){\n // console.log(e);\n };\n};\nwindow.addEventListener('message', expressReciver, false);", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "See it action" } [/block] Finally, you can see it in action on our [Examples Page](https://synapsepay.com/examples/) or watch the video [here](https://www.youtube.com/watch?v=VazU6YxFgVU)
added
Documentation For SynapseExpress V2
added
Example Page