Demander un accès API
Micro Frontend

Testeur d'integration

Deroulez tout le flux general avec VOS identifiants avant d'integrer : mintez une session avec votre public key et votre mint secret, montez le micro-frontend avec elle et parcourez le vrai parcours boutique. Chaque requete et chaque reponse est affichee en toute transparence.

Retour au guide Micro-Frontend
Page de test uniquement — le secret n'a jamais sa place dans un navigateur. Cette page simule la partie BACKEND de votre hote : l'appel de mint s'execute normalement de serveur a serveur, avec le secret dans votre environnement serveur. Ici, il reste uniquement en memoire de la page (pas de localStorage, pas de cookie) et n'est envoye qu'au endpoint de mint. En production, le secret ne doit jamais atteindre le code client — voir le mint flow dans le guide.

1. Minter une session

Exactement l'appel que fera votre backend : POST /api/shop/session avec votre mint secret comme jeton Bearer. La reponse est un session token opaque et de courte duree, lie a votre public key.

La requete exacte (avec le secret masque) et la reponse brute apparaissent ici apres le premier mint.

2. Demarrer le micro-frontend

L'embed se monte avec votre public key et le session token minte — le meme appel mount() que fera votre page. Parcourez le parcours : evenements, articles, panier, inscription, checkout.

Mintez d'abord une session.

Le micro-frontend prend en charge l'allemand et l'anglais ; les autres langues retombent sur l'anglais.

Le micro-frontend s'affiche ici une fois demarre.

3. Voici ce que cela donne de votre cote

Le flux teste, pret a emporter : l'appel de mint passe dans VOTRE backend (avec le secret en variable d'environnement), le navigateur ne voit que le token. Les snippets reprennent les valeurs que vous avez saisies — le secret reste un espace reserve.

Minter sur votre 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).

Monter dans votre 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
});

Ou sans etape de 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>

Le contrat complet — en-tetes, champs, codes d'erreur, revocation — est documente dans le guide Micro-Frontend.