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 and the canonical XRPC receiver, or explicitly select webhook compatibility. 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. Persist ATM's app status token beside the order before returning only the checkout URL to the browser. The URL contains a separate browser bearer.
// 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 }
});
await saveAtmStatusToken(order.id, checkout.token);
return NextResponse.json({ url: checkout.url });
}Add event receiver
New AT Protocol-native apps use the canonical#AtmEventReceiver / money.atmosphere.event.receiveEvent wake-up transport. A conventional web app can explicitly select the signed HTTP webhook compatibility path shown by this framework recipe. Verify the configured receiver before using it to wake an immediate canonical status/query read.
// src/app/api/webhooks/atm/route.ts
import { createNextWebhookRoute } from "@atmosphere-money/app-node";
export const POST = createNextWebhookRoute({
secret: process.env.ATM_WEBHOOK_SECRET!,
expectedType: "payment.completed",
deliveryStore: {
claim: claimWebhookDelivery,
complete: completeWebhookDelivery,
release: releaseWebhookDelivery
},
onEvent: async (event) => {
const metadata = event.data.payment.metadata as
| { appOrderId?: string }
| undefined;
const appOrderId = String(metadata?.appOrderId ?? "");
if (!appOrderId) {
return { status: 422, body: { error: "MissingAppOrderId" } };
}
await fulfillOrder(appOrderId, event.data.payment.id);
return { body: { ok: true } };
}
});Fulfill payment or ticket
The fulfillment step is the same in Next.js: poll with the stored status handle, map the completed ATM payment back to your app order, and write the app-side fulfillment state once. Deduplicate each receiver delivery id before waking the same poller.
- 01
Deduplicate
Apply the same completed status once; optionally claim a push delivery id before waking reconciliation.
- 02
Match order
Load the app order that stores the initiation status token and private correlation data.
- 03
Fulfill
Grant access, issue app content, reveal tickets, update a subscription, or notify the buyer.
- 04
Reconcile
Store canonical ATM state and any optional event id beside the app order for refunds and disputes.
Run local test fixture
Use the runnable starter when one exists. Your core test should prove status-token persistence, authenticated polling, duplicate terminal handling, and the app fulfillment mutation. If you enable push, also generate a signed fixture with@atmosphere-money/testing and prove raw-body verification plus duplicate delivery handling.
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. |