This is the full file; follow it from Step 0.

OpenReceive agent directions (Next.js)

# READ THIS FIRST: this file is 38 KB and a summary drops required steps. Download it whole:
curl -fsSL https://openreceive.org/agent-directions/next/full.md
# Skip the download only if you already have all of it: pasted, read from disk or fetched raw.

Step 0 in brief (Step 0 below has the details):

These directions describe OpenReceive 0.4.19.

Add OpenReceive to a Next.js App Router application — the app you are already working in. You do not need a copy of the OpenReceive source: the packages are on npm, and the quickstart is appended to this file in full, so you can do the whole integration without fetching anything. Prefer the published packages and the route handlers they export — do not reimplement wallet RPC, settlement, or pricing.

Do not clone the OpenReceive repository into this app, and do not copy a demo’s models (ShopOrder, a signed-cookie visitor, an in-memory catalog) over tables that already exist. Find this application’s order, product, and user models — whatever they are actually named — and map the three hooks onto those.

Keep this application’s frontend framework, authentication and database. Pick the UI package that matches the frontend that is already here (@openreceive/react, /vue, /svelte, /angular, or /elements for plain HTML) — do not add React to a Vue app. Reuse the app’s existing session/auth in authorize and its existing database handle in storage.db.

What OpenReceive is

A payment library that runs inside YOUR server. It mounts as ONE catch-all route handler (app/openreceive/[...openreceive]/route.ts, on the Node runtime, force-dynamic) in the application you are editing, issues Lightning invoices against a wallet the merchant already controls, and calls back into your code when one settles. There is no OpenReceive account and no API key, and OpenReceive never holds the funds — the sats land in the wallet the merchant connected.

The one required credential is a receive-only NWC code (Nostr Wallet Connect): a string from the merchant’s wallet that can create invoices and read their status, and cannot spend. A swap provider (an “LSC” code) optionally lets the payer send USDT, USDC, ETH or SOL instead, converted into that same Lightning payment. Step 0 collects those credentials from the user; you write three hooks — authorize, amountFor, onPaid; OpenReceive supplies invoices, polling, settlement and the checkout UI. It never owns orders, users, prices, or fulfillment.

Step 0 — ask for the two codes, one question at a time

Before anything else, look at one file: the project’s .env.local, if it exists. Read it only far enough to see whether NWC_URI and LSC_URI_PRIMARY are there and non-empty, and never print the values. A code that is already set is not asked for again; if both are set, skip to step 5 (making the server load the file), then the quickstart.

On a hosted builder (v0, Vercel, Replit, Lovable), the user may say instead that both codes are already set as the project’s environment variables or secrets. Believe them: do not ask for the codes, do not write .env.local, and do not read or print the variables. Next reads them from the environment.

Otherwise your next action is a question to the user. Do not install packages, edit the app, write .env.example, or search anywhere else before asking it. Do not read deploy config (compose files, Vercel or platform secrets), Docker containers, or process environments, and never run printenv. A new shop has neither code yet: hunting for one burns the turn and can leak other secrets into the transcript.

Two server-only URIs are needed before the quickstart:

