Lifecycle events

Every state change in the embed fires a callback you can hook into. Use these to drive your own UI: show a spinner during confirmation, redirect on success, log analytics, etc.

HelaMesh.mount('#checkout', {
  invoiceId: 'abc123',
  publishableKey: 'pk_test_…',

  onReady: ({ invoice }) => {
    // Embed mounted, showing PENDING state
  },
  onStatusChange: ({ from, to, invoice }) => {
    // Fires for EVERY transition. Great for analytics.
    analytics.track('helamesh_status', { from, to });
  },
  onDetected: ({ invoice }) => {
    // Payment seen on chain (0+ confirmations)
  },
  onConfirming: ({ invoice }) => {
    // Accumulating confirmations
  },
  onConfirmed: ({ invoice }) => {
    // Enough confirmations, last step before COMPLETED
  },
  onPaid: ({ invoice }) => {
    // TERMINAL: invoice is COMPLETED. This is "done".
    window.location.href = '/order/success';
  },
  onExpired: ({ invoice }) => {
    // TERMINAL: payment window passed without payment
  },
  onError: ({ message }) => {
    console.error('HelaMesh embed error:', message);
  },
});

Which callback to use

For most integrations, only two callbacks matter:

• onPaid — the customer paid. Redirect or unlock content.
• onExpired — the customer didn't pay in time. Show a retry UI.

The intermediate states (onDetected, onConfirming, onConfirmed) exist for dashboards and status displays. You probably don't need them unless you're building a heavy UI around the payment flow.

onStatusChange is the "catch-all" — use it for analytics to see where customers drop off in the confirmation flow.