Fenêtre modale

Avec la fenêtre modale, le client ne quitte jamais votre site : le formulaire de paiement FlowAlp Pay s'ouvre dans un overlay au-dessus de la page courante. Deux voies d'intégration existent — le snippet prêt à l'emploi généré dans le dashboard, ou un petit overlay que vous construisez vous-même autour d'un lien Gateway.

Quand utiliser la modale#

• Une landing page avec un seul produit, billet ou bouton de don
• Des checkouts où une redirection pleine page casserait l'expérience
• Des outils et pages de paiement à déclencher depuis n'importe quel bouton

Pour les checkouts complexes pilotés par l'API, la redirection classique reste généralement plus simple à maîtriser, car les URL de retour et l'état du paiement restent entièrement côté serveur.

Option 1 — Snippet prêt à l'emploi du dashboard#

L'intégration site web de votre dashboard sur https://pay.flowalp.com génère un snippet à copier-coller : un lien ou bouton pointant vers votre page de paiement (par exemple https://<instance>.pay.flowalp.com/pay?tid=<PAYMENT_TEMPLATE_ID>) plus un petit script qui l'ouvre dans un overlay stylé. La bibliothèque modale officielle dépend de jQuery ; n'incluez la bibliothèque et jQuery qu'une seule fois par page, même avec plusieurs boutons de paiement.

L'appel d'initialisation du snippet accepte les options suivantes :

Option 2 — Construire votre propre overlay#

Si vous préférez éviter jQuery et les scripts tiers, ouvrez l'URL de paiement dans un overlay iFrame que vous contrôlez. Combinez-le avec les événements postMessage décrits dans le guide iFrame pour réagir au résultat de la transaction et à la fermeture.

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

À la fermeture de l'overlay, rendez le focus clavier au bouton déclencheur et autorisez la fermeture avec la touche Escape — de petits détails qui gardent le checkout accessible.

Restrictions des moyens de paiement#

La fenêtre modale partage les limites de l'iFrame : PayPal et Coinbase ne fonctionnent pas dans un overlay, et PostFinance est désactivé quand le navigateur bloque les cookies tiers (par défaut sur iOS et macOS). Google Pay exige l'attribut allow="payment *". Si un moyen ne peut pas rester intégré, ajoutez &breakIframe=true à l'URL pour ouvrir la page de paiement externe dans un nouvel onglet — détails dans le guide iFrame.

Confirmer le paiement côté serveur#

Même avec une modale, l'événement de fermeture et l'écran de succès restent de simples signaux d'interface. Confirmez chaque paiement via les webhooks avec la vérification de signature, ou en récupérant la transaction via l'API, avant de livrer.