Merge pull request #15 from xsolla/PAYMENTS-3602-csp-improve

Payments 3602 csp improve
xsolla · Jul 23, 2019 · 311494f · 311494f
2 parents 0ce798a + fd73b07
commit 311494f
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.0.8 - 2019-07-18
+
+- [fix] remove lodash template dependency
+
 ## 1.0.7 - 2016-08-29
 
 - [feature] Custom spinner

diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ Features:
 
 #### Linking to Xsolla CDN
 
-Script is located on our CDN and is available here: [https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js](https://static.xsolla.com/embed/paystation/1.0.7/widget.min.js). Use this URL to integrate script on your website.
+Script is located on our CDN and is available here: [https://static.xsolla.com/embed/paystation/1.0.8/widget.min.js](https://static.xsolla.com/embed/paystation/1.0.8/widget.min.js). Use this URL to integrate script on your website.
 
 #### Installing with Bower
 
@@ -37,7 +37,7 @@ $ bower install xsolla-paystation-widget
     var s = document.createElement('script');
     s.type = "text/javascript";
     s.async = true;
-    s.src = "//static.xsolla.com/embed/paystation/1.0.7/widget.min.js";
+    s.src = "//static.xsolla.com/embed/paystation/1.0.8/widget.min.js";
     s.addEventListener('load', function (e) {
         XPayStationWidget.init(options);
     }, false);
@@ -49,7 +49,7 @@ $ bower install xsolla-paystation-widget
 #### Synchronous loading (blocks content)
 
 ``` javascript
-<script src="//static.xsolla.com/embed/paystation/1.0.7/widget.min.js"></script>
+<script src="//static.xsolla.com/embed/paystation/1.0.8/widget.min.js"></script>
 <script>
     XPayStationWidget.init({
         access_token: 'abcdef1234567890abcdef1234567890'

diff --git a/dist/widget.js b/dist/widget.js
diff --git a/dist/widget.min.js b/dist/widget.min.js
diff --git a/dist/widget.min.js.map b/dist/widget.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "xsolla-paystation-widget",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "PayStation 3 Integration Widget",
   "dependencies": {},
   "devDependencies": {

diff --git a/src/lightbox.js b/src/lightbox.js
@@ -30,14 +30,6 @@ module.exports = (function () {
         spinnerRotationPeriod: 0
     };
 
-    var TEMPLATE = '<div class="<%-prefix%>">' +
-        '<div class="<%-prefix%>-overlay"></div>' +
-        '<div class="<%-prefix%>-content <%-prefix%>-content__hidden">' +
-            '<iframe class="<%-prefix%>-content-iframe" src="<%-url%>" frameborder="0" allowfullscreen></iframe>' +
-        '</div>' +
-        '<div class="<%-prefix%>-spinner"><%=spinner%></div>' +
-    '</div>';
-
     var SPINNERS = {
         xsolla: require('./spinners/xsolla.svg'),
         round: require('./spinners/round.svg'),
@@ -80,8 +72,37 @@ module.exports = (function () {
         var spinner = options.spinner === 'custom' && !!options.spinnerUrl ?
             '<img class="spinner-custom" src="' + encodeURI(options.spinnerUrl) + '" />' : SPINNERS[options.spinner] || _.values(SPINNERS)[0];
 
+        var template = function (settings) {
+            var host = document.createElement('div');
+            host.className = settings.prefix;
+
+            var overlay = document.createElement('div');
+            overlay.className = settings.prefix + '-overlay';
+
+            var content = document.createElement('div');
+            content.className = settings.prefix + '-content' + ' ' + settings.prefix + '-content__hidden';
+
+            var iframe = document.createElement('iframe');
+            iframe.className = settings.prefix + '-content-iframe';
+            iframe.src = settings.url;
+            iframe.frameBorder = '0';
+            iframe.allowFullscreen = true;
+
+            var spinner = document.createElement('div');
+            spinner.className = settings.prefix + '-spinner';
+            spinner.innerHTML = settings.spinner;
+
+            content.appendChild(iframe);
+
+            host.appendChild(overlay);
+            host.appendChild(content);
+            host.appendChild(spinner);
+
+            return host;
+        };
+
         var bodyElement = $(global.document.body);
-        var lightBoxElement = $(_.template(TEMPLATE)({
+        var lightBoxElement = $(template({
             prefix: CLASS_PREFIX,
             url: url,
             spinner: spinner