Skip to main content
Every payment created via the Payments API returns a paymentUrl pointing to a hosted payment page. You can share this URL directly with your customer or embed it in your application as an iframe.

Standalone usage

Share the paymentUrl with your customer via link, email, or redirect. When the customer completes the payment:
  • If you provided a successRedirectUrl, the customer is redirected there
  • If you provided a failureRedirectUrl, the customer is redirected there on failure
  • If no redirect URLs are set, the portal displays a confirmation message

Embedding the payment portal

You can embed the payment page directly in your application for a seamless checkout experience.

Prerequisites

Domain whitelisting required. Before embedding, contact support@paygentic.io to have your domain whitelisted. Paygentic must grant permission for your domain before the embedded portal will work.
Add platform.paygentic.io to your Content Security Policy frame-src directive:
Content-Security-Policy: frame-src 'self' https://platform.paygentic.io;

Implementation

<iframe
  src="https://platform.paygentic.io/portal/pay/SESSION_ID"
  width="100%"
  height="800px"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
  style="border: none; border-radius: 8px;"
></iframe>

<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://platform.paygentic.io') return;

    if (event.data?.type === 'payment_success') {
      window.location.href = '/success';
    } else if (event.data?.type === 'payment_error') {
      alert('Payment failed. Please try again.');
    }
  });
</script>
Replace SESSION_ID with the session ID from the paymentUrl returned by the API. The paymentUrl is in the format https://platform.paygentic.io/portal/pay/{sessionId}.

Handling payment events

When embedded in an iframe, the portal sends postMessage events instead of redirecting. Listen for these events to update your UI:
Event typeWhen triggered
payment_successPayment completed successfully
payment_errorPayment failed or was cancelled
How redirects work: When the portal is loaded as a standalone page, it uses successRedirectUrl and failureRedirectUrl for navigation. When embedded in an iframe, it sends postMessage events instead. The portal detects the context automatically.
The sandbox attribute is required for security. Each value serves a specific purpose:
  • allow-scripts — Portal JavaScript functionality
  • allow-same-origin — Communication between the portal and your site
  • allow-forms — Payment form submission
  • allow-popups — 3D Secure authentication popups

Next steps