{"_id":"5746265f910b350e00eb889d","__v":48,"category":{"_id":"5746204e04f2410e00a5a2e4","project":"573243608b55962900f063c0","__v":0,"version":"573243608b55962900f063c1","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-05-25T21:59:42.666Z","from_sync":false,"order":0,"slug":"in-context","title":"About Navigation Flow"},"version":{"_id":"573243608b55962900f063c1","__v":9,"project":"573243608b55962900f063c0","createdAt":"2016-04-19T15:51:35.494Z","releaseDate":"2016-04-19T15:51:35.494Z","categories":["573243608b55962900f063c3","573243608b55962900f063c2","573255b9ee92510e00087821","573255c0384fc70e0050ea42","573255ce9ef0fa0e0083f0d4","57334604b90dba1900b3d90c","5733474f45fc0c0e00c154da","57348e6e6a42521700a246fb","57348e79a210200e005f99e2","5734efd57e13fd17002f1129","5746204e04f2410e00a5a2e4"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"parentDoc":null,"project":"573243608b55962900f063c0","user":"571f96d3ee9c2124004b3e0d","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-05-25T22:25:35.928Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"This section illustrates how to enable the Lightbox view to an existing SafetyPay Express Checkout integration. Please review the following details, requirements and feature limitations.\n\n## SafetyPay Express Checkout using Lightbox View Setup\nOnce you have a basic SafetyPay Express integration, you can enable the Lightbox view with the following configuration:\n\n**Step 1:** How to create a basic HTML page using Bootstrap.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n  <head>\\n    <meta charset=\\\"utf-8\\\">\\n    <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n    <!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags-->\\n    <title>Bootstrap 101 Template</title>\\n    <!--Bootstrap-->\\n    <link href=\\\"css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\">\\n    <!--HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries-->\\n    <!--WARNING: Respond.js doesn't work if you view the page via file://-->\\n    <!--[if lt IE 9]>\\n      <script src=\\\"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js\\\"></script>\\n      <script src=\\\"https://oss.maxcdn.com/respond/1.4.2/respond.min.js\\\"></script>\\n    <![endif]-->\\n  </head>\\n  <body>\\n    <h1>Hello, world!</h1>\\n    <!--jQuery (necessary for Bootstrap's JavaScript plugins)-->\\n    <script src=\\\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\\\"></script>\\n    <!--Include all compiled plugins (below), or include individual files as needed-->\\n    <script src=\\\"js/bootstrap.min.js\\\"></script>\\n </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Step 2:** Add the follow HTML tags before the Tag </body>.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button type=\\\"button\\\" id=\\\"modalWindow\\\" class=\\\"btn btn-primary\\\" data-toggle=\\\"modal\\\" data-target=\\\".bs-example-modal-lg\\\">Token de Pago</button>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Step 3:** How to incorporate a  \"Loading Message\":\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"myModal\\\" class=\\\"modal fade bs-example-modal-lg\\\" tabindex=\\\"-1\\\" role=\\\"dialog\\\" aria-labelledby=\\\"myLargeModalLabel\\\">\\n\\t\\t  <div class=\\\"modal-dialog modal-lg\\\">\\n\\t\\t\\t<div class=\\\"modal-content\\\">\\n\\t\\t\\t\\t<div class=\\\"modal-body\\\">\\n\\t\\t\\t\\t\\t<!-- Loading Message -->\\n\\t\\t\\t\\t\\t<div id=\\\"myLoading\\\" class=\\\"modal js-loading-bar\\\">\\n\\t\\t\\t\\t\\t\\t<div class=\\\"modal-dialog\\\">\\n\\t\\t\\t\\t\\t\\t\\t<div class=\\\"modal-content\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t<div class=\\\"modal-body\\\">\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t<h3 style=\\\"color:#0059AB; text-align: center; font-size: 20px;\\\">Please wait...</h3>\\n\\t\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t\\t<!-- Loading Message -->\\n\\t\\t\\t\\t\\t<iframe frameborder=\\\"0\\\"></iframe>\\n        </div>\\n\\t\\t\\t</div>\\n\\t\\t  </div>\\n\\t\\t</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Step 4:** How to dynamically load the TokenURL within the Lightbox window and create a server-side \"lib/getdata-sample\" script:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\">\\n\\t\\t\\t$(document).ready(function () {\\n\\t\\t\\t\\tvar src = \\\"\\\";\\n\\t\\t\\t\\tvar width = \\\"100%\\\";\\n\\t\\t\\t\\tvar height = $(window).height();\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t$.ajax({\\n\\t\\t\\t\\t\\ttype: \\\"GET\\\",\\n\\t\\t\\t\\t\\turl: \\\"lib/getdata-sample\\\",\\n\\t\\t\\t\\t\\tdata: {},\\n\\t\\t\\t\\t\\tasync: false,\\n\\t\\t\\t\\t\\tdataType: 'json',\\n\\t\\t\\t\\t\\tsuccess: function (data) {\\n\\t\\t\\t\\t\\t\\tsrc = data.tokenURL;\\n\\t\\t\\t\\t\\t\\tconsole.log(data.tokenURL);\\n\\t\\t\\t\\t\\t},\\n\\t\\t\\t\\t\\terror: function (err) {\\n\\n\\t\\t\\t\\t\\t\\tconsole.log(err);\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t});\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t$(\\\"#modalWindow\\\").click(function (e) {\\n\\t\\t\\t\\t\\t$(\\\"#myLoading\\\").show();\\n\\t\\t\\t\\t\\te.preventDefault();\\n\\t\\t\\t\\t\\twidth = \\\"100%\\\";\\n\\t\\t\\t\\t\\theight = $(window).height();\\n\\t\\t\\t\\t\\t$(\\\"#myModal iframe\\\").attr({'src':src,\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t'height': height - 90,\\n\\t\\t\\t\\t\\t\\t\\t\\t\\t\\t'width': width});\\n\\t\\t\\t\\t});\\n\\t\\t\\t\\t\\n\\t\\t\\t\\t$(\\\"#myModal iframe\\\").load(function () {\\n\\t\\t\\t\\t\\t$(\\\"#myLoading\\\").hide();\\n\\t\\t\\t\\t});\\n\\t\\t\\t\\t\\t\\t\\t\\t\\n\\t\\t\\t\\t$( window ).resize(function() {\\n\\t\\t\\t\\t\\twidth = \\\"100%\\\";\\n\\t\\t\\t\\t\\twidth2 = $(window).width()-300;\\n\\t\\t\\t\\t\\theight = $(window).height();\\n\\t\\t\\t\\t\\t\\n\\t\\t\\t\\t\\t$(\\\"#myModal iframe\\\").attr({'height': height - 90, 'width': width});\\n\\t\\t\\t\\t});\\n\\t\\t\\t});\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"http://getbootstrap.com/getting-started/#template\",\n  \"title\": \"Reference Link:  Getting Started with Bootstrap\"\n}\n[/block]\n## Try It!\n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"http://demostore.safetypay.com/client/index.htm\",\n  \"title\": \"Client\",\n  \"favicon\": \"http://demostore.safetypay.com/favicon.ico\",\n  \"iframe\": true,\n  \"width\": \"750\",\n  \"height\": \"500\"\n}\n[/block]","excerpt":"","slug":"-lightbox-integrations-steps","type":"basic","title":"- Lightbox Integrations Steps"}

- Lightbox Integrations Steps


This section illustrates how to enable the Lightbox view to an existing SafetyPay Express Checkout integration. Please review the following details, requirements and feature limitations. ## SafetyPay Express Checkout using Lightbox View Setup Once you have a basic SafetyPay Express integration, you can enable the Lightbox view with the following configuration: **Step 1:** How to create a basic HTML page using Bootstrap. [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags-->\n <title>Bootstrap 101 Template</title>\n <!--Bootstrap-->\n <link href=\"css/bootstrap.min.css\" rel=\"stylesheet\">\n <!--HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries-->\n <!--WARNING: Respond.js doesn't work if you view the page via file://-->\n <!--[if lt IE 9]>\n <script src=\"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js\"></script>\n <script src=\"https://oss.maxcdn.com/respond/1.4.2/respond.min.js\"></script>\n <![endif]-->\n </head>\n <body>\n <h1>Hello, world!</h1>\n <!--jQuery (necessary for Bootstrap's JavaScript plugins)-->\n <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\n <!--Include all compiled plugins (below), or include individual files as needed-->\n <script src=\"js/bootstrap.min.js\"></script>\n </body>\n</html>", "language": "html" } ] } [/block] **Step 2:** Add the follow HTML tags before the Tag </body>. [block:code] { "codes": [ { "code": "<button type=\"button\" id=\"modalWindow\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\".bs-example-modal-lg\">Token de Pago</button>", "language": "html" } ] } [/block] **Step 3:** How to incorporate a "Loading Message": [block:code] { "codes": [ { "code": "<div id=\"myModal\" class=\"modal fade bs-example-modal-lg\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myLargeModalLabel\">\n\t\t <div class=\"modal-dialog modal-lg\">\n\t\t\t<div class=\"modal-content\">\n\t\t\t\t<div class=\"modal-body\">\n\t\t\t\t\t<!-- Loading Message -->\n\t\t\t\t\t<div id=\"myLoading\" class=\"modal js-loading-bar\">\n\t\t\t\t\t\t<div class=\"modal-dialog\">\n\t\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t\t<div class=\"modal-body\">\n\t\t\t\t\t\t\t\t\t<h3 style=\"color:#0059AB; text-align: center; font-size: 20px;\">Please wait...</h3>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- Loading Message -->\n\t\t\t\t\t<iframe frameborder=\"0\"></iframe>\n </div>\n\t\t\t</div>\n\t\t </div>\n\t\t</div>", "language": "html" } ] } [/block] **Step 4:** How to dynamically load the TokenURL within the Lightbox window and create a server-side "lib/getdata-sample" script: [block:code] { "codes": [ { "code": "<script type=\"text/javascript\">\n\t\t\t$(document).ready(function () {\n\t\t\t\tvar src = \"\";\n\t\t\t\tvar width = \"100%\";\n\t\t\t\tvar height = $(window).height();\n\t\t\t\t\n\t\t\t\t$.ajax({\n\t\t\t\t\ttype: \"GET\",\n\t\t\t\t\turl: \"lib/getdata-sample\",\n\t\t\t\t\tdata: {},\n\t\t\t\t\tasync: false,\n\t\t\t\t\tdataType: 'json',\n\t\t\t\t\tsuccess: function (data) {\n\t\t\t\t\t\tsrc = data.tokenURL;\n\t\t\t\t\t\tconsole.log(data.tokenURL);\n\t\t\t\t\t},\n\t\t\t\t\terror: function (err) {\n\n\t\t\t\t\t\tconsole.log(err);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\t\n\t\t\t\t$(\"#modalWindow\").click(function (e) {\n\t\t\t\t\t$(\"#myLoading\").show();\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\twidth = \"100%\";\n\t\t\t\t\theight = $(window).height();\n\t\t\t\t\t$(\"#myModal iframe\").attr({'src':src,\n\t\t\t\t\t\t\t\t\t\t'height': height - 90,\n\t\t\t\t\t\t\t\t\t\t'width': width});\n\t\t\t\t});\n\t\t\t\t\n\t\t\t\t$(\"#myModal iframe\").load(function () {\n\t\t\t\t\t$(\"#myLoading\").hide();\n\t\t\t\t});\n\t\t\t\t\t\t\t\t\n\t\t\t\t$( window ).resize(function() {\n\t\t\t\t\twidth = \"100%\";\n\t\t\t\t\twidth2 = $(window).width()-300;\n\t\t\t\t\theight = $(window).height();\n\t\t\t\t\t\n\t\t\t\t\t$(\"#myModal iframe\").attr({'height': height - 90, 'width': width});\n\t\t\t\t});\n\t\t\t});\n</script>", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "body": "http://getbootstrap.com/getting-started/#template", "title": "Reference Link: Getting Started with Bootstrap" } [/block] ## Try It! [block:embed] { "html": false, "url": "http://demostore.safetypay.com/client/index.htm", "title": "Client", "favicon": "http://demostore.safetypay.com/favicon.ico", "iframe": true, "width": "750", "height": "500" } [/block]