Advanced Patterns

import type { NextConfig } from "next";
import createMDX from "@next/mdx";

const nextConfig: NextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
  cacheComponents: process.env.CACHE_COMPONENTS === "1",
  experimental: {
    useOffline: true,
  },
  async headers() {
    return [
      {
        source: "/sw.js",
        headers: [
          { key: "Content-Type", value: "application/javascript; charset=utf-8" },
          { key: "Cache-Control", value: "no-cache, no-store, must-revalidate" },
          { key: "Content-Security-Policy", value: "default-src 'self'; script-src 'self'" },
        ],
      },
    ];
  },
};

const withMDX = createMDX({});

export default withMDX(nextConfig);

import type { MDXComponents } from "mdx/types";

const components = {
  h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
  a: ({ href, children }) => (
    <a href={href} rel="noopener noreferrer">
      {children}
    </a>
  ),
} satisfies MDXComponents;

export function useMDXComponents(): MDXComponents {
  return components;
}

export const metadata = { title: "Docs (MDX)" }

# Welcome to the Bookshelf docs

This page is **MDX**: Markdown plus JSX, routed like any other `page` file.

- Rendered on the server
- Styled through `mdx-components.tsx`

[Next.js](https://nextjs.org/)

export default async function Page({ params }: PageProps<"/blog/[slug]">) {
  const { slug } = await params;
  const { default: Post } = await import(`@/content/${slug}.mdx`);
  return <Post />;
}

export function generateStaticParams() {
  return [{ slug: "welcome" }, { slug: "about" }];
}

export const dynamicParams = false;

export const meta = { title: "Welcome post", author: "Ada" }

# Welcome

Posts live in `content/` and are imported by slug.

$ curl -s localhost:3904/docs | grep -o '<article.*' | head -c 120
<article data-layout="docs"><h1 class="text-3xl font-bold">Welcome to the Bookshelf docs</h1>
$ curl -s localhost:3904/blog/welcome | grep -o '<h1[^>]*>[^<]*</h1>'
<h1 class="text-3xl font-bold">Welcome</h1>
$ curl -s -o /dev/null -w '%{http_code}\n' localhost:3904/blog/nope
404

import { timingSafeEqual } from "node:crypto";
import { draftMode } from "next/headers";
import { redirect } from "next/navigation";
import { getPost } from "@/lib/cms";

function safeEqual(a: string, b: string) {
  const left = Buffer.from(a);
  const right = Buffer.from(b);
  return left.length === right.length && timingSafeEqual(left, right);
}

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get("secret");
  const slug = searchParams.get("slug");
  const expected = process.env.DRAFT_SECRET;

  if (!expected || !secret || !slug || !safeEqual(secret, expected)) {
    return new Response("Invalid token", { status: 401 });
  }
  // Ask the CMS for the entry (draft version included) and redirect to the path
  // we derive from it, never to a path taken from the query string.
  const post = await getPost(slug, true);
  if (!post) {
    return new Response("Invalid slug", { status: 404 });
  }
  const draft = await draftMode();
  draft.enable();
  redirect(`/posts/${post.slug}`);
}

import { draftMode } from "next/headers";

export async function POST() {
  const draft = await draftMode();
  draft.disable();
  return new Response(null, { status: 204 });
}

import "server-only";

type Post = { slug: string; title: string; body: string };

const published: Record<string, Post> = {
  hello: { slug: "hello", title: "Hello", body: "Published text." },
};
const drafts: Record<string, Post> = {
  hello: { slug: "hello", title: "Hello (draft)", body: "Unpublished edit." },
  upcoming: { slug: "upcoming", title: "Upcoming", body: "Not published yet." },
};

export async function getPost(slug: string, preview: boolean): Promise<Post | null> {
  // A real CMS client would call its preview API here when `preview` is true.
  return (preview ? (drafts[slug] ?? published[slug]) : published[slug]) ?? null;
}

import { draftMode } from "next/headers";
import { notFound } from "next/navigation";
import { getPost } from "@/lib/cms";

export function generateStaticParams() {
  return [{ slug: "hello" }];
}

