openreceive-server 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,480 @@
1
+ # OpenReceive agent directions (Node.js)
2
+
3
+ These directions describe OpenReceive 0.3.3.
4
+
5
+ Add OpenReceive to a Node application — the app you are already working in. You
6
+ do not need a copy of the OpenReceive source: the packages are on npm, and the
7
+ quickstart is appended to this file in full, so you can do the whole integration
8
+ without fetching anything. Prefer the published packages and the routes they
9
+ mount — do not reimplement wallet RPC, settlement, or pricing.
10
+
11
+ Do not clone the OpenReceive repository into this app, and do not copy a demo's
12
+ models (`ShopOrder`, a signed-cookie visitor, an in-memory catalog) over tables
13
+ that already exist. Find this application's order, product, and user models —
14
+ whatever they are actually named — and map the three hooks onto those.
15
+
16
+ ## What OpenReceive is
17
+
18
+ A payment library that runs inside YOUR server. It mounts HTTP routes in the
19
+ application you are editing, issues Lightning invoices against a wallet the
20
+ merchant already controls, and calls back into your code when one settles. There
21
+ is no OpenReceive account and no API key, and OpenReceive never holds the funds —
22
+ the sats land in the wallet the merchant connected.
23
+
24
+ The one required credential is a receive-only NWC code (Nostr Wallet Connect):
25
+ a string from the merchant's wallet that can create invoices and read their
26
+ status, and cannot spend. A swap provider (an "LSC" code) optionally lets the
27
+ payer send USDT, USDC, ETH or SOL instead, converted into that same
28
+ Lightning payment. You supply those credentials and three hooks — `authorize`, `amountFor`,
29
+ `onPaid`;
30
+ OpenReceive supplies invoices, polling, settlement and the checkout UI. It never
31
+ owns orders, users, prices, or fulfillment.
32
+
33
+ ## Step 0 — check the environment before you write code
34
+
35
+ Do this before installing packages or editing files.
36
+
37
+ 1. Look for `NWC_URI` in this app's server environment — `.env`, the process
38
+ env, the deploy config, whatever this app already uses. If the app runs in a
39
+ container the value is in none of those: ask the running process
40
+ (`docker exec <container> printenv NWC_URI`), because finding the NAME in a
41
+ compose file proves nothing about the value. Never print or echo the value
42
+ itself; only report whether it is set. Check for `LSC_URI_PRIMARY` in the
43
+ same pass.
44
+ 2. If BOTH are already set — the common case in an existing app — say so and go
45
+ straight to the quickstart. Steps 3 and 4 are for an environment that is
46
+ missing one; do not stop to ask about altcoins that are already configured.
47
+ If only `NWC_URI` is set, Bitcoin already works: continue, and raise the
48
+ altcoin question at step 4 rather than blocking on it.
49
+ 3. If `NWC_URI` is missing or empty, stop and tell the user exactly what to
50
+ create:
51
+
52
+ > OpenReceive cannot issue an invoice without a receive-only NWC code. Get
53
+ > one at https://openreceive.org/get_a_nwc_code_to_receive_payments, then
54
+ > put `NWC_URI=<the code>` in this app's server environment — for most apps
55
+ > that is a `.env` file in the project root — and tell me when it's set.
56
+
57
+ Wait for the user before wiring OpenReceive; do not invent a placeholder
58
+ value. Waiting is not idleness: you may write `.env.example` with the
59
+ variable NAMES only (`NWC_URI=`, `LSC_URI_PRIMARY=`) so the merchant has a
60
+ file to copy, and keep building the parts of the host that do not touch
61
+ OpenReceive — the order model, the cart, the routes. The stop guards the
62
+ credential, not the rest of the app.
63
+ 4. If `LSC_URI_PRIMARY` was not already set, ask the user: "Do you want to
64
+ accept altcoins and stablecoins (USDT, USDC, ETH, SOL) as well as
65
+ Bitcoin?"
66
+
67
+ - Yes → send them to https://openreceive.org/set_up_swap_provider for a
68
+ swap-provider (LSC) code, to set as `LSC_URI_PRIMARY` in the same server
69
+ environment. Do NOT wait for it: no application code reads the value, so
70
+ the integration is identical with or without it — the library picks it up
71
+ from the environment and swaps switch on. What a yes DOES change is the
72
+ refund route back (the swap non-negotiable below): build it as part of
73
+ this integration, not when the code arrives.
74
+ - No → skip it. Bitcoin over Lightning works with `NWC_URI` alone, and you
75
+ can add a swap provider later without changing application code.
76
+ 5. Check the environment again and confirm `NWC_URI` is present.
77
+ `LSC_URI_PRIMARY` may land later; swaps stay off until it does, and no code
78
+ changes when it arrives.
79
+ 6. If OpenReceive is ALREADY installed here, check the installed versions of
80
+ `@openreceive/node` and `@openreceive/browser` against the release named at
81
+ the top of this file. The headless display models below do not exist in
82
+ older versions, and the first tile click throws with nothing saying why.
83
+ Upgrade first.
84
+
85
+ Only then start the quickstart.
86
+
87
+ ## Non-negotiables
88
+
89
+ The quickstart below has the code. These are the rules it cannot state for
90
+ itself, and they hold for every integration.
91
+
92
+ - OpenReceive never owns orders, users, prices, or fulfillment. The section
93
+ below is how those tables sit next to the library — not a second order model,
94
+ and not a Prisma/Drizzle relation to `openreceive_payments`.
95
+ - Keep `NWC_URI` / `LSC_URI_*` server-only. Never put them in browser code,
96
+ logs, or assets.
97
+ - The host owns the price. `amountFor` reads it from your own data; reject
98
+ payer-supplied amounts.
99
+ - `authorize` runs on every request, and the `resource` it receives is a CLAIM
100
+ the payer made, not proof. Read a framework session; never trust a body field.
101
+ - `onPaid` must be idempotent. It runs once per `reference` — your order id, one
102
+ per thing you fulfill, created before checkout, kept across retries, never
103
+ reused. A fresh id per page load lets one order be paid twice.
104
+ - Receive-only NWC is required; a spend-capable code fails closed at boot unless
105
+ explicitly overridden.
106
+ - There is NO merchant-initiated refund of a settled Lightning payment, because
107
+ the wallet cannot spend. Swap refunds — a payer reclaiming a deposit that
108
+ never converted — are the only refund OpenReceive performs, and only from the
109
+ `refund_required` provider state. Do not build, promise, or imply a Lightning
110
+ refund path.
111
+ - IF YOU TURN SWAPS ON, BUILD THE ROUTE BACK. A deposit that arrives short or
112
+ late becomes `refund_required`, and the payer claims it on a SECOND VISIT,
113
+ after leaving your page to fetch an address from another wallet. Three things
114
+ must exist or that money is unreachable through your UI: a per-order URL your
115
+ server serves (`/checkout/:reference` — `syncUrl` on the drop-ins), your own
116
+ order-summary route to restore the order from, and the ATTEMPT.
117
+ `/checkouts/prepare` returns no attempts, so a checkout rebuilt from the
118
+ reference alone opens on the method grid. Re-picking the same coin
119
+ (`POST /swaps`) re-serves the committed attempt — but only while it is live,
120
+ and the shadow invoice behind a swap lasts about half an hour, after which the
121
+ same click mints a NEW deposit address and the refund is off-screen. Keep the
122
+ `payment_hash` and reopen the attempt with `POST /swaps/status`, which has no
123
+ such window. https://openreceive.org/guides/swap-refunds.md
124
+ - Show the payer WHAT THEY ARE BUYING. Return an optional `description` beside
125
+ the price from `amountFor` and both drop-ins render it above the amount.
126
+ Without it the checkout is a QR and "$1.00" with no sign of what the dollar
127
+ is for.
128
+ - Show the payer the transaction record: `createTransactionDetails(...)` rows,
129
+ collapsed behind a caret, on the live checkout AND on the receipt. A payment
130
+ hash and a deposit txid are the only evidence a payer has that they paid you.
131
+ `<Checkout>` / `<openreceive-checkout>` already render this panel and the
132
+ `description` — these two rules cost you code only on a custom UI or your own
133
+ receipt page, never a reason to replace the drop-in. (It returns no rows
134
+ while the rail is `checkout_lock` — before the payer has chosen anything
135
+ there is no transaction — so render the caret only when the rows are
136
+ non-empty.)
137
+ - HTTP JSON is snake_case; TypeScript APIs are camelCase.
138
+ - Money is integers or decimal strings — never binary floats.
139
+
140
+ ## Your tables, not ours
141
+
142
+ `npx openreceive scaffold payments` emits `openreceive_payments` and
143
+ `openreceive_meta` for THIS application's database. That is the whole
144
+ persistence OpenReceive needs. It does not replace your orders, users, or
145
+ products, and you do not join them.
146
+
147
+ - **Find this app's models first.** They may be named `Order`, `Invoice`,
148
+ `Booking`, `Product`, `Variant`, `User`, `Account` — anything. Wire the hooks
149
+ to those. Do not generate a parallel `ShopOrder` / `ShopProduct` / `ShopUser`
150
+ stack.
151
+ - **The payable row's id is the `reference`.** Create it before checkout, keep
152
+ it across retries, never reuse it. Pass that id to `<Checkout>` /
153
+ `<openreceive-checkout>`. A fresh id per page load lets one order be paid
154
+ twice.
155
+ - **Products (or the catalog) are the price authority.** Order creation reads
156
+ live prices into the order (snapshot line items if this app has them).
157
+ `amountFor` reads only that order — never a payer-supplied amount, never a
158
+ live catalog lookup that could re-price a cart already placed. Return
159
+ `{ currency, value }` as a decimal STRING, plus a `description` of what they
160
+ are buying.
161
+ - **Users own the order; OpenReceive never sees them.** `authorize` uses the
162
+ same ownership check this app already uses on the order show / pay page —
163
+ `sessions.currentUser(request)`, a cookie, whatever it is.
164
+ `resource.reference` is a claim the payer sent, not proof.
165
+ - **The order is unpaid or paid.** Do not copy `pending` / `expired` / `failed`
166
+ / `attention` onto it. Those are attempt statuses on `openreceive_payments`. An
167
+ expired invoice does not cancel the order; a later checkout may mint another
168
+ attempt. The library refuses a new checkout under a reference that already
169
+ settled (409).
170
+ - **Pass this app's `db` handle.** Do not add a Prisma/Drizzle relation from
171
+ Order to `openreceive_payments`, and do not implement `PaymentRepository`
172
+ unless no supported handle can reach this database. `reference` is not unique
173
+ (many attempts per order). Fulfillment is a guarded transition on YOUR order
174
+ row inside `onPaid` — `UPDATE … WHERE state = 'awaiting_payment'` (or this
175
+ app's equivalent) through the `query` the library hands you, on that same
176
+ settlement transaction, not a second connection from your ORM. Database writes
177
+ only in the hook; emails, jobs, and pushes after commit. Placeholder style is
178
+ the dialect you declared: `?` on sqlite, `$1` on postgres.
179
+
180
+ ## If you build your own checkout UI
181
+
182
+ The drop-ins (`<Checkout>`, `<openreceive-checkout>`) already obey all of this.
183
+ This list is the short form of https://openreceive.org/guides/checkout-ux.md, for a
184
+ UI built on `@openreceive/browser/headless`. Read that before writing
185
+ components.
186
+
187
+ - `createCheckoutController` is the engine. Do not hand-roll a poll loop.
188
+ - `createCheckoutStatusModel` for the status line. Do not draw a
189
+ Cart → Pay → Done stepper. Read the model's `phase`, not the snapshot's.
190
+ - `resolveWizardSelection` decides whether to ask "which network?". A
191
+ one-network asset starts the swap from the tile. Key `selectedAssetByGroup`
192
+ by group (`USDT`), valued by `pay_in_asset` (`USDT_TRON`).
193
+ - `createMethodGridDisplay` for tiles, including `limitMessage` so an
194
+ unavailable method says the minimum in the payer's currency.
195
+ - `createSwapDisplayModel` → `display.copyRows` for deposits: address, memo,
196
+ and the bare amount each get a copy row. Render `swap.networkWarning*` as
197
+ the model gives it.
198
+ - `createCheckoutSession` owns mint and swap start. To start swaps, pass its
199
+ `swap` option (`selection`, `prefix`, `fetch`) together. Without it
200
+ `startSwap` reports through `onError`.
201
+ - `createQrSvg` is async. Use `createQrSvgController` so you do not render
202
+ `[object Promise]`.
203
+ - `checkoutLabels` for every payer-facing string. Only write copy it lacks.
204
+ - `stageSwapRefund` then `confirmSwapRefund` — only the second submits.
205
+ Validate with `getSwapRefundFormError`. Treat `409` as a normal outcome.
206
+ - Pass `{ resumable: true }` to `createSwapDisplayModel` when the payer has
207
+ a URL they can come back to, and render `display.refundReturnLabel`.
208
+ Resume helpers (`createGuestCheckoutResume`, `createGuestOrderFetcher`)
209
+ are on `@openreceive/browser`, not `/headless`.
210
+ - A refund replaces the deposit panel. On `refund_required` also drop
211
+ "switch payment method".
212
+ - No "Open wallet" button on desktop.
213
+ - Wallet suggestions: `getPaymentWizardRoutes()` +
214
+ `createWizardRouteDisplays`. Lightning only. Host the icons with
215
+ `assetBaseUrl` / `asset-base-url`.
216
+
217
+ ## More documentation
218
+
219
+ Fetch one when the moment comes. Each is raw markdown, so a plain GET is
220
+ enough; drop the `.md` for the same page a person would read.
221
+
222
+ - https://openreceive.org/guides/authorization.md — before you write `authorize`
223
+ - https://openreceive.org/guides/environment-variables.md — every variable, and what is deliberately not one
224
+ - https://openreceive.org/guides/storage.md — the payment tables and the attempt state machine
225
+ - https://openreceive.org/guides/node-orms.md — recipes for Prisma, Drizzle, Knex, TypeORM, Sequelize
226
+ - https://openreceive.org/guides/frontend-checkout.md — the drop-in's props, attributes and slots
227
+ - https://openreceive.org/guides/checkout-ux.md — read before building any custom UI
228
+ - https://openreceive.org/guides/headless-checkout.md — the controller, the display models, refunds
229
+ - https://openreceive.org/guides/provider-registry.md — where the packaged icons and pay
230
+ tutorials come from, and how to serve them. The asset rule is the one a custom
231
+ UI is most likely to get wrong; this is the page that owns it, not the summary
232
+ in checkout-ux.md
233
+ - https://openreceive.org/guides/automated-swaps.md — only if `LSC_URI_PRIMARY` is set
234
+ - https://openreceive.org/guides/swap-refunds.md — the refund flow, and the route back to it. Read it before you turn swaps on
235
+ - https://openreceive.org/guides/lightning-swap-connect.md — what an `LSC_URI_*` code actually is
236
+ - https://openreceive.org/guides/price-feeds.md — where the fiat→sats rate comes from, and how to replace it
237
+ - https://openreceive.org/guides/host-testing.md — testing your three hooks without a live wallet or provider
238
+ - https://openreceive.org/guides/rate-limiting.md — before a public shop goes live
239
+ - https://openreceive.org/guides/security.md and https://openreceive.org/guides/deploying.md — before this goes anywhere real
240
+ - https://openreceive.org/guides/api-reference.md — every route, option and error code
241
+ - https://openreceive.org/guides/custom-checkout-route.md — advanced: replacing the shipped adapter's routes with your own
242
+ - https://openreceive.org/guides/react-material-ui-recipe.md — a worked custom UI on a component library
243
+ - https://openreceive.org/guides.md — the index, if what you need is not above
244
+
245
+ Questions, or a problem with the library itself:
246
+ https://openreceive.org/contact
247
+
248
+ ---
249
+
250
+ ## The quickstart, in full
251
+
252
+ Inlined verbatim so this file needs no network access — follow it once Step 0
253
+ passes. The page it comes from is https://openreceive.org/guides/quickstart-node.
254
+
255
+ ## Node quickstart
256
+
257
+ Express + React. Requires Node ≥ 22.
258
+
259
+ ### 1. Install
260
+
261
+ ```sh
262
+ npm install @openreceive/express @openreceive/react
263
+ ```
264
+
265
+ Install the adapter for your server and the UI package for your frontend; the
266
+ wallet client, HTTP handler, and contracts come along as dependencies. The
267
+ `openreceive` package is the CLI only — `npx openreceive …` below needs no
268
+ install. Different stack? Swap the two packages; the rest of this guide is
269
+ identical.
270
+
271
+ | | Packages |
272
+ | -------- | ----------------------------------------------------------------------------------------------------------------------------- |
273
+ | Server | `@openreceive/express`, `@openreceive/fastify`, `@openreceive/next` |
274
+ | Frontend | `@openreceive/react`, `@openreceive/vue`, `@openreceive/svelte`, `@openreceive/angular`, `@openreceive/elements` (plain HTML) |
275
+
276
+ On a fresh project, also install what this guide assumes is already there: the
277
+ framework and an env loader (`npm install express dotenv`), plus your ORM
278
+ before step 2 (`npm install prisma @prisma/client` on the Prisma path) —
279
+ `openreceive scaffold` emits files for the ORM you name but never installs it.
280
+
281
+ npm environments that run with `ignore-scripts` (some editor sandboxes) skip
282
+ Prisma's engine download and esbuild's binary postinstall, so a typecheck or
283
+ build that fails only there is environmental, not a code problem.
284
+
285
+ ### 2. Migrate the payment tables
286
+
287
+ ```sh
288
+ npx openreceive scaffold payments --orm prisma # or drizzle | typeorm | sequelize | knex
289
+ ```
290
+
291
+ `openreceive scaffold payments` emits one schema/migration file for your ORM
292
+ and a wiring guide. It never touches a database.
293
+ → [openreceive scaffold payments](https://openreceive.org/guides/api-reference.md#openreceive-scaffold-payments)
294
+
295
+ Then run the emitted migration through your normal workflow (for example
296
+ `npx prisma migrate dev`). OpenReceive owns the tables' logic at runtime; there
297
+ is nothing else to generate. Details:
298
+ [Payment storage](https://openreceive.org/guides/storage.md), [Node ORM recipes](https://openreceive.org/guides/node-orms.md).
299
+
300
+ No ORM? A bare driver handle (`pg`, `node:sqlite`, `better-sqlite3`) is a
301
+ supported `db` in step 4, and there is no scaffold flavor for it — execute the
302
+ same DDL once yourself with `paymentsSchemaSql(dialect)` from
303
+ `@openreceive/http` instead of scaffolding.
304
+
305
+ ### 3. Add wallet credentials
306
+
307
+ Create a server-only `.env`:
308
+
309
+ ```dotenv
310
+ NWC_URI=
311
+ LSC_URI_PRIMARY=
312
+ LSC_URI_BACKUP=
313
+ ```
314
+
315
+ 1. Get a receive-only NWC code from a compatible wallet
316
+ ([get one here](https://openreceive.org/get_a_nwc_code_to_receive_payments))
317
+ → `NWC_URI`.
318
+ 2. Optionally set up a [swap provider](https://openreceive.org/set_up_swap_provider)
319
+ → `LSC_URI_PRIMARY` (and `LSC_URI_BACKUP` if you have one).
320
+
321
+ Never put these values in browser code. Your application refuses to start if
322
+ the NWC code also advertises spend methods such as `pay_invoice`; mint a
323
+ receive-only code ([Security](https://openreceive.org/guides/security.md)).
324
+
325
+ OpenReceive reads `process.env`; creating a `.env` file is not enough on its
326
+ own. How that file (or production secrets) get into the process —
327
+ `dotenv` on Express/Fastify, Next.js auto-load, secret managers in
328
+ production — is on [Environment variables](https://openreceive.org/guides/environment-variables.md).
329
+
330
+ ### 4. Wire OpenReceive
331
+
332
+ One factory: your hooks plus a database handle. The adapter builds the
333
+ wallet client and the host; there is no background reconciler —
334
+ settlement piggybacks on requests through the durable gate.
335
+
336
+ ```ts
337
+ import "dotenv/config"; // loads .env into process.env; nothing else does
338
+ import express from "express";
339
+ import { openReceiveExpress } from "@openreceive/express";
340
+ import { db, orders, sessions } from "./app.ts"; // your existing database handle and models
341
+
342
+ const app = express();
343
+ app.use(express.json());
344
+ const openreceive = openReceiveExpress({
345
+ wallet: { nwc: process.env.NWC_URI! }, // receive-only NWC code; your app refuses to start otherwise
346
+ storage: {
347
+ db, // pg Pool/Client, node:sqlite, better-sqlite3, or a custom adapter
348
+ onPaid: async ({ reference, paidAt, query }) => {
349
+ // Settlement transaction; runs only for the first settled attempt for a
350
+ // reference. The WHERE clause is the lock: a second fulfillment path of
351
+ // yours (admin action, replayed job) updates zero rows and does nothing.
352
+ // Use `query` here, not your ORM's other connection. `?` on sqlite, `$1`
353
+ // on postgres.
354
+ const claimed = await query(
355
+ "UPDATE orders SET state = 'paid', paid_at = ? WHERE id = ? AND state = 'awaiting_payment' RETURNING id",
356
+ [paidAt, reference],
357
+ );
358
+ if (claimed.length === 0) return;
359
+ },
360
+ },
361
+ // The price for a reference — here, your order id — from your own data;
362
+ // OpenReceive converts it into the Lightning invoice. Return null when
363
+ // there is nothing to pay for. `value` is a decimal STRING from the order
364
+ // row, never a float and never a request param. `description` is what the
365
+ // payer is buying, in your own words.
366
+ amountFor: async (reference) => {
367
+ const order = await orders.find(reference);
368
+ return order
369
+ ? {
370
+ currency: "USD",
371
+ value: order.total.toString(),
372
+ description: `${order.lines.length} items`,
373
+ }
374
+ : null;
375
+ },
376
+ // Your own access check: may this caller do this action to this reference?
377
+ authorize: async ({ action, request, resource }) =>
378
+ orders.viewerMay(
379
+ await sessions.currentUser(request),
380
+ resource.reference,
381
+ action,
382
+ ),
383
+ // Recommended for public web shops: caps invoice creation at 60 per client IP
384
+ // per hour. Leave it off (the default) for point-of-sale deployments, where
385
+ // many payers share the terminal's IP.
386
+ rateLimiting: true,
387
+ });
388
+ // Behind a reverse proxy or load balancer, rate limiting needs the real client
389
+ // IP — without this every payer shares the proxy's IP and one abuser can lock
390
+ // checkout for everyone. Delete the line only if the app faces the network
391
+ // directly (see the rate-limiting guide).
392
+ app.set("trust proxy", 1);
393
+ app.use(openreceive);
394
+ ```
395
+
396
+ The first request checks the wallet. Later OpenReceive requests also settle
397
+ pending invoices, so a payer who closes the tab is still covered.
398
+ `authorize` runs on every request.
399
+ → [openReceiveExpress](https://openreceive.org/guides/api-reference.md#openreceiveexpress) ·
400
+ [authorize context](https://openreceive.org/guides/api-reference.md#the-authorize-context)
401
+
402
+ `rateLimiting: true` is for public web shops. Leave it off for point-of-sale,
403
+ where many payers share one IP. → [Rate limiting](https://openreceive.org/guides/rate-limiting.md)
404
+
405
+ An optional worker, `startNotificationWorker({ service, host })`, listens for
406
+ wallet payment notifications so settlement does not wait for the next page
407
+ load. → [startNotificationWorker](https://openreceive.org/guides/api-reference.md#startnotificationworker)
408
+
409
+ Composing the pieces yourself (`createOpenReceive` + `createHost`) is
410
+ supported when you need a shared wallet client or a custom repository.
411
+ → [createOpenReceive](https://openreceive.org/guides/api-reference.md#createopenreceive) ·
412
+ [createHost](https://openreceive.org/guides/api-reference.md#createhost)
413
+
414
+ Your app also needs an ordinary order-creation route that validates the cart,
415
+ prices with exact decimal math, and returns the order id the page will pass as
416
+ the `reference`. OpenReceive never prices from payer input.
417
+
418
+ The `reference` is a string you choose, and it is the fulfillment identity:
419
+ your order id — one per thing you fulfill, created before checkout, kept
420
+ across retries, never reused. OpenReceive never looks inside it, but `onPaid`
421
+ runs once per reference, a new checkout under a reference that already
422
+ settled is refused with 409, and a fresh id per page load lets one order be
423
+ paid twice.
424
+
425
+ Naming boundary: TypeScript APIs use camelCase fields (`paymentHash`,
426
+ `amountMsats`); everything on the wire — the mounted HTTP routes and the
427
+ browser snapshots — is snake_case (`payment_hash`, `amount_msats`).
428
+
429
+ ### 5. Render checkout
430
+
431
+ ```tsx
432
+ import { Checkout } from "@openreceive/react";
433
+ import "@openreceive/react/styles.css";
434
+
435
+ <Checkout reference={order.id} prefix="/openreceive" />;
436
+ ```
437
+
438
+ The checkout renders, polls, and settles itself. The compiled `styles.css`
439
+ sheets (`@openreceive/react`, `@openreceive/elements`) are self-contained — a
440
+ plain `<link rel="stylesheet">` works with no build step.
441
+
442
+ `<Checkout>` is complete as rendered: it already shows the `description` from
443
+ `amountFor` and the collapsed transaction-details panel. Do not build a custom
444
+ UI to satisfy those rules — they only become your job if you replace the
445
+ drop-in ([Checkout UX](https://openreceive.org/guides/checkout-ux.md)).
446
+
447
+ Match the host page's theme: by default the checkout follows the payer's
448
+ stored choice, then the system scheme. If this page is always one theme, lock
449
+ it — `<Checkout theme="dark" … />` (`theme` attribute on the custom element) —
450
+ so a white card never lands on a dark page. The checkout is styled by CSS
451
+ variables under `data-theme`; [Frontend checkout](https://openreceive.org/guides/frontend-checkout.md) has
452
+ the knobs.
453
+
454
+ Outside Vite/Rollup (esbuild, webpack, a plain script tag) the packaged
455
+ payment-method icons cannot resolve their own URLs — the drop-in needs this
456
+ exactly as a custom UI does. Serve the two packages' `dist/assets` trees and
457
+ pass the base as `assetBaseUrl="/openreceive-assets"`
458
+ ([Provider registry](https://openreceive.org/guides/provider-registry.md#assets-are-files-your-host-serves)).
459
+
460
+ That is the whole loop: your server owns the price and the order, the payer gets
461
+ an invoice, and `onPaid` runs once inside the settlement transaction.
462
+
463
+ A runnable illustration of this boundary — not a template to copy models from —
464
+ is Buy a Button
465
+ (`examples/buttons/server/node-express`).
466
+ It has products, visitors, and orders, with the three hooks as the only bridge.
467
+ Map that shape onto the models in THIS app.
468
+
469
+ ### 6. Verify
470
+
471
+ ```sh
472
+ npx openreceive doctor
473
+ ```
474
+
475
+ `openreceive doctor` checks Node, `NWC_URI`, and swap-provider configuration,
476
+ and probes the wallet relay to confirm the code is receive-only. Add
477
+ `--db <file-or-url>` to confirm the migration ran, and
478
+ `--url http://localhost:3000` to confirm the routes are mounted; every failing
479
+ line states its own fix.
480
+ → [openreceive doctor](https://openreceive.org/guides/api-reference.md#openreceive-doctor)