API-Keys
Micro Frontend

Integrations-Tester

Spiel den kompletten Grobablauf mit DEINEN Zugangsdaten durch, bevor du integrierst: Session mit Public Key und Mint-Secret minten, das Micro-Frontend damit mounten und die echte Shop-Journey durchlaufen. Jeder Request und jede Antwort wird transparent angezeigt.

Zum Micro-Frontend-Guide
Nur Testseite — das Secret gehört nie in einen Browser. Diese Seite simuliert den BACKEND-Teil deines Hosts: Der Mint-Aufruf läuft normalerweise server-zu-server, mit dem Secret in deiner Server-Umgebung. Hier bleibt es ausschließlich im Speicher der Seite (kein localStorage, kein Cookie) und wird nur an den Mint-Endpunkt gesendet. In Produktion darf das Secret nie in Client-Code gelangen — siehe den Mint-Flow im Guide.

1. Session minten

Genau der Aufruf, den dein Backend machen wird: POST /api/shop/session mit deinem Mint-Secret als Bearer-Token. Die Antwort ist ein opaker, kurzlebiger Session-Token, gebunden an deinen Public Key.

Nach dem ersten Mint erscheinen hier der exakte Request (mit maskiertem Secret) und die Roh-Antwort.

2. Micro-Frontend starten

Das Embed mountet mit deinem Public Key und dem geminteten Session-Token — derselbe mount()-Aufruf, den deine Seite machen wird. Durchlaufe die Journey: Events, Artikel, Warenkorb, Registrierung, Checkout.

Minte zuerst eine Session.
Das Micro-Frontend rendert hier, sobald du es startest.

3. So sieht das bei dir aus

Der getestete Ablauf zum Mitnehmen: Der Mint-Aufruf wandert in DEIN Backend (mit dem Secret als Umgebungsvariable), der Browser sieht nur den Token. Die Snippets tragen deine eingegebenen Werte — das Secret bleibt ein Platzhalter.

Auf deinem Backend minten

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",
    email: "kunde@example.com", // aus DEINER Server-Session, nie aus dem Browser
  }),
});

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

In deiner Seite mounten

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
});

Oder ohne Build-Schritt: 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>

Der vollständige Vertrag — Header, Felder, Fehlercodes, Widerruf — steht im Micro-Frontend-Guide.