Pedir acesso à API
Micro Frontend

Testador de integração

Execute todo o fluxo com as SUAS credenciais antes da integração: crie uma sessão com a sua chave pública e o seu mint secret, monte o micro-frontend com essa sessão e percorra o fluxo real da loja. Todos os pedidos e respostas são apresentados de forma transparente.

Voltar ao guia Micro-Frontend
Página apenas para testes — o segredo nunca deve estar num navegador. Esta página simula o BACKEND do seu host: normalmente, a chamada de criação é executada entre servidores, com o segredo no ambiente do seu servidor. Aqui, o segredo é mantido apenas na memória da página (sem localStorage nem cookies) e enviado exclusivamente para o endpoint de criação. Em produção, o segredo nunca deve chegar ao código do cliente — consulte o fluxo de criação no guia.

1. Crie uma sessão

Exatamente a chamada que o seu backend fará: POST /api/shop/session com o seu mint secret como token Bearer. A resposta é um session token opaco e de curta duração, associado à sua public key.

O pedido exato (com o segredo ocultado) e a resposta em bruto aparecem aqui após a primeira criação.

2. Inicie o micro-frontend

O componente incorporado é montado com a sua chave pública e o token de sessão criado — a mesma chamada mount() que a sua página fará. Percorra o fluxo: eventos, artigos, carrinho, registo e checkout.

Crie primeiro uma sessão.

O micro-frontend suporta alemão e inglês; os restantes idiomas utilizam o inglês como alternativa.

O micro-frontend é aqui renderizado uma vez iniciado.

3.º É assim que fica do seu lado

O fluxo testado está pronto a integrar: a chamada de criação passa para o SEU backend (com o segredo numa variável de ambiente) e o navegador vê apenas o token. Os excertos incluem os valores que introduziu — o segredo continua a ser um marcador de posição.

Criar no seu backend

server.ts
// SERVER-SEITE deines Hosts — das Secret bleibt in deiner Server-Umgebung.
const res = await fetch("https://<dein-host>/api/shop/session", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.ADITUS_MINT_SECRET}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    publicKey: "pk_dein_key",
    // ohne email: anonyme Gast-Session (browsen + Warenkorb; Checkout erst nach onUserRequired)
  }),
});

const { sessionToken, expiresAt } = await res.json();
// sessionToken an den Browser reichen (inline oder per fetch).

Monte na sua página

page.ts
import { mount } from "@aditus/shop-embed";

const el = document.getElementById("aditus-shop");
if (!el) throw new Error("Mount-Ziel nicht gefunden");

const handle = mount(el, {
  publicKey: "pk_dein_key",
  sessionToken, // vom eigenen Backend gemintet, nur im Speicher halten
});

Ou sem uma etapa de compilação: Web Component

index.html
<!-- Ohne Build-Schritt: das selbst gehostete Web-Component-Bundle. -->
<script src="https://<deine-aditus-instanz>/api/embed/v1/aditus-shop.js" defer></script>

<aditus-shop
  public-key="pk_dein_key"
  session-token="<vom-backend-geminteter-token>"
></aditus-shop>

O contrato completo — cabeçalhos, campos, códigos de erro e revogação — está documentado no guia do micro-frontend.