Richiedere accesso API
Micro Frontend

Strumento di test dell'integrazione

Esegui l'intero flusso generale con le TUE credenziali prima dell'integrazione: crea una sessione con la Public Key e il mint secret, monta il micro-frontend con tale sessione e percorri il flusso reale dello shop. Ogni richiesta e risposta viene mostrata in modo trasparente.

Torna alla guida del Micro-Frontend
Solo pagina di test — il secret non deve mai trovarsi nel browser. Questa pagina simula la parte BACKEND del tuo host: normalmente la chiamata mint avviene da server a server e il secret resta nell'ambiente del server. Qui viene conservato solo nella memoria della pagina (senza localStorage né cookie) e inviato esclusivamente all'endpoint mint. In produzione il secret non deve mai raggiungere il codice client: consulta il flusso mint nella guida.

1. Crea una sessione

È esattamente la chiamata che effettuerà il tuo backend: POST /api/shop/session con il mint secret come Bearer token. La risposta è un session token opaco, di breve durata e associato alla tua Public Key.

Dopo la prima creazione, qui vengono visualizzate la richiesta esatta (con il secret mascherato) e la risposta non elaborata.

2. Avvia il micro-frontend

L'embed viene montato con la tua Public Key e il session token creato, tramite la stessa chiamata mount() che eseguirà la tua pagina. Percorri il flusso: eventi, articoli, carrello, registrazione e checkout.

Prima crea una sessione.

Il micro-frontend supporta tedesco e inglese; per le altre lingue viene utilizzato l'inglese.

Dopo l'avvio, il micro-frontend viene visualizzato qui.

3. Ecco come si presenta dal tuo lato

Il flusso testato è pronto per l'integrazione: la chiamata mint passa nel TUO backend (con il secret come variabile d'ambiente) e il browser vede soltanto il token. Gli snippet contengono i valori inseriti, mentre il secret resta un segnaposto.

Crea la sessione nel 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).

Monta nella tua pagina

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

Oppure senza build: 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>

Il contratto completo — header, campi, codici di errore e revoca — è documentato nella guida del Micro-Frontend.