iFrame

The iFrame integration allows you to display a Payrexx tool within your website. All you need to do is copy the code snippets onto your website.

Integration

Example

You can just paste the following code:

<iframe src="https://{INSTANCE_NAME}.payrexx.com/pay?tid={PAYMENT_TEMPLATE_ID}" width="530" height="700" allow="payment *">
</iframe>

For src just enter the URL of your desired payment page.

Advanced

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.payrexx) {
      jQuery.each(data.payrexx, 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 param appview if you want a dynamic height!

  • top: 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")

  • transaction: For all the transaction data, like the status, you can receive the transaction object.

  • closeModal: This contains the redirect URL which you can use to lead the customer to the according page. The IFrame is not allowed to make redirections on your site, therefore you need execute this redirection yourself

Here you go with 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.payrexx) {
      jQuery.each(data.payrexx, 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);
});

Further Information

Some payment methods may not allow the integration in an iFrame due to security issues. These payment methods include, PayPal or Coinbase.

Google Pay will only work with the attribute allow="payment *"!

Last updated