Next.js recipe
Implement ATM checkout and event verification with Next.js route handlers.
Compatible with the closed-beta ATM app APIs and versioned ATM event headers. Check atm-api-version on every webhook or XRPC receiver event.
Install SDK
Use route handlers for checkout creation, webhook verification, and optional XRPC receiver events. Keep ATM SDK calls in server files, never client components.
npm install @atmosphere-money/app-node@betaCreate checkout route
Create an app order first, check the recipient's payout status, confirm creator app approval, then ask ATM to create the hosted checkout. The route returns only the checkout URL and token to the browser.
// src/app/api/checkout/route.ts
import { NextResponse } from "next/server";
import { atm } from "@/lib/atm";
export async function POST(request: Request) {
const { recipientDid, amountCents } = await request.json();
const payout = await atm.getPayoutStatus(recipientDid);
if (!payout.payable) {
return NextResponse.json({ error: "RecipientNotPayable" }, { status: 409 });
}
const approval = await atm.requestRecipientApproval({
recipientDid,
environment: "test",
paymentTypes: ["shop"],
feeShareBps: 300,
requestReason: "Enable Next.js checkout"
});
if (approval.status !== "approved") {
return NextResponse.json(
{ error: "RecipientAppApprovalRequired", approvalUrl: approval.dashboardUrl },
{ status: 409 }
);
}
const order = await createAppOrder({ recipientDid, amountCents });
const checkout = await atm.initiatePayment({
environment: "test",
recipient: order.recipientDid,
amount: order.amountCents,
currency: "usd",
paymentType: "shop",
returnUrl: `https://app.example/orders/${order.id}/return`,
cancelUrl: `https://app.example/orders/${order.id}`,
metadata: { appOrderId: order.id }
});
return NextResponse.json({ url: checkout.url, token: checkout.token });
}Verify webhook or XRPC receiver
Fulfillment should come from verified ATM events. Signed HTTP webhooks are the default; XRPC receiver callbacks are optional for apps that already host an AT Protocol service surface.
// src/app/api/webhooks/atm/route.ts
import { constructTypedAtmWebhookEvent } from "@atmosphere-money/app-node";
import { NextResponse } from "next/server";
export async function POST(request: Request) {
const rawBody = await request.text();
const event = constructTypedAtmWebhookEvent({
rawBody,
secret: process.env.ATM_WEBHOOK_SECRET!,
expectedType: "payment.completed",
headers: {
signature: request.headers.get("atm-signature"),
deliveryId: request.headers.get("atm-delivery-id"),
event: request.headers.get("atm-event"),
apiVersion: request.headers.get("atm-api-version"),
environment: request.headers.get("atm-environment")
}
});
if (!(await insertDeliveryIdOnce(event.id))) {
return NextResponse.json({ ok: true, duplicate: true });
}
const metadata = event.data.payment.metadata as
| { appOrderId?: string }
| undefined;
const appOrderId = String(metadata?.appOrderId ?? "");
if (!appOrderId) {
return NextResponse.json({ error: "MissingAppOrderId" }, { status: 422 });
}
await fulfillOrder(appOrderId, event.data.payment.id);
return NextResponse.json({ ok: true });
}Fulfill payment or ticket
The fulfillment step is the same in Next.js: deduplicate the ATM delivery id, map the ATM payment or ticket event back to your app order, write the app-side fulfillment state once, and store the ATM id for support and reconciliation.
- 01
Deduplicate
Insert the ATM delivery id with a unique constraint before side effects.
- 02
Match order
Read appOrderId, ticket hold id, listing ref, or another private app correlation id from event metadata.
- 03
Fulfill
Grant access, issue app content, reveal tickets, update a subscription, or notify the buyer.
- 04
Reconcile
Store the ATM payment id and event id beside the app order for refunds, disputes, and redrive.
Run local test fixture
Use the runnable starter when one exists, or generate a signed webhook fixture with @atmosphere-money/testing. Your test should prove raw-body verification, duplicate delivery handling, and the app fulfillment mutation.
cd examples/atm-next-starter
npm install
npm run typecheckRuntime notes
| Starter | examples/atm-next-starter is the full-stack starter checked in CI. |
|---|---|
| Raw body | Read request.text() before any JSON parsing in webhook routes. |
| XRPC receiver | Use /docs/developer/examples/next-xrpc-receiver-route.ts when you opt into receiver callbacks. |