Iframe integration

Two possible modes

The embeddable iframe keeps the customer on your site. The hosted payment_url redirects them. Both are created from the same session — choose based on your UX.

1. Create the session

From your server, create a session via POST /api/payment/session. See Quickstart. The response contains iframe_url.

2. Insert the iframe

<iframe
  id="aventopay-checkout"
  src="{iframe_url}"
  width="100%"
  height="700"
  frameborder="0"
  allow="payment"
></iframe>

3. Listen to postMessage events

The iframe sends <code>postMessage</code> to signal events. Listen on the parent side:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://avento-pay.com') return;

  switch (event.data.type) {
    case 'PAYMENT_SUCCESS':
      // UX signal only — confirm the order ONLY after the server webhook
      showSuccessBanner();
      break;
    case 'PAYMENT_FAILED':
      showErrorBanner(event.data.message);
      break;
    case 'PAYMENT_HEIGHT':
      document.getElementById('aventopay-checkout').style.height = event.data.height + 'px';
      break;
  }
});

postMessage is not proof of payment

postMessages are UX signals (show a success screen, resize). The proof of payment remains the signed webhook server-side.

4. Auto-resize

The iframe regularly sends its height via PAYMENT_HEIGHT. Adjust the iframe's height attribute to avoid internal scrollbars.

5. Content Security Policy

If you have a strict CSP, allow:

frame-src https://avento-pay.com;
connect-src https://avento-pay.com;

6. Fallback: classic redirection