Guide — Next.js checkout - Unseen Pay Docs

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

Route Handler

next/route-handler.ts

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

"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