export default async function Page({ params }: PageProps<"/posts/[slug]">) {
  const { slug } = await params;
  const { isEnabled } = await draftMode();
  const post = await getPost(slug, isEnabled);
  if (!post) notFound();
  return (
    <main>
      {isEnabled && <p role="status">Preview mode is on.</p>}
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </main>
  );
}

$ curl -s -o /dev/null -w '%{http_code}\n' "localhost:3904/api/draft/enable?secret=wrong&slug=hello"
401
$ curl -s -o /dev/null -w '%{http_code}\n' "localhost:3904/api/draft/enable?secret=$SECRET&slug=nope"
404
$ curl -s -D- -o /dev/null "localhost:3904/api/draft/enable?secret=$SECRET&slug=upcoming"
HTTP/1.1 307 Temporary Redirect
location: /posts/upcoming
set-cookie: __prerender_bypass=<value>; Path=/; Secure; HttpOnly; SameSite=none
$ curl -s localhost:3904/posts/hello | grep -o '<h1>[^<]*</h1>'        # published, cached
<h1>Hello</h1>
$ curl -s -H "Cookie: $COOKIE" localhost:3904/posts/hello | grep -o '<h1>[^<]*</h1>'
<h1>Hello (draft)</h1>
$ curl -s -o /dev/null -w '%{http_code}\n' localhost:3904/posts/upcoming              # not published
404
$ curl -s -o /dev/null -w '%{http_code}\n' -H "Cookie: $COOKIE" localhost:3904/posts/upcoming
200

import { NextResponse, type NextRequest } from "next/server";

const ROOT_DOMAIN = process.env.ROOT_DOMAIN ?? "localhost";

export function proxy(request: NextRequest) {
  const host = request.headers.get("host")?.split(":")[0] ?? "";
  const subdomain = host.endsWith(`.${ROOT_DOMAIN}`)
    ? host.slice(0, -(ROOT_DOMAIN.length + 1))
    : null;

  // Only accept well-formed tenant names before they reach a route path.
  if (subdomain && /^[a-z0-9-]{1,63}$/.test(subdomain)) {
    const url = request.nextUrl.clone();
    url.pathname = `/tenants/${subdomain}${url.pathname}`;
    return NextResponse.rewrite(url);
  }
  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|.*\\..*).*)"],
};

import { notFound } from "next/navigation";

const tenants: Record<string, { name: string; color: string }> = {
  acme: { name: "Acme Books", color: "tomato" },
  globex: { name: "Globex Reads", color: "steelblue" },
};

export function generateStaticParams() {
  return Object.keys(tenants).map((tenant) => ({ tenant }));
}

export const dynamicParams = false;

export default async function TenantHome({ params }: PageProps<"/tenants/[tenant]">) {
  const { tenant } = await params;
  const config = tenants[tenant];
  if (!config) notFound();
  return (
    <main style={{ borderTop: `4px solid ${config.color}` }}>
      <h1>{config.name}</h1>
      <p>Tenant: {tenant}</p>
    </main>
  );
}

$ curl -s -H 'Host: acme.localhost:3904' localhost:3904/ | grep -o '<h1>[^<]*</h1>'
<h1>Acme Books</h1>
$ curl -s -H 'Host: globex.localhost:3904' localhost:3904/ | grep -o '<h1>[^<]*</h1>'
<h1>Globex Reads</h1>
$ curl -s -o /dev/null -w '%{http_code}\n' -H 'Host: nobody.localhost:3904' localhost:3904/
404
$ curl -s -o /dev/null -w '%{http_code}\n' localhost:3904/tenants/acme
200

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "Bookshelf",
    short_name: "Bookshelf",
    description: "A reading list that works on a flaky connection",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#0b5fff",
    icons: [{ src: "/icon-192.png", sizes: "192x192", type: "image/png" }],
  };
}

// Minimal service worker: handles push messages and notification clicks.
self.addEventListener("push", (event) => {
  if (!event.data) return;
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: "/icon-192.png",
    }),
  );
});

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  event.waitUntil(clients.openWindow("/"));
});

"use client";

import { useEffect, useState } from "react";

