> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unseen.finance/llms.txt
> Use this file to discover all available pages before exploring further.

# Guide — Next.js checkout

> App Router Route Handler returning a payment session for UnseenPayButton.createPaymentSession.

Combine everything so far: **`@unseen_fi/sdk`** in a Route Handler and **`@unseen_fi/ui`** in a client component mirrors the [Quickstart](/quickstart) wiring with a framework-native file layout.

## Route Handler

```ts next/route-handler.ts theme={null}
import { NextResponse } from "next/server";
import { UnseenClient } from "@unseen_fi/sdk";

const unseen = new UnseenClient({
  apiKey: process.env.UNSEEN_API_KEY!,
  network: "mainnet",
});

export async function POST(request: Request) {
  const body = await request.json();
  const payment = await unseen.payments.create({
    amount: body.amount,
    reference: body.reference,
    description: body.description,
    mint: body.mint,
    expiresIn: body.expiresIn,
  });
  return NextResponse.json(payment);
}
```

## Client component

```tsx theme={null}
"use client";

import {
  UnseenProvider,
  UnseenPayButton,
} from "@unseen_fi/ui";

export default function Checkout() {
  return (
    <UnseenProvider>
      <UnseenPayButton
        amount={25_000_000}
        reference="nextjs_demo"
        description="Starter pack"
        createPaymentSession={(input) =>
          fetch("/api/unseen/session", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(input),
          }).then(async (res) => {
            if (!res.ok) throw new Error("Session error");
            return res.json();
          })
        }
      />
    </UnseenProvider>
  );
}
```

Set `process.env.UNSEEN_API_KEY` in your deployment target (never in `NEXT_PUBLIC_` vars).

**Next:** [Express webhooks](/guides/webhooks-express)