iFrame

Mit der iFrame-Integration zeigst du ein zahls.ch Tool auf deiner Website an. Kopiere die Code-Snippets auf deine Seite.

Integration

Beispiele

Zahlungsseite aus dem Pages-Tool

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

• INSTANCE_NAME – Name der Zahlungsinstanz
• PAYMENT_TEMPLATE_ID – Seiten-ID einer Zahlungsseite: Pages-Tool

Zahlungsseite mit Terminal

<iframe
    src="https://{INSTANCE_NAME}.zahls.ch/vpos"
    width="530"
    height="700"
    allow="payment *">
</iframe> 

• INSTANCE_NAME – Name der Zahlungsinstanz

Weitere Integrationen mit Tools

Erweitert

Ein eingebetteter zahls.ch-iFrame sendet Nachrichten an die Seite. Du kannst sie abfangen und verarbeiten. Das folgende Beispiel zeigt das Abfangen der Nachrichten.

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.zahls) {
      jQuery.each(data.zahls, 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);

Es gibt vier Nachrichtentypen:

• height: Setzt die iFrame-Höhe dynamisch, damit innerhalb des iFrames nicht gescrollt werden muss. Setze appview nicht, wenn du eine dynamische Höhe willst!
• top: Hast du dynamische Höhe implementiert, brauchst du vermutlich Scroll-Logik, damit die Seite bei Bedarf scrollt (z. B. bei «In den Warenkorb» oder «Zur Kasse»).
• transaction: Transaktionsdaten inklusive Status – du erhältst das Transaktionsobjekt.
• closeModal: Schliess-Event des iFrames. Der Wert enthält die Redirect-URL, mit der du den Kunden von der iFrame-Seite weiterleitest. Der iFrame darf auf deiner Seite keine Redirects ausführen – du musst die Weiterleitung selbst auslösen.

Vollständiges Code-Beispiel:

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

var updateIframeHeight = function() {
  var height = lastPostMessageHeight;
    
  // This can be changed individually.
  // 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.zahls) {
      jQuery.each(data.zahls, function(name, value) {
        switch (name) {
          // Adjust the height of the iFrame
          case 'height':
            lastPostMessageHeight = parseInt(value);
            updateIframeHeight();
            break;
          // Scroll the page to a given point
          case 'top':
            scrollPage(parseInt(value));
            break;
          // Retrieve the transaction
          case 'transaction':
            if (typeof value === 'object') {
              transaction = value;
            }
            break;
          // Redirect from page with iFrame to given URL
          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);
});