export function RegisterServiceWorker() {
  const [state, setState] = useState<"unsupported" | "registering" | "ready">("registering");

  useEffect(() => {
    if (!("serviceWorker" in navigator)) {
      setState("unsupported");
      return;
    }
    navigator.serviceWorker
      .register("/sw.js", { scope: "/", updateViaCache: "none" })
      .then(() => setState("ready"))
      .catch(() => setState("unsupported"));
  }, []);

  return <p>Service worker: {state}</p>;
}

$ curl -s -D- localhost:3904/manifest.webmanifest | grep -i -E '^HTTP|content-type'
HTTP/1.1 200 OK
content-type: application/manifest+json
$ curl -s -D- -o /dev/null localhost:3904/sw.js | grep -i -E 'content-type|cache-control|content-security'
Content-Type: application/javascript; charset=utf-8
Cache-Control: no-cache, no-store, must-revalidate
Content-Security-Policy: default-src 'self'; script-src 'self'
# Playwright, real Chrome:  <p>Service worker: ready</p>  and  getRegistrations().length === 1

"use client";

import { useOffline } from "next/offline";

export function OfflineBanner() {
  const isOffline = useOffline();
  if (!isOffline) return null;
  return (
    <div role="status">Offline. Pending requests will retry once you are back online.</div>
  );
}

import { ViewTransition } from "react";
import Link from "next/link";
import { photos } from "@/lib/photos";

export default function Gallery() {
  return (
    <ViewTransition
      enter={{ "nav-back": "nav-back", default: "none" }}
      exit={{ "nav-forward": "nav-forward", default: "none" }}
      default="none"
    >
      <main>
        <h1>Gallery</h1>
        <ul>
          {photos.map((photo) => (
            <li key={photo.id}>
              <Link href={`/gallery/${photo.id}`} transitionTypes={["nav-forward"]}>
                <ViewTransition name={`photo-${photo.id}`} share="morph" default="none">
                  <span className="thumb">{photo.title}</span>
                </ViewTransition>
              </Link>
            </li>
          ))}
        </ul>
      </main>
    </ViewTransition>
  );
}

import { ViewTransition } from "react";
import Link from "next/link";
import { notFound } from "next/navigation";
import { photos } from "@/lib/photos";

export function generateStaticParams() {
  return photos.map((p) => ({ id: p.id }));
}

export default async function Photo({ params }: PageProps<"/gallery/[id]">) {
  const { id } = await params;
  const photo = photos.find((p) => p.id === id);
  if (!photo) notFound();
  return (
    <ViewTransition
      enter={{ "nav-forward": "nav-forward", default: "none" }}
      exit={{ "nav-back": "nav-back", default: "none" }}
      default="none"
    >
      <main>
        <Link href="/gallery" transitionTypes={["nav-back"]}>
          Back to the gallery
        </Link>
        <ViewTransition name={`photo-${photo.id}`} share="morph" default="none">
          <h1 className="hero">{photo.title}</h1>
        </ViewTransition>
      </main>
    </ViewTransition>
  );
}

startViewTransition supported: true
after clicking the thumbnail link:  [ '["nav-forward"]' ]
after clicking "Back to the gallery": [ '["nav-forward"]', '["nav-back"]' ]

export const runtime = "edge";

export async function GET() {
  return Response.json({ runtime: process.env.NEXT_RUNTIME ?? "unknown" });
}

import { hostname } from "node:os";

export async function GET() {
  return Response.json({ runtime: process.env.NEXT_RUNTIME, hasFs: typeof hostname() === "string" });
}

$ curl -s localhost:3904/api/edge-demo
{"runtime":"edge"}
$ curl -s localhost:3904/api/node-demo
{"runtime":"nodejs","hasFs":true}

⚠ The Edge Runtime is deprecated. You can use the "nodejs" runtime instead. Learn more: https://nextjs.org/docs/messages/edge-runtime-deprecated
⚠ Using edge runtime on a page currently disables static generation for that page

Error: Route segment config "runtime" is not compatible with `nextConfig.cacheComponents`. Please remove it.
> 1 | export const runtime = "edge";

import "server-only";

