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

Necessary resources

There are no resources necessary for a basic implementation.

Example code

Simply paste the following code:

var iFrame = jQuery('iframe');

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

iFrame.on('load', function() {
        jQuery(this)[0].contentWindow.postMessage(JSON.stringify({origin: window.location.origin}), iFrame.attr('src'));
});

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.
You should not set the parameter app view if you want to have a dynamic height!
top: If you have the dynamic height functionality implemented, you probably need to implement the scroll functionality in order to have a scrollable page (e.g. on "add to cart" button or on "go to checkout").
transaction: For all transaction data, like status, the transaction object can be received.
closeModal: This contains the redirect URL used to lead the customer to the respective page. The iFrame is not allowed to make redirections on your site, therefore you need to execute this redirection yourself.

Following, you'll find a full code example:

var iFrame = jQuery('iframe');
var transaction = null;
var lastPostMessageHeight = 0;

var updateIframeHeight = function() {
  var height = lastPostMessageHeight;
	
  // This can be individually changed.
  // Currently the full height is only applied for big displays (> 590px in width)
  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, html').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.vrpaysecure) {
      jQuery.each(data.vrpaysecure, 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;
          case 'closeModal':
            window.location.href = value;
            break;
        }
      });
    }
  }
};

window.addEventListener('message', postMessage, false);

iFrame.on('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);
});