Quickstart

export function Checkout() {
  const handleVerified = (e: CustomEvent) => {
    console.log("Verified!", e.detail);
  };

  return (
    <div>
      <input id="email" type="email" placeholder="you@example.com" />
      <stile-frame
        mode="modal"
        publishable-key="stile_pk_..."
        workflow-id="wf_YOUR_WORKFLOW_ID"
        ref={(el) => el?.addEventListener("stile:verified", handleVerified)}
      />
    </div>
  );
}

<script src="https://js.stile.id/v1/stile.js"></script>

<input id="email" type="email" placeholder="you@example.com" />
<stile-frame
  mode="modal"
  publishable-key="stile_pk_..."
  workflow-id="wf_YOUR_WORKFLOW_ID"
></stile-frame>

<script>
  document.querySelector("stile-frame")
    .addEventListener("stile:verified", (e) => {
      console.log("Verified!", e.detail);
    });
</script>

<script src="https://js.stile.id/v1/stile.js"></script>

<form action="/api/place-order" method="POST">
  <input name="email" type="email" placeholder="you@example.com" />

  <stile-frame
    mode="modal"
    publishable-key="stile_pk_..."
    workflow-id="wf_YOUR_WORKFLOW_ID"
    required
  ></stile-frame>

  <button type="submit">Place Order</button>
</form>

import { verify } from "@stile/widget";

const result = await verify({
  publishableKey: "stile_pk_...",
  workflowId: "wf_YOUR_WORKFLOW_ID",
  email: "user@example.com",
});

console.log("Verified!", result.sessionId);

npm install @stile/node

import Stile from "@stile/node";

const stile = new Stile(process.env.STILE_API_KEY!);

export async function POST(req: Request) {
  // Verifies the signature, checks the 5-minute timestamp window,
  // and parses the event — throws WebhookSignatureError on anything fishy.
  const event = await stile.webhooks.fromRequest(
    req,
    process.env.STILE_WEBHOOK_SECRET!,
  );

  if (event.type === "verification_session.verified") {
    // Grant access, update your database, etc.
  }

  return Response.json({ received: true });
}

import { createHmac, timingSafeEqual } from "node:crypto";

const SECRET = process.env.STILE_WEBHOOK_SECRET!;

export async function POST(req: Request) {
  const rawBody = await req.text();
  const sig = req.headers.get("stile-signature") ?? "";

  // Parse t= and v1= from the header
  const parts = sig.split(",");
  const ts = parts.find((p) => p.startsWith("t="))?.slice(2);
  const v1 = parts.find((p) => p.startsWith("v1="))?.slice(3);

  if (!ts || !v1) return new Response("Bad signature", { status: 400 });
  if (Math.abs(Date.now() / 1000 - Number(ts)) > 300)
    return new Response("Expired", { status: 400 });

  const expected = createHmac("sha256", SECRET)
    .update(`${ts}.${rawBody}`)
    .digest("hex");

  if (!timingSafeEqual(Buffer.from(v1, "hex"), Buffer.from(expected, "hex")))
    return new Response("Invalid", { status: 400 });

  const event = JSON.parse(rawBody);
  if (event.type === "verification_session.verified") {
    // Grant access, update your database, etc.
  }

  return Response.json({ received: true });
}

import hmac, hashlib, time, json, os
from flask import Flask, request, jsonify

app = Flask(__name__)
SECRET = os.environ["STILE_WEBHOOK_SECRET"]

@app.route("/webhooks", methods=["POST"])
def handle_webhook():
    raw_body = request.get_data(as_text=True)
    sig = request.headers.get("stile-signature", "")
    parts = dict(p.split("=", 1) for p in sig.split(",") if "=" in p)
    ts, v1 = parts.get("t"), parts.get("v1")

    if not ts or not v1:
        return "Bad signature", 400
    if abs(time.time() - int(ts)) > 300:
        return "Expired", 400

    expected = hmac.new(SECRET.encode(), f"{ts}.{raw_body}".encode(), hashlib.sha256).hexdigest()
    if not hmac.compare_digest(v1, expected):
        return "Invalid", 400

    event = json.loads(raw_body)
    if event["type"] == "verification_session.verified":
        pass  # Grant access

    return jsonify(received=True)