Modal Window

Mit dem Modal Window verlässt die Kundschaft Ihre Website nie: Das FlowAlp Pay Zahlungsformular öffnet sich in einem Overlay über der aktuellen Seite. Zwei Integrationswege stehen offen — das fertige Snippet aus dem Dashboard oder ein kleines, selbst gebautes Overlay rund um einen Gateway-Link.

Wann das Modal passt#

• Eine Landingpage mit einem einzelnen Produkt, Ticket oder Spenden-Button
• Checkouts, bei denen ein Seitenwechsel störend wirken würde
• Tools und Zahlungsseiten, die Sie von beliebigen Buttons aus öffnen möchten

Für komplexe API-getriebene Checkouts bleibt der klassische Redirect meist einfacher nachvollziehbar, weil Rückkehr-URLs und Zahlungsstatus komplett serverseitig liegen.

Option 1 — Fertiges Snippet aus dem Dashboard#

Die Website-Integration in Ihrem Dashboard unter https://pay.flowalp.com erzeugt ein Copy-paste-Snippet: einen Link oder Button auf Ihre Zahlungsseite (zum Beispiel https://<instance>.pay.flowalp.com/pay?tid=<PAYMENT_TEMPLATE_ID>) plus ein kleines Skript, das sie in einem gestylten Overlay öffnet. Die offizielle Modal-Bibliothek setzt jQuery voraus; binden Sie Bibliothek und jQuery nur einmal pro Seite ein, auch bei mehreren Pay-Buttons.

Der Initialisierungsaufruf im Snippet akzeptiert folgende Optionen:

Option 2 — Eigenes Overlay bauen#

Wenn Sie auf jQuery und Fremdskripte verzichten möchten, öffnen Sie die Zahlungs-URL in einem eigenen Overlay-iFrame. Kombinieren Sie ihn mit den postMessage-Events aus dem iFrame-Guide, um auf Transaktionsergebnis und Schliessen zu reagieren.

function openPaymentModal(paymentUrl) {
  var overlay = document.createElement('div');
  overlay.style.cssText =
    'position:fixed;inset:0;background:rgba(0,0,0,.6);' +
    'display:flex;align-items:center;justify-content:center;z-index:9999;';

  var frame = document.createElement('iframe');
  frame.src = paymentUrl; // Gateway link or payment page URL
  frame.width = '530';
  frame.height = '700';
  frame.setAttribute('allow', 'payment *');
  frame.style.cssText =
    'border:0;border-radius:8px;background:#fff;max-width:95vw;max-height:95vh;';

  var close = document.createElement('button');
  close.type = 'button';
  close.textContent = '\u00d7';
  close.setAttribute('aria-label', 'Close payment window');
  close.style.cssText =
    'position:absolute;top:16px;right:16px;font-size:28px;' +
    'background:none;border:0;color:#fff;cursor:pointer;';
  close.addEventListener('click', function () { overlay.remove(); });

  overlay.appendChild(frame);
  overlay.appendChild(close);
  document.body.appendChild(overlay);

  // Handshake so the payment page may post events (see iFrame guide)
  frame.addEventListener('load', function () {
    frame.contentWindow.postMessage(
      JSON.stringify({ origin: window.location.origin }),
      frame.src
    );
  });

  return overlay;
}

document.getElementById('pay-button').addEventListener('click', function () {
  openPaymentModal('https://<instance>.pay.flowalp.com/pay?tid=<PAYMENT_TEMPLATE_ID>');
});

Geben Sie beim Schliessen des Overlays den Tastaturfokus an den auslösenden Button zurück und erlauben Sie das Schliessen per Escape — kleine Details, die den Checkout barrierefrei halten.

Einschränkungen bei Zahlungsmethoden#

Das Modal Window teilt die iFrame-Einschränkungen: PayPal und Coinbase laufen nicht im Overlay, PostFinance wird deaktiviert, wenn der Browser Drittanbieter-Cookies blockiert (Standard auf iOS und macOS). Google Pay braucht das Attribut allow="payment *". Kann eine Methode nicht eingebettet bleiben, hängen Sie &breakIframe=true an die URL, damit sich die externe Zahlungsseite in einem neuen Tab öffnet — Details im iFrame-Guide.

Zahlung serverseitig bestätigen#

Auch beim Modal sind Schliess-Event und Erfolgsbildschirm reine UI-Signale. Bestätigen Sie jede Zahlung über Webhooks mit Signaturprüfung oder durch API-Abruf der Transaktion, bevor Sie liefern.