Website (iFrame)

Website (iFrame)

The iFrame solution allows you to display a OkePay payment page within your website. All you need to do is copy the code snippets onto your website. For developers there are more advanced integration options available, described down below.

Necessary resources

For the basic implementation, there are no resources necessary.

Example code

You can just paste the following code:

HTTP
<iframe src="https://demo.okepay.info/pay?tid=345a142d" width="530" height="700">
</iframe>

For src just enter the URL of your payment page.

Advanced integration

JavaScript
var postMessage = function(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.okepay) {
      jQuery.each(data.okepay, function(name, value) {
        switch (name) {
          // implement functions here
        }
      });
    }
  }
};
window.addEventListener('message', postMessage, false);

The first function to implement where the comment is, could be the

  • height: Dynamic height of iFrame. So the iFrame has no scroll bar itself.
JavaScript
var iFrame = jQuery('iframe');
var lastPostMessageHeight = 0;
var updateIframeHeight = function() {
    var height = lastPostMessageHeight;
    if (window.innerWidth <= 590) {
        iFrame.css('height', '100%');
    } else if (height) {
        iFrame.css('height', height + 'px');
    }
};
​
var postMessage = function(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.okepay) {
      jQuery.each(data.okepay, function(name, value) {
        switch (name) {
          case 'height':
            lastPostMessageHeight = parseInt(value);
            updateIframeHeight();
            break;
        }
      });
    }
  }
};
​
iFrame.load(function() {
  jQuery(this)[0].contentWindow.postMessage(JSON.stringify({origin: window.location.origin}), iFrame.attr('src'));
  jQuery(window).resize(updateIframeHeight);
  updateIframeHeight();
});
​
window.addEventListener('message', postMessage, false);
  • scroll: If you have the dynamic height functionality implemented, you probably need to implement the scroll functionality to have the page scrolled if necessary. (e.g. on "Add to cart" button or on "Go to checkout")
JavaScript
var iFrame = jQuery('iframe');
​
var scrollPage = function(offset) {
  var positionToScrollTo = iFrame.position().top + offset;
  jQuery('body').animate({scrollTop: positionToScrollTo}, 1000, 'linear', function() {
    jQuery(window).trigger('scroll')
  });
};
​
var postMessage = function(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.okepay) {
      jQuery.each(data.okepay, function(name, value) {
        switch (name) {
          case 'top':
            scrollPage(parseInt(value));
            break;
        }
      });
    }
  }
};
​
var t;
jQuery(window).scroll(function(event) {
  window.clearTimeout(t);
  t = window.setTimeout(function() {
    iFrame[0].contentWindow.postMessage(JSON.stringify({scrollTopShoppingCart: jQuery(window).scrollTop() - iFrame.position().top}), iFrame.attr('src'));
  }, 100);
});
​
window.addEventListener('message', postMessage, false);
  • transaction: If your website would like to know whether the transaction has been successful, you can receive the transaction object
JavaScript
var iFrame = jQuery('iframe');
var transaction = null;
​
var postMessage = function(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.okepay) {
      jQuery.each(data.okepay, function(name, value) {
        switch (name) {
          case 'transaction':
            if (typeof value === 'object') {
              transaction = value;
            }
            break;
        }
      });
    }
  }
};
​
window.addEventListener('message', postMessage, false);

The full implementation will look like this:

JavaScript
var iFrame = jQuery('iframe');
var transaction = null;
var lastPostMessageHeight = 0;
​
var updateIframeHeight = function() {
  var height = lastPostMessageHeight;
​
  if (window.innerWidth <= 590) {
    iFrame.css('height', '100%');
  } else if (height) {
    iFrame.css('height', height + 'px');
  }
};
​
var scrollPage = function(offset) {
  var positionToScrollTo = iFrame.position().top + offset;
  jQuery('body').animate({scrollTop: positionToScrollTo}, 1000, 'linear', function() {
    jQuery(window).trigger('scroll')
  });
};
​
var postMessage = function(e) {
  if (typeof e.data === 'string') {
    try {
      var data = JSON.parse(e.data);
    } catch (e) {}
    if (data && data.okepay) {
      jQuery.each(data.okepay, function(name, value) {
        switch (name) {
          case 'height':
            lastPostMessageHeight = parseInt(value);
            updateIframeHeight();
            break;
          case 'top':
            scrollPage(parseInt(value));
            break;
          case 'transaction':
            if (typeof value === 'object') {
              transaction = value;
            }
            break;
        }
      });
    }
  }
};
​
window.addEventListener('message', postMessage, false);
​
iFrame.load(function() {
  jQuery(this)[0].contentWindow.postMessage(JSON.stringify({origin: window.location.origin}), iFrame.attr('src'));
  jQuery(window).resize(updateIframeHeight);
  updateIframeHeight();
});
​
var t;
jQuery(window).scroll(function(event) {
  window.clearTimeout(t);
  t = window.setTimeout(function() {
    iFrame[0].contentWindow.postMessage(JSON.stringify({scrollTopShoppingCart: jQuery(window).scrollTop() - iFrame.position().top}), iFrame.attr('src'));
  }, 100);
});
Next to read:
Website (modal window)