Incorpore um checkout

Crie a sessão no seu servidor e envie apenas checkoutUrl ao navegador. A chave secreta fica no backend.

Uma linha de integração

<div id="pagamento"></div>
<script type="module">
  import { mountCheckout } from 'https://magnum.lat/embed.js';
  const frame = mountCheckout(document.querySelector('#pagamento'), {
    checkoutUrl: checkoutUrlRecebidaDoSeuBackend,
    height: 640,
    onEvent(event) {
      console.log(event.type);
    },
  });
  // Ao desmontar sua tela: frame.destroy();
</script>

Use a origem real do seu ambiente no import. Também existe o pacote TypeScript @magnum/sdk no monorepo; ele ainda não foi publicado no npm.

Iframe direto

<iframe
  src="URL_DA_SESSAO"
  title="Pagamento Magnum"
  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>

A altura do SDK pode variar entre 420 e 900 pixels. A largura ocupa o contêiner pai. Use 600–680 pixels para o fluxo completo em telas pequenas. Conteúdo pode rolar em janelas muito baixas para preservar acessibilidade.

Aparência e dados

appearance aceita theme (light, dark, system), accent hexadecimal, radius de 8 a 28 e compact. Configure isso no backend ao criar a integração ou sessão. O pré-preenchimento aceita apenas e-mail e documento; os dois permanecem editáveis.

Origens e redes autorizadas são verificadas no servidor. A política frame-ancestors bloqueia incorporação em origens não autorizadas. Nenhuma opção visual habilita carteiras.

Eventos

O SDK valida a origem e a janela emissora de postMessage. Os eventos são magnum.ready e magnum.sandbox.completed. Eles servem à interface; não são comprovante de pagamento. Confirme estados no seu backend ou por webhook autenticado.