// Stand-in for a model provider: yields tokens with a small delay.
export async function* streamReply(prompt: string): AsyncGenerator<string> {
  const words = `You asked: ${prompt}. Here is a streamed answer, one word at a time.`.split(" ");
  for (const word of words) {
    await new Promise((resolve) => setTimeout(resolve, 20));
    yield word + " ";
  }
}

import { z } from "zod";
import { streamReply } from "@/lib/mock-model";

const Body = z.object({
  messages: z
    .array(z.object({ role: z.enum(["user", "assistant"]), content: z.string().max(2000) }))
    .min(1)
    .max(20),
});

export async function POST(request: Request) {
  const parsed = Body.safeParse(await request.json().catch(() => null));
  if (!parsed.success) {
    return Response.json({ error: "Invalid request" }, { status: 400 });
  }
  const last = parsed.data.messages.at(-1)!;
  const encoder = new TextEncoder();

  const stream = new ReadableStream({
    async start(controller) {
      try {
        for await (const token of streamReply(last.content)) {
          if (request.signal.aborted) break;
          controller.enqueue(encoder.encode(token));
        }
        controller.close();
      } catch (error) {
        controller.error(error);
      }
    },
  });

  return new Response(stream, {
    headers: { "Content-Type": "text/plain; charset=utf-8", "Cache-Control": "no-store" },
  });
}

"use client";

import { useState } from "react";

type Message = { role: "user" | "assistant"; content: string };

export function Chat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
  const [pending, setPending] = useState(false);

  async function send(event: React.FormEvent) {
    event.preventDefault();
    const next: Message[] = [...messages, { role: "user", content: input }];
    setMessages([...next, { role: "assistant", content: "" }]);
    setInput("");
    setPending(true);

    const response = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ messages: next }),
    });
    if (!response.ok || !response.body) {
      setPending(false);
      return;
    }
    const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
    for (;;) {
      const { value, done } = await reader.read();
      if (done) break;
      setMessages((current) => {
        const copy = current.slice();
        const last = copy[copy.length - 1];
        copy[copy.length - 1] = { ...last, content: last.content + value };
        return copy;
      });
    }
    setPending(false);
  }

  return (
    <form onSubmit={send}>
      <ul aria-live="polite">
        {messages.map((m, i) => (
          <li key={i}>
            <strong>{m.role}:</strong> {m.content}
          </li>
        ))}
      </ul>
      <input value={input} onChange={(e) => setInput(e.target.value)} maxLength={2000} />
      <button disabled={pending || input.trim() === ""}>Send</button>
    </form>
  );
}

$ curl -sN -X POST -H 'Content-Type: application/json' \
    -d '{"messages":[{"role":"user","content":"Recommend a novel"}]}' localhost:3904/api/chat -w '\n[%{http_code}]\n'
You asked: Recommend a novel. Here is a streamed answer, one word at a time.
[200]
$ curl -s -X POST -H 'Content-Type: application/json' -d '{"messages":[]}' localhost:3904/api/chat -w ' [%{http_code}]\n'
{"error":"Invalid request"} [400]
$ curl -s -X POST -d 'x' localhost:3904/api/chat -w ' [%{http_code}]\n'
{"error":"Invalid request"} [400]

import "server-only";

export type Product = { id: string; name: string; unitAmount: number; currency: "eur" };

// The single source of truth for prices, in minor units (cents).
// In a real shop this is a database or a CMS query, never the client.
const products: Product[] = [
  { id: "dune", name: "Dune", unitAmount: 1299, currency: "eur" },
  { id: "solaris", name: "Solaris", unitAmount: 999, currency: "eur" },
];

export function listProducts(): Product[] {
  return products;
}

export function findProduct(id: string): Product | undefined {
  return products.find((p) => p.id === id);
}

import "server-only";
import Stripe from "stripe";

let client: Stripe | null = null;

// Created lazily so that `next build` does not need the key to be present.
export function getStripe(): Stripe {
  if (!client) {
    const key = process.env.STRIPE_SECRET_KEY;
    if (!key) throw new Error("STRIPE_SECRET_KEY is not set");
    client = new Stripe(key);
  }
  return client;
}

import "server-only";
import { randomUUID } from "node:crypto";

export type OrderLine = { productId: string; quantity: number; unitAmount: number };
export type Order = {
  id: string;
  lines: OrderLine[];
  total: number;
  currency: string;
  status: "pending" | "paid";
  sessionId?: string;
};

