Solicitar acceso a la API
Micro Frontend

Probador de integracion

Ejecuta todo el flujo general con TUS credenciales antes de integrar: acuna una sesion con tu public key y tu mint secret, monta el micro-frontend con ella y recorre el viaje real de la tienda. Cada solicitud y cada respuesta se muestran de forma transparente.

Volver a la guia Micro-Frontend
Solo pagina de pruebas — el secret nunca debe estar en un navegador. Esta pagina simula la parte BACKEND de tu host: la llamada de mint normalmente se ejecuta de servidor a servidor, con el secret en tu entorno de servidor. Aqui se mantiene unicamente en la memoria de la pagina (sin localStorage, sin cookie) y se envia solo al endpoint de mint. En produccion el secret nunca debe llegar al codigo cliente — consulta el mint flow en la guia.

1. Acunar una sesion

Exactamente la llamada que hara tu backend: POST /api/shop/session con tu mint secret como token Bearer. La respuesta es un session token opaco y de corta duracion, vinculado a tu public key.

La solicitud exacta (con el secret enmascarado) y la respuesta en bruto aparecen aqui tras el primer mint.

2. Iniciar el micro-frontend

El embed se monta con tu public key y el session token acunado — la misma llamada mount() que hara tu pagina. Recorre el viaje: eventos, articulos, carrito, registro, checkout.

Acuna primero una sesion.

El micro-frontend admite aleman e ingles; los demas idiomas recurren al ingles.

El micro-frontend se muestra aqui una vez iniciado.

3. Asi se ve en tu lado

El flujo probado, listo para llevar: la llamada de mint pasa a TU backend (con el secret como variable de entorno), el navegador solo ve el token. Los snippets llevan los valores que introdujiste — el secret sigue siendo un marcador de posicion.

Acunar en tu 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).

Montar en tu 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
});

O sin paso 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>

El contrato completo — cabeceras, campos, codigos de error, revocacion — esta documentado en la guia Micro-Frontend.