Modal window

With the modal window the customer never leaves your site: the FlowAlp Pay payment form opens in an overlay on top of the current page. There are two ways to integrate it — the ready-made snippet generated in the dashboard, or a small overlay you build yourself around a Gateway link.

When to use the modal#

• A landing page with a single product, ticket or donation button
• Checkouts where a full-page redirect would feel disruptive
• Merchant tools and payment pages you want to trigger from any button

For complex API-driven checkouts the classic redirect usually stays easier to reason about, because return URLs and payment state live entirely on the server side.

Option 1 — Ready-made snippet from the dashboard#

The website integration in your dashboard at https://pay.flowalp.com generates a copy-paste snippet: a link or button pointing at your payment page (for example https://<instance>.pay.flowalp.com/pay?tid=<PAYMENT_TEMPLATE_ID>) plus a small script that opens it in a styled overlay. The official modal library depends on jQuery; include the library and jQuery only once per page, even with several pay buttons.

The initialization call in the snippet accepts the following options:

Option 2 — Build your own overlay#

If you prefer to avoid jQuery and third-party scripts, open the payment URL in an overlay iFrame you control. Combine it with the postMessage events described in the iFrame guide to react to the transaction result and close events.

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>');
});

Return the keyboard focus to the triggering button when the overlay closes, and let the Escape key close it — small touches that keep the checkout accessible.

Payment method restrictions#

The modal window shares the iFrame limitations: PayPal and Coinbase cannot run in an overlay, and PostFinance is disabled when the browser blocks third-party cookies (the default on iOS and macOS). Google Pay requires the allow="payment *" attribute. Where a method cannot stay embedded, append &breakIframe=true to the URL so the external payment page opens in a new tab — details in the iFrame guide.

Confirm the payment server-side#

Even with a modal, the closing event and the success screen are UI signals only. Confirm every payment through webhooks with signature verification, or by retrieving the transaction through the API, before you deliver.