// Stand-in for a database. A module-level Map would be duplicated per bundle,
// so the scratch app keeps it on globalThis. Use a real database in production.
const store = ((globalThis as unknown as { __orders?: Map<string, Order> }).__orders ??= new Map());

export function createOrder(lines: OrderLine[], currency: string): Order {
  const total = lines.reduce((sum, l) => sum + l.unitAmount * l.quantity, 0);
  const order: Order = { id: randomUUID(), lines, total, currency, status: "pending" };
  store.set(order.id, order);
  return order;
}

export function getOrder(id: string): Order | undefined {
  return store.get(id);
}

export function attachSession(id: string, sessionId: string) {
  const order = store.get(id);
  if (order) order.sessionId = sessionId;
}

/** Returns true only the first time an order is marked paid (idempotent). */
export function markPaid(id: string): boolean {
  const order = store.get(id);
  if (!order || order.status === "paid") return false;
  order.status = "paid";
  return true;
}

"use server";

import { redirect } from "next/navigation";
import { z } from "zod";
import { findProduct, listProducts } from "@/lib/catalog";
import { createOrder, attachSession, type OrderLine } from "@/lib/orders";
import { getStripe } from "@/lib/stripe";

const Quantity = z.coerce.number().int().min(0).max(10);

export async function startCheckout(formData: FormData) {
  // 1. The browser only says WHICH products and HOW MANY. Prices are never read from it.
  const lines: OrderLine[] = [];
  for (const { id } of listProducts()) {
    const parsed = Quantity.safeParse(formData.get(`qty-${id}`) ?? 0);
    if (!parsed.success) redirect("/shop?error=invalid");
    if (parsed.data === 0) continue;
    const product = findProduct(id)!;
    lines.push({ productId: id, quantity: parsed.data, unitAmount: product.unitAmount });
  }
  if (lines.length === 0) redirect("/shop?error=empty");

  // 2. Price the order on the server and remember it.
  const order = createOrder(lines, "eur");

  // 3. Create the Checkout Session on the server, from our own numbers.
  const baseUrl = process.env.APP_URL;
  if (!baseUrl) throw new Error("APP_URL is not set");
  const session = await getStripe().checkout.sessions.create({
    mode: "payment",
    client_reference_id: order.id,
    line_items: lines.map((l) => ({
      quantity: l.quantity,
      price_data: {
        currency: order.currency,
        unit_amount: l.unitAmount,
        product_data: { name: findProduct(l.productId)!.name },
      },
    })),
    success_url: `${baseUrl}/shop/success?order=${order.id}`,
    cancel_url: `${baseUrl}/shop?cancelled=1`,
  });
  attachSession(order.id, session.id);

  // 4. Send the browser to Stripe-hosted Checkout.
  if (!session.url) throw new Error("Checkout Session has no URL");
  redirect(session.url);
}

import { Suspense } from "react";
import { listProducts } from "@/lib/catalog";
import { startCheckout } from "./actions";

const money = new Intl.NumberFormat("en", { style: "currency", currency: "EUR" });

async function ErrorNotice({ searchParams }: Pick<PageProps<"/shop">, "searchParams">) {
  const { error } = await searchParams;
  return error ? <p role="alert">Please choose between 1 and 10 copies.</p> : null;
}

export default function Shop({ searchParams }: PageProps<"/shop">) {
  return (
    <main>
      <h1>Shop</h1>
      <Suspense>
        <ErrorNotice searchParams={searchParams} />
      </Suspense>
      <form action={startCheckout}>
        {listProducts().map((p) => (
          <label key={p.id}>
            {p.name} ({money.format(p.unitAmount / 100)})
            <input type="number" name={`qty-${p.id}`} defaultValue={0} min={0} max={10} />
          </label>
        ))}
        <button type="submit">Pay with Stripe</button>
      </form>
    </main>
  );
}

import { Suspense } from "react";
import { getOrder } from "@/lib/orders";

