Modal window

Con la modal window il cliente non lascia mai il tuo sito: il modulo di pagamento FlowAlp Pay si apre in un overlay sopra la pagina corrente. Puoi integrarla in due modi — con lo snippet pronto generato nella dashboard oppure con un piccolo overlay costruito da te attorno a un link Gateway.

Quando usare la modal#

• Una landing page con un solo prodotto, biglietto o pulsante donazioni
• Checkout in cui un redirect a pagina intera risulterebbe invasivo
• Tool e pagine di pagamento da aprire da un pulsante qualsiasi

Per i checkout complessi guidati dall'API, il classico redirect resta di solito più semplice da gestire, perché URL di ritorno e stato del pagamento vivono interamente lato server.

Opzione 1 — Snippet pronto dalla dashboard#

L'integrazione per siti web nella tua dashboard su https://pay.flowalp.com genera uno snippet copia-incolla: un link o pulsante che punta alla tua pagina di pagamento (ad esempio https://<instance>.pay.flowalp.com/pay?tid=<PAYMENT_TEMPLATE_ID>) più un piccolo script che la apre in un overlay già stilizzato. La libreria modal ufficiale dipende da jQuery; includi libreria e jQuery una sola volta per pagina, anche con più pulsanti di pagamento.

La chiamata di inizializzazione dello snippet accetta queste opzioni:

Opzione 2 — Costruisci il tuo overlay#

Se preferisci evitare jQuery e script di terzi, apri l'URL di pagamento in un overlay iFrame sotto il tuo controllo. Abbinalo agli eventi postMessage descritti nella guida iFrame per reagire al risultato della transazione e alla chiusura.

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

Alla chiusura dell'overlay riporta il focus della tastiera sul pulsante che lo ha aperto e consenti la chiusura con il tasto Escape: piccoli accorgimenti che mantengono il checkout accessibile.

Limitazioni dei metodi di pagamento#

La modal window condivide le limitazioni dell'iFrame: PayPal e Coinbase non possono girare in un overlay e PostFinance viene disattivato quando il browser blocca i cookie di terze parti (predefinito su iOS e macOS). Google Pay richiede l'attributo allow="payment *". Se un metodo non può restare embedded, aggiungi &breakIframe=true all'URL così la pagina di pagamento esterna si apre in una nuova scheda — dettagli nella guida iFrame.

Conferma il pagamento lato server#

Anche con la modal, l'evento di chiusura e la schermata di successo restano solo segnali di interfaccia. Conferma ogni pagamento tramite i webhook con la verifica della firma, oppure recuperando la transazione via API, prima di consegnare.