Embed a checkout

Create the session on your server and send only checkoutUrl to the browser. Keep the secret API key on your backend.

Drop-in integration

<div id="payment"></div>
<script type="module">
  import { mountCheckout } from 'https://magnum.lat/embed.js';
  const frame = mountCheckout(document.querySelector('#payment'), {
    checkoutUrl: checkoutUrlFromYourBackend,
    height: 640,
    onEvent(event) {
      console.log(event.type);
    },
  });
  // When unmounting your screen: frame.destroy();
</script>

Use your actual environment origin in the import. The monorepo also includes the TypeScript package @magnum/sdk; it is not published to npm yet.

Plain iframe

<iframe
  src="SESSION_URL"
  title="Magnum payment"
  style="width:100%;height:640px;border:0;border-radius:22px"
  referrerpolicy="no-referrer"
  allow="clipboard-write"
  sandbox="allow-scripts allow-same-origin allow-forms"
></iframe>

SDK height ranges from 420–900 pixels. Width fills the parent container. Use 600–680 pixels for the complete flow on small screens. Very short viewports may scroll to preserve accessibility.

Appearance and prefilled data

appearance supports theme (light, dark, system), hexadecimal accent, radius from 8 to 28, and compact. Set these on your backend when creating an integration or session. Prefill accepts only email and document; both remain editable.

Origins and allowed networks are checked server-side. The frame-ancestors policy blocks embedding on unauthorized origins. No visual option enables wallets.

Events

The SDK validates the postMessage source window and origin. Events are magnum.ready and magnum.sandbox.completed. They are UI signals, not payment evidence. Verify state on your backend or through authenticated webhooks.