async function OrderStatus({ searchParams }: Pick<PageProps<"/shop/success">, "searchParams">) {
  const { order: id } = await searchParams;
  const order = typeof id === "string" ? getOrder(id) : undefined;
  // The redirect proves nothing. Only the webhook marks an order as paid.
  return (
    <p>
      {order?.status === "paid"
        ? "Payment confirmed."
        : "We are waiting for the payment confirmation. This page does not mean the order is paid."}
    </p>
  );
}

export default function Success({ searchParams }: PageProps<"/shop/success">) {
  return (
    <main>
      <h1>Thank you</h1>
      <Suspense fallback={<p>Checking your order...</p>}>
        <OrderStatus searchParams={searchParams} />
      </Suspense>
    </main>
  );
}

import type Stripe from "stripe";
import { getOrder, markPaid } from "@/lib/orders";
import { getStripe } from "@/lib/stripe";

async function fulfil(sessionId: string) {
  const stripe = getStripe();
  const session = await stripe.checkout.sessions.retrieve(sessionId, {
    expand: ["line_items"],
  });
  if (session.payment_status === "unpaid") return; // wait for async_payment_succeeded

  const order = session.client_reference_id ? getOrder(session.client_reference_id) : undefined;
  if (!order) {
    console.warn("webhook: unknown order for session", sessionId);
    return;
  }
  if (session.amount_total !== order.total || session.currency !== order.currency) {
    console.error("webhook: amount mismatch for order", order.id);
    return;
  }
  if (markPaid(order.id)) {
    console.log("fulfilled order", order.id); // ship goods, send e-mail, update stock
  } else {
    console.log("already fulfilled", order.id);
  }
}

export async function POST(request: Request) {
  const signature = request.headers.get("stripe-signature");
  const secret = process.env.STRIPE_WEBHOOK_SECRET;
  if (!secret) return new Response("Webhook not configured", { status: 500 });
  if (!signature) return new Response("Missing signature", { status: 400 });

  // The signature covers the exact bytes Stripe sent: read the raw text, not request.json().
  const rawBody = await request.text();

  let event: Stripe.Event;
  try {
    event = getStripe().webhooks.constructEvent(rawBody, signature, secret);
  } catch {
    return new Response("Invalid signature", { status: 400 });
  }

  switch (event.type) {
    case "checkout.session.completed":
    case "checkout.session.async_payment_succeeded":
      await fulfil(event.data.object.id);
      break;
    default:
      break; // acknowledge events we do not use
  }
  return Response.json({ received: true });
}

# 1. The form is a plain POST. Extract the hidden action field, then post quantities
#    AND forged price fields:
$ curl -s -D- -o /dev/null -X POST localhost:3904/shop -F "$ACTION_FIELD=" \
    -F qty-dune=2 -F qty-solaris=1 -F price-dune=1 -F unit_amount=1
HTTP/1.1 303 See Other
Location: https://checkout.example.test/pay/cs_fake_1

# 2. What the server sent to Stripe (the fake recorded it): the catalogue prices, not 1
line_items[0][price_data][unit_amount]=1299   line_items[1][price_data][unit_amount]=999

# 3. Invalid quantities and an empty cart are rejected before any Stripe call
$ curl -s -D- -o /dev/null -X POST localhost:3904/shop -F "$ACTION_FIELD=" -F qty-dune=-3 | grep -i ^location
Location: /shop?error=invalid
$ curl -s -D- -o /dev/null -X POST localhost:3904/shop -F "$ACTION_FIELD=" | grep -i ^location
Location: /shop?error=empty

# 4. The success page before any webhook: not paid
$ curl -s "localhost:3904/shop/success?order=$ORDER_ID" | grep -o '<p>[^<]*</p>'
<p>We are waiting for the payment confirmation. This page does not mean the order is paid.</p>

# 5. Webhook cases (each signed with generateTestHeaderString)
no signature header            -> 400 Missing signature
valid signature                -> 200 {"received":true}     (server log: "fulfilled order <id>")
the same event again           -> 200 {"received":true}     (server log: "already fulfilled <id>")
signed with another secret     -> 400 Invalid signature
body edited after signing      -> 400 Invalid signature
server started without secret  -> 500 Webhook not configured

# 6. The success page after the valid webhook
<p>Payment confirmed.</p>