The user never edits an environment file. They paste each code into the chat; you store it. Ask one question per message.

  1. First message — the NWC code, and nothing else. Ask for it and walk them through getting it:

    To receive payments I need a receive-only wallet code. In Rizful: open the menu, tap NWC, choose Receive-only NWC code, and tap Copy (https://openreceive.org/get_a_nwc_code_to_receive_payments). If you would rather run your own wallet, Alby Hub works too: Connections → Add Connection → Read Only. Paste the code here and I will store it.

    Do not mention .env, exports, or “tell me when it’s set”.

  2. When they paste it. If it does not start with nostr+walletconnect://, ask them to copy the receive-only code again. Otherwise write NWC_URI=<paste> into the project’s .env.local, creating the file if needed. Make sure .gitignore covers .env.local (and .dockerignore, if the app has one). Never echo the value, commit it, or put it in client code. Reply only that it is saved, then ask the next question.

  3. Second message — swaps. If the user already asked for stablecoins or altcoins, skip the yes/no and go straight to the walkthrough. Otherwise ask whether payers should also be able to pay with USDT, USDC, ETH or SOL. The walkthrough:

    Go to https://lightning-swap.com, sign in for API keys, create a key, and copy the whole URI (https://openreceive.org/set_up_swap_provider). Paste it here and I will store it — or say “Bitcoin only” and I will continue without it.

    Mention FixedFloat only if they already use it.

  4. When they paste it. If it does not start with lightning+swapconnect://, ask them to copy it again. Otherwise add LSC_URI_PRIMARY=<paste> to the same .env.local, without echoing it. Swaps are now on, so build the refund route back (the swap non-negotiable below) as part of this integration. If they chose Bitcoin only, leave LSC_URI_PRIMARY unset and skip that route.
  5. Make the server load the file — yourself. Next loads .env.local into process.env on its own: do not add dotenv, and never give a credential a NEXT_PUBLIC_ prefix, which inlines it into the browser bundle. When the app is started with Docker Compose, give the service env_file: .env.local. Restart the dev server after writing the file.

Do not invent placeholder URIs. Start the quickstart only once NWC_URI is saved and LSC_URI_PRIMARY is saved or explicitly declined. The first boot runs the receive-only preflight: if it reports spend methods such as pay_invoice, remove NWC_URI from .env.local and ask for a receive-only code again. Never set the spend-capable override to get past it.

Upgrading an existing install

This is not the opening move of a new integration. When OpenReceive is ALREADY installed here, npx openreceive doctor reports every credential as set/unset (never the value) and probes the wallet. Check the installed @openreceive/node and @openreceive/browser against the release named at the top of this file: the headless display models below do not exist in older versions, and the first tile click throws with nothing saying why. Upgrade first.

Only then start the quickstart.

After the quickstart — hand over, then stop

The quickstart is done when npx openreceive doctor --db <file-or-url> --url <app url> is clean and this app serves the checkout page for one of its orders. Doctor names any failed check and exits nonzero; fix it before going on.

Give the user that checkout link. The browser check in the quickstart’s step 6 (payment-method icons, wallet logos, a pay tutorial) is theirs: tell them what to look at, and do not run it yourself.

You cannot pay the invoice: the code is receive-only. Do not pay, settle or mark an order paid, and do not look for a way to (a wallet control port, a test endpoint, another wallet). If the user wants a real settlement test, they pay on that link from their own wallet, and onPaid marks the order paid.

Setup ends here. Say “Setup is finished” in one message, with the link and what to check. Do not offer more work or end the message on a question.

Non-negotiables

The quickstart below has the code. These are the rules it cannot state for itself, and they hold for every integration.

Your tables, not ours

npx openreceive scaffold payments emits openreceive_payments and openreceive_meta for THIS application’s database. That is the whole persistence OpenReceive needs. It does not replace your orders, users, or products, and you do not join them.

If you build your own checkout UI

The drop-ins (<Checkout>, <openreceive-checkout>) already obey all of this. This list is the short form of https://openreceive.org/guides/checkout-ux.md, for a UI built on @openreceive/browser/headless. Read that before writing components.

More documentation

Fetch one when the moment comes. Each is raw markdown, so a plain GET is enough; drop the .md for the same page a person would read.

Questions, or a problem with the library itself: https://openreceive.org/contact

The quickstart, in full

Inlined verbatim so this file needs no network access — follow it once Step 0 passes. The page it comes from is https://openreceive.org/guides/quickstart-next.

Next.js quickstart

Next.js App Router + React. Requires Node ≥ 22 and Next ≥ 15 (App Router).

1. Install

npm install @openreceive/next @openreceive/react

Install the adapter for your server and the UI package for your frontend. The wallet client, HTTP handler, and contracts come along as dependencies. The openreceive package is only the CLI, and npx openreceive … below needs no install. On a different stack, swap the two packages; the rest of this guide stays the same.

  Packages
Server @openreceive/next, @openreceive/express, @openreceive/fastify
Frontend @openreceive/react, @openreceive/vue, @openreceive/svelte, @openreceive/angular, @openreceive/elements (plain HTML)

Express: quickstart-node.md · Fastify: quickstart-fastify.md. This page is the Next.js one. An agent given the Express guide goes wrong on Next.js in three places: Next needs no dotenv, no app.use, and it needs a client component for the checkout.

On a fresh project, create-next-app scaffolds the App Router for you. You need no env loader, because Next loads .env.local itself. Install your ORM before step 2 (npm install prisma @prisma/client on the Prisma path). openreceive scaffold emits files for the ORM you name, but it never installs that ORM.

Some editor sandboxes run npm with ignore-scripts. That setting skips Prisma’s engine download and esbuild’s binary postinstall. If a typecheck or build fails only in such an environment, the environment is the cause, not your code.

2. Migrate the payment tables

npx openreceive scaffold payments --orm prisma   # or drizzle | typeorm | sequelize | knex

openreceive scaffold payments writes one schema or migration file for your ORM, plus a wiring guide. It never touches a database. → openreceive scaffold payments

Then run the generated migration the way you normally do (for example npx prisma migrate dev). OpenReceive runs the tables’ logic at runtime, so there is nothing else to generate. Details: Payment storage, Node ORM recipes.

No ORM? You can pass a bare driver handle (pg, node:sqlite, better-sqlite3) as the db in step 4. The scaffold has no flavor for it. Instead of scaffolding, run the same DDL once yourself, using paymentsSchemaSql(dialect) from @openreceive/http. Your adapter already pulls that package in, but this import is yours, so install it too: npm install @openreceive/http.

3. Add wallet credentials

Create a server-only .env.local. Next loads it into process.env on its own, so do not add dotenv. Never prefix these variables with NEXT_PUBLIC_, because that would inline them into the browser bundle.

NWC_URI=
LSC_URI_PRIMARY=
LSC_URI_BACKUP=
  1. Get a receive-only NWC code from a compatible wallet (get one here). Put it in NWC_URI.
  2. Optional: set up a swap provider. Put its connection string in LSC_URI_PRIMARY, and a second one in LSC_URI_BACKUP if you have one.

Never put these values in browser code. Your app refuses to start if the NWC code also advertises spend methods such as pay_invoice. Create a receive-only code instead (Security).

In production, supply the same variables through your host’s secret manager or process environment. .env.local is for development, and create-next-app gitignores it. → Environment variables.

4. Wire OpenReceive

One catch-all route file takes your hooks and a database handle. The adapter builds the wallet client and the host, and returns the GET/POST exports the App Router expects. There is no background reconciler, meaning no job that checks pending payments on a timer. Settlement runs during normal requests instead, through the durable reconcile gate. That is what makes it safe on serverless hosts.

// app/openreceive/[...openreceive]/route.ts
import { openReceiveNextHandlers } from "@openreceive/next";
import { db, orders, sessions } from "@/lib/app"; // your existing database handle and models

// The wallet relay and your database driver need Node, never the Edge runtime,
// and a payment route must never be cached or statically rendered.
export const runtime = "nodejs";
export const dynamic = "force-dynamic";

export const { GET, POST } = openReceiveNextHandlers({
  wallet: { nwc: process.env.NWC_URI! }, // receive-only NWC code; your app refuses to start otherwise
  storage: {
    db, // pg Pool/Client, node:sqlite, better-sqlite3, or a custom adapter
    onPaid: async ({ reference, paidAt, query }) => {
      // Settlement transaction; runs only for the first settled attempt for a
      // reference. The WHERE clause is the lock: a second fulfillment path of
      // yours (admin action, replayed job) updates zero rows and does nothing.
      // Use `query` here, not your ORM's other connection. `?` on sqlite, `$1`
      // on postgres.
      const claimed = await query(
        "UPDATE orders SET state = 'paid', paid_at = ? WHERE id = ? AND state = 'awaiting_payment' RETURNING id",
        [paidAt, reference],
      );
      if (claimed.length === 0) return;
    },
  },
  // The price for a reference — here, your order id — from your own data;
  // OpenReceive converts it into the Lightning invoice. Return null when
  // there is nothing to pay for. `value` is a decimal STRING from the order
  // row, never a float and never a request param. `description` is what the
  // payer is buying, in your own words.
  amountFor: async (reference) => {
    const order = await orders.find(reference);
    return order
      ? {
          currency: "USD",
          value: order.total.toString(),
          description: `${order.lines.length} items`,
        }
      : null;
  },
  // Your own access check: may this caller do this action to this reference?
  // `resource.reference` is your own order id, sent back by the payer's
  // browser — a claim, not proof — already validated as a non-empty string.
  // `request` is the Web Request; read cookies or headers from it the way you
  // would in any route handler (`native` is the same NextRequest).
  authorize: async ({ action, request, resource }) =>
    orders.viewerMay(
      await sessions.currentUser(request),
      resource.reference,
      action,
    ),
  // Recommended for public web shops: caps invoice creation at 60 per client IP
  // per hour. A web Request has no socket IP, so on Next this ALSO needs an
  // IP source: `trustProxyIpHeader: true` reads the first hop of
  // x-forwarded-for, which is safe only when YOUR reverse proxy or hosting
  // platform sets it (Vercel, Cloudflare and most load balancers do). Without
  // an IP source the adapter refuses to construct rather than run an
  // inactive limiter. Leave both off for point-of-sale deployments, where
  // many payers share the terminal's IP.
  rateLimiting: true,
  trustProxyIpHeader: true,
});

The route file is a server module. It imports your database handle and reads process.env, so no client component may import anything from it. The default prefix is /openreceive, which is the directory the file sits in. If you put the catch-all under another directory, pass a matching prefix.

Sometimes the options are themselves async, such as a database opened lazily or a wallet client shared with a worker. Then build the handlers per request instead of at module load. The Buy a Button example does exactly this:

async function handle(request: Request): Promise<Response> {
  const { GET, POST } = openReceiveNextHandlers(await httpOptions());
  return request.method === "GET" ? GET(request) : POST(request);
}
export { handle as GET, handle as POST };

The first request checks the wallet. Later OpenReceive requests also settle pending invoices, so a payer who closes the tab is still covered. authorize runs on every request. → openReceiveNextHandlers · authorize context

rateLimiting: true is for public web shops. Leave it off for point-of-sale, where many payers share one IP. → Rate limiting

An optional worker, startNotificationWorker({ service, host }), listens for wallet payment notifications so settlement does not wait for the next page load. It is a separate long-lived Node process, not a route. On a serverless host, skip it and rely on the request-path settlement described above. → startNotificationWorker

You can also compose the pieces yourself (createOpenReceive + createHost) when you need a shared wallet client or a custom repository. → createOpenReceive · createHost

Your app also needs an ordinary route that creates the order. It validates the cart, computes the price with exact decimal math, and returns the order id. The page passes that id as the reference. OpenReceive never takes a price from payer input.

The reference is a string you choose, and it identifies what gets fulfilled. Use your order id. Make it:

OpenReceive never looks inside the reference, but it relies on it:

Naming boundary: TypeScript APIs use camelCase fields (paymentHash, amountMsats). Everything on the wire is snake_case (payment_hash, amount_msats). The wire means the mounted HTTP routes and the browser snapshots.

5. Render checkout

<Checkout> polls and holds state, so it is a client component. Put it in a file that starts with "use client", and import the stylesheet from that same module. The page that renders it can stay a server component.

// app/checkout/[reference]/order-checkout.tsx
"use client";

import { Checkout } from "@openreceive/react";
import "@openreceive/react/styles.css";

export function OrderCheckout({ reference }: { reference: string }) {
  return <Checkout reference={reference} prefix="/openreceive" />;
}

// app/checkout/[reference]/page.tsx — the order's own, resumable URL
import { OrderCheckout } from "./order-checkout";

export default async function CheckoutPage({
  params,
}: {
  params: Promise<{ reference: string }>;
}) {
  const { reference } = await params;
  return <OrderCheckout reference={reference} />;
}

/checkout/[reference] is deliberately a page of its own rather than a modal on the cart. A payer with a swap deposit in flight has no account and no email from you. This URL is the only thing that brings them back to their payment, so it has to survive a reload and a bookmark (Swap refunds).

Do not render the checkout for a reference the current session may not see. The page can read the session and return 404 before it renders, and authorize refuses the routes regardless.

The checkout renders, polls, and settles itself. The compiled styles.css sheets (@openreceive/react, @openreceive/elements) are self-contained and scoped: every rule applies only inside what OpenReceive renders. You need no transpilePackages entry, because the packages ship plain ESM.

Serve the compiled styles.css without Tailwind processing: import it from JavaScript (with a CSS-capable bundler) or use a plain <link rel="stylesheet">. Do not @import it into the host Tailwind entry. Its zero-specificity rules allow host styles to override checkout styles; scoping does not prevent that.

<Checkout> is complete as rendered. It already shows the description from amountFor and the collapsed transaction-details panel. Do not build a custom UI to show them. The display rules for them become your job only if you replace the drop-in component (Checkout UX).

Match the host page’s theme. By default the checkout follows the payer’s stored choice, then the system color scheme. If this page always uses one theme, lock it with <Checkout theme="dark" … />. On the custom element, set the theme attribute. Locking the theme keeps a white card off a dark page. CSS variables under data-theme style the checkout. Frontend checkout lists the settings you can change.

Everything the checkout draws ships inside the JavaScript: the payment-method icons, the wallet logos, and the pay tutorials. There is no image file to copy or serve, and no asset option to set. Deploy your normal JavaScript and CSS build output, including any generated JavaScript chunks. Bundlers with code splitting can wait to load tutorial screenshots until a tutorial first opens. Single-file builds, including the standalone checkout, include them from the start. If your Content-Security-Policy has a strict img-src, allow data: (Provider registry).

That is the whole loop. Your server owns the price and the order. The payer gets an invoice. onPaid runs inside the settlement transaction. If that transaction rolls back, the callback may run again. For delivery to outside systems, use an outbox in your app: record the message in the transaction and send it after commit.

Buy a Button is a runnable illustration of this boundary (examples/buttons/server/nextjs-fullstack). It is not a template to copy models from. It has products, visitors, and orders, and the three hooks are the only bridge to OpenReceive. Its shop routes are three-line App Router wrappers, and /checkout/[reference] is the resumable page. Map that shape onto the models in THIS app.

6. Verify

npx openreceive doctor

openreceive doctor checks Node, NWC_URI, and the swap-provider configuration. It also probes the wallet relay to confirm the code is receive-only. Add --db <file-or-url> to confirm the migration ran. Add --url http://localhost:3000 to confirm the routes are mounted. Every failing line states its own fix. → openreceive doctor

Then open the checkout in a browser. Confirm the payment-method icons and wallet logos render. Open a wallet’s pay tutorial to check its screenshots. If an image is missing, look in the console for CSP violations and in the Network panel for failed JavaScript chunks. To fix it, allow data: in img-src and deploy the complete build output. Do not add image routes or copy package source images. Do not use registry icon_path or tutorial path keys as browser URLs.