Payment Widget

<!-- Payment Widget (standalone) -->
<div id="qt-portal-payment"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="qt-portal-payment"
  data-display-mode="button">
</div>

<!-- Load widgets -->
<script type="module" 
  src="https://cdn.widgetfied.com/portal.js">
</script>

<!-- Payment Widget with Customer Portal integration -->
<div id="qt-portal-payment"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="qt-portal-payment"
  data-global-name="qtPortalPayment">
</div>

<script type="module" src="https://cdn.widgetfied.com/portal.js"></script>

<script>
  // Listen for payment results on the global event bus
  window.addEventListener('DOMContentLoaded', () => {
    qtPortalPayment.on('payment:complete', (data) => {
      if (data.success) {
        // data: { success, type, reference, amount, sessionId }
        console.log('Payment complete:', data);
        // Run your post-payment logic here (redirect, update UI, etc.)
      }
    });

    qtPortalPayment.on('payment:closed', () => {
      // Modal closed — fires on both success and cancel.
      // Gate any "cancelled" handling on whether payment:complete fired first.
    });
  });
</script>