Sigillo-Widget

Was das Widget übernimmt

• Desktop: QR-Code zum Scannen mit der swiyu-App
• Handy: Button «In swiyu-App öffnen»
• Warten auf das Ergebnis, Anzeige von bestätigt, zu jung, abgebrochen, abgelaufen, «Erneut versuchen»
• Sprachen: Deutsch, Französisch, Italienisch, Englisch
• Eigenes Shadow DOM – kein Konflikt mit dem CSS Ihres Shops

Sicherheitsprinzip

Der Browser erhält nie Ihren API-Key, sondern nur id und client_secret einer einzelnen Prüfung. Damit kann das Widget genau diese Prüfung anzeigen, sonst nichts.

1. Server-Route

Eine Route auf Ihrem Server startet die Prüfung und gibt nur id und client_secret zurück. Beispiel in PHP:

$r = wp_remote_post('https://api.sigillo-id.ch/v1/verifications', [
  'headers' => ['Authorization' => 'Bearer ' . SIGILLO_API_KEY, 'Content-Type' => 'application/json'],
  'body'    => json_encode(['min_age' => 18, 'reference' => $cart_id]),
]);
$v = json_decode(wp_remote_retrieve_body($r), true);
wp_send_json(['id' => $v['id'], 'client_secret' => $v['client_secret']]);

2. Widget einbinden

<div id="age-check"></div>
<script src="https://api.sigillo-id.ch/widget.js"></script>
<script>
  Sigillo.mount('#age-check', {
    createVerification: () => fetch('/sigillo/start', { method: 'POST' }).then(r => r.json()),
    onVerified: (result) => unlockCheckout(result.id),
  });
</script>

Als Dialog statt eingebettet: Sigillo.open({ createVerification, onVerified }).

3. Serverseitig bestätigen

onVerified ist nur ein Signal für die Oberfläche. Vor dem Annehmen der Bestellung prüft Ihr Server GET /v1/verifications/{id} → status == "verified".

Optionen

Option	Beschreibung
createVerification	Funktion, die { id, client_secret } von Ihrem Server holt (auch für «Erneut versuchen»)
verification	alternativ eine bereits angelegte Prüfung { id, client_secret }
locale	de, fr, it, en – Standard: Browsersprache
theme	light (Standard), dark, auto
accentColor	Farbe der Buttons, z. B. '#7A1E38'
autoStart	Prüfung ohne Klick sofort starten
onVerified, onRejected, onExpired, onError, onStateChange	Callbacks

Eine vollständige Referenz-Integration ist unser Demo-Shop.