feat [PAR-24]: Add ability to pass custom payment URL

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.2.0 - 2020-04-17
+
+- [feature] Add ability to pass custom payment URL
+
 ## 1.1.0 - 2019-12-12
 
 - [feature] Remove lodash and JQuery from project

README.md

@@ -15,7 +15,7 @@ Features:
 
 #### Linking to Xsolla CDN
 
-Script is located on our CDN and is available here: [https://cdn.xsolla.net/embed/paystation/1.1.0/widget.min.js](https://cdn.xsolla.net/embed/paystation/1.1.0/widget.min.js). Use this URL to integrate script on your website.
+Script is located on our CDN and is available here: [https://cdn.xsolla.net/embed/paystation/1.2.0/widget.min.js](https://cdn.xsolla.net/embed/paystation/1.2.0/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 = "//cdn.xsolla.net/embed/paystation/1.1.0/widget.min.js";
+    s.src = "//cdn.xsolla.net/embed/paystation/1.2.0/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="//cdn.xsolla.net/embed/paystation/1.1.0/widget.min.js"></script>
+<script src="//cdn.xsolla.net/embed/paystation/1.2.0/widget.min.js"></script>
 <script>
     XPayStationWidget.init({
         access_token: 'abcdef1234567890abcdef1234567890'

package.json

@@ -4,7 +4,7 @@
   "description": "PayStation 3 Integration Widget",
   "dependencies": {},
   "devDependencies": {
-    "bower": "1.4.1",
+    "bower": "1.8.8",
     "browser-sync": "2.7.13",
     "browserify": "10.2.4",
     "gulp": "3.9.0",

src/app.js

@@ -6,7 +6,7 @@ var Device = require('./device');
 
 module.exports = (function () {
     function ready(fn) {
-        if (document.readyState != 'loading'){
+        if (document.readyState !== 'loading'){
           fn();
         } else {
           document.addEventListener('DOMContentLoaded', fn);
@@ -44,6 +44,7 @@ module.exports = (function () {
         childWindow: {},
         host: 'secure.xsolla.com'
     };
+    var SANDBOX_PAYSTATION_URL = 'https://sandbox-secure.xsolla.com/paystation2/?';
     var EVENT_NAMESPACE = '.xpaystation-widget';
     var ATTR_PREFIX = 'data-xpaystation-widget-open';
 
@@ -52,14 +53,27 @@ module.exports = (function () {
     App.prototype.isInitiated = false;
     App.prototype.eventObject = Helpers.addEventObject(this);
 
-    App.prototype.getPaystationUrl = function () {
-        var SANDBOX_PAYSTATION_URL = 'https://sandbox-secure.xsolla.com/paystation2/?';
-        return this.config.sandbox ? SANDBOX_PAYSTATION_URL : 'https://' + this.config.host + '/paystation2/?';
+    App.prototype.getPaymentUrl = function () {
+        if (this.config.payment_url) {
+            return this.config.payment_url;
+        }
+
+        const query = {};
+        if (this.config.access_token) {
+            query.access_token = this.config.access_token;
+        } else {
+            query.access_data = JSON.stringify(this.config.access_data);
+        }
+
+        const urlWithoutQueryParams = this.config.sandbox ?
+            SANDBOX_PAYSTATION_URL :
+            'https://' + this.config.host + '/paystation2/?';
+        return urlWithoutQueryParams + Helpers.param(query);
     };
 
     App.prototype.checkConfig = function () {
-        if (Helpers.isEmpty(this.config.access_token) && Helpers.isEmpty(this.config.access_data)) {
-            this.throwError('No access token given');
+        if (Helpers.isEmpty(this.config.access_token) && Helpers.isEmpty(this.config.access_data) && Helpers.isEmpty(this.config.payment_url)) {
+            this.throwError('No access token or access data or payment URL given');
         }
 
         if (!Helpers.isEmpty(this.config.access_data) && typeof this.config.access_data !== 'object') {
@@ -148,16 +162,7 @@ module.exports = (function () {
             }
         }).bind(this);
 
-        var query = {};
-        if (this.config.access_token) {
-            query.access_token = this.config.access_token;
-        } else {
-            query.access_data = JSON.stringify(this.config.access_data);
-        }
-
-
-
-        var url = this.getPaystationUrl() + Helpers.param(query);
+        var url = this.getPaymentUrl();
         var that = this;
 
         function handleStatus(event) {

src/lightbox.js

@@ -142,8 +142,8 @@ module.exports = (function () {
         var lightBoxSpinnerElement = lightBoxElement.querySelector('.' + CLASS_PREFIX + '-spinner');
 
         var psDimensions = {
-            width: '0px',
-            height: '0px'
+            width: withDefaultPXUnit(MIN_PS_DIMENSIONS.width),
+            height: withDefaultPXUnit(MIN_PS_DIMENSIONS.height)
         };
 
         function withDefaultPXUnit(value) {
@@ -228,6 +228,10 @@ module.exports = (function () {
             }
         };
 
+        if (options.width && options.height) {
+            lightBoxResize = Helpers.once(lightBoxResize.bind(this));
+        }
+
         function outerWidth(el) {
             var width = el.offsetWidth;
             var style = getComputedStyle(el);
@@ -275,8 +279,9 @@ module.exports = (function () {
 
         var loadTimer;
         lightBoxIframeElement.addEventListener('load', function handleLoad(event) {
-            var timeout = !options.width || !options.height ? 30000 : 1000; //30000 if psDimensions will not arrive
+            var timeout = !(options.width && options.height) ? (options.resizeTimeout || 30000) : 1000; // 30000 if psDimensions will not arrive and custom timeout is not provided
             loadTimer = global.setTimeout(function () {
+                lightBoxResize();
                 showContent();
             }, timeout);
             lightBoxIframeElement.removeEventListener('load', handleLoad);
@@ -289,6 +294,7 @@ module.exports = (function () {
         this.message = new PostMessage(iframeWindow);
         if (options.width && options.height) {
             this.message.on('dimensions', (function () {
+                lightBoxResize();
                 showContent();
             }));
         } else {
@@ -333,9 +339,6 @@ module.exports = (function () {
             that.off('close', handleClose);
         });
 
-        if (options.width && options.height) {
-            lightBoxResize();
-        }
         showSpinner();
         hideScrollbar();
         this.triggerEvent('open');

src/version.js

@@ -1 +1 @@
-module.exports = '1.0.6';
+module.exports = '1.2.0';