Request API access
Micro Frontend

Integration tester

Run the whole coarse flow with YOUR credentials before integrating: mint a session with your public key and mint secret, mount the micro-frontend with it, and walk the real shop journey. Every request and response is shown transparently.

Back to the Micro-Frontend guide
Test page only — the secret never belongs in a browser. This page simulates the BACKEND part of your host: the mint call normally runs server-to-server, with the secret in your server environment. Here it is kept in the page's memory only (no localStorage, no cookie) and sent solely to the mint endpoint. In production the secret must never reach client code — see the mint flow in the guide.

1. Mint a session

Exactly the call your backend will make: POST /api/shop/session with your mint secret as a Bearer token. The response is an opaque, short-lived session token bound to your public key.

The exact request (with the secret masked) and the raw response appear here after the first mint.

2. Start the micro-frontend

The embed mounts with your public key and the minted session token — the same mount() call your page will make. Walk the journey: events, articles, cart, registration, checkout.

Mint a session first.
The micro-frontend renders here once started.

3. This is what it looks like on your side

The tested flow, ready to take home: the mint call moves into YOUR backend (with the secret as an environment variable), the browser only ever sees the token. The snippets carry the values you entered — the secret stays a placeholder.

Mint on your 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).

Mount in your page

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

Or without a build step: 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>

The full contract — headers, fields, error codes, revocation — is documented in the Micro-Frontend guide.