@vibes.diy/prompts 14.3.178 → 14.3.184

package/llms/stripe.js

@@ -1,7 +1,7 @@
 export const stripeConfig = {
     name: "stripe",
     label: "Stripe payments",
-    description: "Taking real money through Stripe Checkout, ONLY when the person asks to charge, sell, take a deposit, collect dues or sell tickets — one-time charges on the owner's own STRIPE_SECRET_KEY (a monthly or yearly subscription is the stripe-subscriptions skill): the setup steps the app shows when the key is missing, the key kept in backend.js with no Stripe.js in the page, one pending order then one Checkout Session opened in a new tab, an order marked paid only after the backend reads the session back from Stripe and matches it to the order, integer amounts in cents, and a scheduled sweep that settles orders whose buyer never came back. A storefront, plans page or booking page that only records orders takes no payment and does not need this; offer it as the [pay] option instead",
+    description: "Taking real money through Stripe Checkout, ONLY when the person asks to charge, sell, take a deposit, collect dues or sell tickets — one-time charges into the owner's own Stripe account through ctx.stripe, connected once with Connect Stripe (a monthly or yearly subscription is the stripe-subscriptions skill): the Connect Stripe setup item read from ctx.stripe.status(), test mode first with the order's mode passed on every call and live once the owner takes this app live, every Stripe call in backend.js with no Stripe.js in the page, one pending order then one Checkout Session opened in a new tab, an order marked paid only after the backend reads the session back from Stripe and matches it to the order, integer amounts in cents, and a scheduled sweep that settles orders whose buyer never came back. A storefront, plans page or booking page that only records orders takes no payment and does not need this; offer it as the [pay] option instead",
     cues: [
         "stripe",
         "take payments",

package/llms/stripe.js.map

@@ -1 +1 @@
-{"version":3,"file":"stripe.js","sourceRoot":"","sources":["../../jsr/llms/stripe.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,YAAY,GAAc;IACrC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,iBAAiB;IACxB,WAAW,EACT,ixBAAixB;IACnxB,IAAI,EAAE;QACJ,QAAQ;QACR,eAAe;QACf,cAAc;QACd,iBAAiB;QACjB,eAAe;QACf,cAAc;QACd,aAAa;QACb,UAAU;QACV,SAAS;QACT,MAAM;QACN,cAAc;QACd,QAAQ;QACR,SAAS;KACV;CACF,CAAC"}
+{"version":3,"file":"stripe.js","sourceRoot":"","sources":["../../jsr/llms/stripe.ts"],"names":[],"mappings":"AAWA,MAAM,CAAC,MAAM,YAAY,GAAc;IACrC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,iBAAiB;IACxB,WAAW,EACT,07BAA07B;IAC57B,IAAI,EAAE;QACJ,QAAQ;QACR,eAAe;QACf,cAAc;QACd,iBAAiB;QACjB,eAAe;QACf,cAAc;QACd,aAAa;QACb,UAAU;QACV,SAAS;QACT,MAAM;QACN,cAAc;QACd,QAAQ;QACR,SAAS;KACV;CACF,CAAC"}

package/llms/stripe.md

@@ -1,11 +1,13 @@
-# Stripe payments — take real money with the owner's own Stripe account
+# Stripe payments — take real money into the owner's own Stripe account
 
 When someone asks to **take money** — charge for a booking, collect dues, sell
 tickets, take a deposit, sell a download — build it on **Stripe
-Checkout** from `backend.js`, with the secret key the owner supplies. This is a
-`backend.js` feature (see the backend docs for the general handler contract);
-this page is the recipe that keeps the key on the server, keeps "paid" a fact
-only Stripe can establish, and keeps every order honest about where it is.
+Checkout** from `backend.js`, through `ctx.stripe` — the owner connects their
+Stripe account once with **Connect Stripe**, and the platform holds the
+credential. This is a `backend.js` feature (see the backend docs for the
+general handler contract); this page is the recipe that keeps every Stripe call
+on the server, keeps "paid" a fact only Stripe can establish, and keeps every
+order honest about where it is.
 
 **This skill comes in only when the person asks for payment.** A storefront that
 records orders, a plans page that records requests, a booking page that holds a
@@ -30,66 +32,112 @@ subscription state into the app and takes the person's cancellations and failed
 renewals into account.
 
 **The money is the owner's, and so is the account.** Every buyer pays the same
-Stripe account, the one whose key is on the vibe; the app is a merchant's page,
+Stripe account, the one the owner connected; the app is a merchant's page,
 and a buyer is a signed-in person whose order is a record between them and the
 merchant. An app where *each visitor* collects money into *their own* Stripe
-account is a platform (Stripe Connect) and is a different thing this recipe
-does not build — say so plainly and build the one-merchant half.
+account is a marketplace, a bigger thing than this recipe — say so plainly and
+build the one-merchant half.
 
-## 1. The setup item: the owner's Stripe secret key
+## 1. The setup item: Connect Stripe
 
-The owner gets a key from Stripe, once. The Setup surface it lands on — the
+The owner connects Stripe, once. The Setup surface it lands on — the
 owner-only entry in the app's navigation, the verdict from `/setup`, the
 re-read on focus that unlocks the Pay buttons in place — is the use-vibe
 docs' *Some apps need setup before they work*; this recipe contributes one
-item to it. The Stripe item is the secret key: the backend answers missing-key while ctx.secrets.STRIPE_SECRET_KEY is absent, and its steps link Stripe's API keys page by URL and name STRIPE_SECRET_KEY in so many words.
+item to it. The Stripe item is Connect Stripe: the backend reads ctx.stripe.status(), the item is done when the mode the app charges in reads ready, and its steps link this vibe's Settings tab, where the owner presses Connect Stripe under Payments.
 The steps are written for someone who has never opened Stripe, so each one is
 a link to the exact page and uses the words that page uses:
 
-1. Open Stripe's **API keys** page in test mode:
-   <https://dashboard.stripe.com/test/apikeys> (sign in, or create a Stripe
-   account when it asks). Under **Standard keys**, press **Reveal test key**
-   beside **Secret key** and copy it. It starts with `sk_test_`.
-2. Open this vibe's **Settings** tab on vibes.diy:
+1. Open this vibe's **Settings** tab on vibes.diy:
    `https://vibes.diy/vibes/mine/<ownerHandle>/<appSlug>/settings` (that is
-   **My Vibes** → this vibe → **Settings**). Under **Secrets**, enter the key
-   `STRIPE_SECRET_KEY` and paste the value, then save. From a terminal the
-   same thing is `npx vibes-diy secrets set STRIPE_SECRET_KEY --vibe <ownerHandle>/<appSlug>`.
-3. Come back to the app. The Pay buttons work the moment the key is saved; no
-   redeploy. In test mode the card `4242 4242 4242 4242` with any future date
-   pays.
-4. Go live. When a test payment goes through, switch to your live key to take
-   real payments: open Stripe's **API keys** page in live mode,
-   <https://dashboard.stripe.com/apikeys>, press **Reveal live key** beside
-   **Secret key** (it starts with `sk_live_`), and set `STRIPE_SECRET_KEY` to
-   it the same way; setting an existing key replaces it. This step stays on
-   the Setup screen after the item is done, with a badge that reads *Test
-   mode* until the live key is in.
+   **My Vibes** → this vibe → **Settings**), and press **Connect Stripe** under
+   **Payments**. Stripe opens its own setup pages: sign in with a Stripe login
+   or create one there, and answer Stripe's questions about the business. The
+   Stripe account belongs to the owner's Vibes DIY account and serves every
+   app they make, so it is connected once; an app that takes money for a
+   friend lives on the friend's own account, where they connect their Stripe.
+2. Come back to the app. The Pay buttons work in test mode the moment Stripe
+   says the account is ready, with no redeploy; the card
+   `4242 4242 4242 4242` with any future date pays.
+3. Go live, one app at a time. Once a test payment goes through and live
+   payments are open on vibes.diy, press **Go live with Stripe** under
+   **Payments** on the Settings tab and finish Stripe's live setup (once, for
+   every app). Then press **Take live payments in this app** on this app's
+   Setup screen. This step stays on the Setup screen after the item is done,
+   with a badge that reads *Test mode* until this app takes live payments.
 
 Those steps are the item's copy on the Setup surface, with the vibe's real
 handle and slug filled in from the `ownerHandle` and `appSlug` the `/setup`
-route hands over. `https://dashboard.stripe.com/test/apikeys` for the key,
-`https://vibes.diy/vibes/mine/<ownerHandle>/<appSlug>/settings` for where it
-goes, and `STRIPE_SECRET_KEY` in so many words: "Open the Stripe dashboard"
-and "the Settings page" are directions to search for, and a person who has
-never seen either has to go looking. In the consumer flow, a Pay button whose
-key is not set reads *Checkout is not open yet*; the owner's Setup entry is
-where the steps are.
-
-Only the owner can set or rotate a secret, and handlers see the current value on
-every invocation — so the pay button starts working the moment the key lands,
-with no redeploy. There is no publishable key, no webhook signing secret and no
-second secret of any kind in this recipe: one key, held by the server. Later,
-the same Setup entry is where the owner swaps the test key for the live one.
-
-## 2. The key never reaches the browser, and neither does Stripe.js
-
-Every Stripe request is made in backend.js with ctx.fetch and ctx.secrets.STRIPE_SECRET_KEY; App.jsx never calls api.stripe.com and never loads Stripe.js.
-
-The client talks to the app's own `/_api/...` routes, and the backend is the only
-place that knows the key exists. A secret key in a React component ships to
-every visitor who views source, and anyone who reads it can refund, pay out and
-read every customer on the owner's account until it is rotated.
+route hands over: `https://vibes.diy/vibes/mine/<ownerHandle>/<appSlug>/settings`
+for where the button is, and **Connect Stripe** and **Payments** in so many
+words. "The Settings page" is a direction to search for, and a person who has
+never seen it has to go looking. In the consumer flow, a Pay button whose item
+is not done reads *Checkout is not open yet*; the owner's Setup entry is where
+the steps are.
+
+The owner pastes nothing: the platform holds the credential and attaches it
+to every call, and the backend names only which of the owner's two accounts —
+test or live — a call is for.
+An app made before Connect Stripe, whose `backend.js` already reads
+`ctx.secrets.STRIPE_SECRET_KEY`, keeps that helper as it is: an edit to it
+changes what was asked and leaves its payments where they are, and it moves to
+`ctx.stripe` only when the owner asks to switch to Connect Stripe. Every new
+payment app is built on `ctx.stripe`.
+
+### Test mode first, live one app at a time
+
+`ctx.stripe.status()` answers `{ test: { available, state }, live: { available,
+state } }`. `available` says whether vibes.diy takes payments in that mode on
+this deployment; `state` is the owner's account in that mode: `absent` (not
+connected yet), `onboarding` (Stripe is still collecting the owner's details —
+the Settings button reads **Finish Stripe setup**), `ready` (card payments on)
+or `disconnected` (the button reads **Connect Stripe again**).
+
+The Stripe account is the owner's and serves every app they make, so the live
+account turning `ready` says the owner can take real money, not that **this**
+app is done rehearsing. Going live is the owner's choice per app:
+
+An app charges in live only after its owner chooses live for this app, and from then on live is its only account: a live account that is not ready closes checkout until the owner reconnects.
+
+The Pay request carries the mode the buyer was shown, and the backend opens Checkout only when it matches the mode the app charges in now.
+
+- The choice is a `setup:live` document the backend writes when the owner
+  presses **Take live payments in this app** on the Setup screen, offered once
+  `live.state` reads `ready`. Without it the app charges in **test**; with it,
+  in **live**. The mode comes from that document alone, so a slow or failed
+  status read never moves an app between accounts.
+- A live app stays live. A live account that reads `onboarding` or
+  `disconnected` closes checkout, and the Setup item names the button that
+  brings it back; the test account keeps its rehearsal role.
+- `/setup` hands the `mode` to everyone, and the Pay request carries the mode
+  the buyer was shown. The backend compares it with the mode it charges in
+  now, and a page that still shows the other mode is asked to refresh before
+  any Checkout opens.
+- While the mode is test, the Pay button sits beside a *Test mode* badge. The
+  owner sees the test card `4242 4242 4242 4242` to rehearse with; buyers read
+  that test purchases end when the app goes live.
+- Every order keeps the mode it was made in and settles in that mode, and the
+  app counts only orders made in its current mode: after going live, a paid
+  test order reads as a rehearsal and unlocks nothing.
+- The Go-live step reads `live.available`, which `/setup` hands the owner as
+  `liveOpen`. While it is true, the step names the **Go live with Stripe**
+  button; until then, the step says test mode runs the whole flow end to end
+  and that the Go live button appears on the same Settings tab when vibes.diy
+  opens live payments. A live app whose `liveOpen` turns false tells its owner
+  that vibes.diy has paused live payments, in its own words.
+
+## 2. Stripe stays on the server, and so does Stripe.js
+
+Every Stripe request is made in backend.js with ctx.stripe.fetch(path, { method, body, headers, mode }); App.jsx never calls api.stripe.com and never loads Stripe.js.
+
+The client talks to the app's own `/_api/...` routes, and the backend holds no
+Stripe credential at all: `ctx.stripe.fetch` sends the call to the platform,
+which attaches the key and the owner's account and hands back Stripe's own
+`Response`. `path` is the Stripe API path from `/v1` (`/v1/checkout/sessions`),
+`body` is the form as a `URLSearchParams`, `headers` carries the
+`Idempotency-Key`, and `mode` is `"test"` or `"live"`. The calls this recipe
+makes — create a Checkout Session and read it back — are calls `ctx.stripe`
+carries, along with expiring an open session.
 
 Stripe.js is not needed either: **Stripe Checkout is a page Stripe hosts.** The
 backend creates a Checkout Session and gets back a URL; the browser opens that
@@ -115,9 +163,20 @@ start two purchases.
 
 The order exists before the money moves. The `/checkout` route runs as the
 signed-in buyer (the page calls it with `apiFetch`, so `ctx.userInfo` is set),
-writes an `order` document in `pending` with the buyer's handle, the title and
-the amount, and only then asks Stripe for a session for exactly that order:
-
+writes an `order` document in `pending` with the buyer's handle, the title, the
+amount and the mode it is made in, and only then asks Stripe for a session for
+exactly that order:
+
+Every order records the mode it was made in, and every ctx.stripe.fetch call for that order passes the order's own mode.
+
+- The order's `mode` is the app's current mode — test until the owner takes
+  this app live, live after — and the session, the read-back and the sweep
+  all use the order's own `mode`. A test order is a test-mode session on the
+  owner's test account and stays one, so after the app goes live a pending
+  test order still settles (or expires) where it was made. (This `mode` is the option
+  `ctx.stripe.fetch` takes; the form's own `mode=payment` is Stripe's Checkout
+  field, and both are always there.)
+- The whole payment lands in the owner's own Stripe account: the session carries the line items, the order's ids and the return URLs, and Stripe pays the merchant directly.
 - `mode=payment`, always: one charge, one order (see *One-time charges only*).
 - The price is inline `price_data` — currency, `unit_amount`, a product name —
   so the owner never has to create products in the dashboard first.
@@ -163,7 +222,7 @@ document field is only as trustworthy as the rules that guard it — so the
 read-back checks Stripe's copy, never the order's.
 
 Two things settle an order, and both are the backend reading
-`GET /v1/checkout/sessions/<id>` with the key:
+`GET /v1/checkout/sessions/<id>` through `ctx.stripe`, in the order's own mode:
 
 - **The return.** When the app opens with `#paid=<orderId>` in its address, the
   page calls `/confirm` for that order; the route reads the session back, and if
@@ -183,7 +242,7 @@ A scheduled sweep settles every order still pending by reading its session back
 Why not a Stripe webhook: a webhook arrives with no identity, and a write with
 no identity has to be opened to every anonymous visitor to be accepted — the
 wrong door for the one record that means money changed hands. Reading the
-session back with the key the app already holds is the same proof, from the
+session back through `ctx.stripe` is the same proof, from the
 same source, on a route that can only move an order to the state Stripe
 reports. `access.js` makes that structural: an existing order changes only on
 a write from the app's own `backend.js` (`ctx.requireBackend()` on every
@@ -207,22 +266,22 @@ reading Stripe. A buyer never edits an order; they make a new one.
 
 ## 6. Errors keep their reason
 
-Stripe's refusals come back as JSON with `error.message`; keep that sentence and
-return it as `{ ok: false, reason: "stripe", message }` so the page can show
-the owner *why* ("Invalid API Key provided" is the whole diagnosis of a key
-pasted with a trailing space). A refused `ctx.fetch` — the
-`{ vibesEgressDenied: true }` shape — is a platform refusal, not Stripe's; log
-it with `ctx.log` and answer `{ ok: false, reason: "unavailable" }`.
-`api.stripe.com` is CORS-open to the app's own origin, so a keyed `POST` from
-`ctx.fetch` is admitted on the CORS lane with no platform arrangement; nothing
-here needs the curated list.
+Stripe's own answers arrive as a `Response`: a card decline or a bad parameter
+is JSON with `error.message`; keep that sentence and return it as
+`{ ok: false, reason: "stripe", message }` so the page can show *why*. A
+platform answer is thrown as an `Error` with `e.reason`, and each reason names
+the owner's next step: `not_connected` and `not_ready` are the Setup item
+(connect, or let Stripe finish its checks), `account_disconnected` is
+**Connect Stripe** again from the same Settings tab, and `not_available` means
+payments in that mode are paused on vibes.diy for now. Log it with `ctx.log`
+and hand the reason to the page, which reads it as *Checkout is not open yet*.
 
 ## Complete backend.js
 
 ### `backend.js`
 ```js app=stripe-dues
-// Stripe Checkout for one merchant: the owner's key, hosted Checkout, orders settled
-// by reading each session back. Nothing in this file touches a card.
+// Stripe Checkout for one merchant: the owner's connected Stripe account, hosted Checkout,
+// orders settled by reading each session back. Nothing in this file touches a card or a key.
 export const config = {
   scheduled: { interval: "5m" },
   // The routes read a buyer's own order back; access.js binds the database, so the fetch lane
@@ -230,7 +289,6 @@ export const config = {
   fetch: { unfilteredReads: { dbs: ["orders"], why: "the /checkout and /confirm routes read the signed-in buyer's own order, checked by buyerHandle before anything is returned" } },
 };
 
-const STRIPE = "https://api.stripe.com/v1";
 const DB = "orders";
 const SESSION_TTL_MS = 24 * 60 * 60 * 1000; // a Checkout Session expires on its own after a day
 
@@ -249,27 +307,38 @@ function appUrl(ctx, hash) {
   return `https://vibes.diy/vibe/${ctx.appInfo.ownerHandle}/${ctx.appInfo.appSlug}${hash}`;
 }
 
-// One call to Stripe. Form-encoded in, JSON out, the refusal's own sentence kept.
-async function stripe(ctx, method, path, form, headers = {}) {
-  const key = ctx.secrets.STRIPE_SECRET_KEY;
-  if (!key) return { ok: false, reason: "missing-key" };
-  const res = await ctx.fetch(`${STRIPE}${path}`, {
-    method,
-    headers: {
-      authorization: `Bearer ${key}`,
-      ...(form ? { "content-type": "application/x-www-form-urlencoded" } : {}),
-      ...headers,
-    },
-    body: form ? form.toString() : undefined,
-  });
-  const body = await res.json().catch(() => null);
-  if (!res.ok) {
-    if (body?.vibesEgressDenied) {
-      ctx.log("warn", "stripe egress denied", { gate: body.gate });
-      return { ok: false, reason: "unavailable" };
-    }
-    return { ok: false, reason: "stripe", message: body?.error?.message ?? `HTTP ${res.status}` };
+// The owner's choice to take THIS app live. The Stripe account is the owner's and serves all of
+// their apps, so its live account turning ready never moves an app by itself.
+const LIVE_CHOICE = "setup:live";
+
+// Which of the owner's two Stripe accounts this app charges in, decided by the owner's choice
+// alone; then whether that account takes card payments right now. A live app whose live account
+// is not ready stays live with checkout closed until the owner reconnects.
+async function checkoutMode(ctx) {
+  const mode = (await ctx.db.get(LIVE_CHOICE, { db: DB })) ? "live" : "test";
+  let st;
+  try {
+    st = await ctx.stripe.status();
+  } catch (e) {
+    ctx.log("warn", "stripe status unavailable", { message: e.message });
+    return { mode, open: false, state: "unavailable", liveOpen: false, liveReady: false };
+  }
+  return { mode, open: st[mode].state === "ready", state: st[mode].state, liveOpen: st.live.available, liveReady: st.live.state === "ready" };
+}
+
+// One call to Stripe on the owner's account, in the order's own mode. Form-encoded in, Stripe's
+// JSON out, the refusal's own sentence kept.
+async function stripe(ctx, mode, method, path, form, headers = {}) {
+  let res;
+  try {
+    res = await ctx.stripe.fetch(`/v1${path}`, { method, body: form, headers, mode });
+  } catch (e) {
+    // The platform's answer, not Stripe's: a Setup step for the owner, or payments paused.
+    ctx.log("warn", "stripe call refused", { reason: e.reason });
+    return { ok: false, reason: e.reason ?? "not_available" };
   }
+  const body = await res.json().catch(() => null);
+  if (!res.ok) return { ok: false, reason: "stripe", message: body?.error?.message ?? `HTTP ${res.status}` };
   return { ok: true, body };
 }
 
@@ -284,7 +353,7 @@ async function settle(ctx, order) {
     }
     return order;
   }
-  const session = await stripe(ctx, "GET", `/checkout/sessions/${order.sessionId}`);
+  const session = await stripe(ctx, order.mode, "GET", `/checkout/sessions/${order.sessionId}`);
   if (!session.ok) return order; // a refusal settles nothing; the next read tries again
   const s = session.body;
   // The session must be THIS order's: Stripe's copy of the order id, amount and currency,
@@ -311,28 +380,47 @@ export async function fetch(request, ctx) {
   // links with) for the owner alone.
   if (url.pathname === "/setup" && request.method === "GET") {
     const owner = ctx.userInfo?.userHandle === ctx.appInfo.ownerHandle;
-    const items = [{ id: "stripe-key", label: "Stripe secret key", done: Boolean(ctx.secrets.STRIPE_SECRET_KEY) }];
-    const ready = items.every((item) => item.done);
-    if (!owner) return json({ ok: true, ready, owner });
-    // `live` is the Go-live step's badge: a test key takes test payments, a live key real ones.
-    const live = (ctx.secrets.STRIPE_SECRET_KEY ?? "").startsWith("sk_live_");
-    return json({ ok: true, ready, owner, live, items, ownerHandle: ctx.appInfo.ownerHandle, appSlug: ctx.appInfo.appSlug });
+    const { mode, open, state, liveOpen, liveReady } = await checkoutMode(ctx);
+    const item = { id: "stripe-connect", label: "Connect Stripe", done: open, state };
+    if (mode === "live" && !liveOpen) item.problem = "Vibes DIY has paused live payments for now; checkout reopens here by itself when they return.";
+    const items = [item];
+    const ready = items.every((i) => i.done);
+    // `mode` is everyone's: the Pay button wears a Test mode badge while the app takes test payments.
+    if (!owner) return json({ ok: true, ready, owner, mode });
+    // The Go-live step: `liveOpen` (vibes.diy takes live payments) and `liveReady` (the owner's live
+    // Stripe account is ready, so this app can be taken live).
+    return json({ ok: true, ready, owner, mode, liveOpen, liveReady, items, ownerHandle: ctx.appInfo.ownerHandle, appSlug: ctx.appInfo.appSlug });
+  }
+
+  // The owner takes this app live: one document, written for the owner alone, once their live
+  // Stripe account is ready. From here on the app charges in live only.
+  if (url.pathname === "/go-live" && request.method === "POST") {
+    if (ctx.userInfo?.userHandle !== ctx.appInfo.ownerHandle) return json({ ok: false, reason: "owner-only" }, 403);
+    const { liveReady } = await checkoutMode(ctx);
+    if (!liveReady) return json({ ok: false, reason: "not_ready" }, 409);
+    const chosen = await ctx.db.get(LIVE_CHOICE, { db: DB });
+    if (!chosen) await ctx.db.put({ _id: LIVE_CHOICE, type: "setup", mode: "live", chosenAt: Date.now() }, { db: DB, id: LIVE_CHOICE });
+    return json({ ok: true, mode: "live" });
   }
 
   // Start a purchase: the order first, then a Checkout Session for exactly that order.
   if (url.pathname === "/checkout" && request.method === "POST") {
     const me = ctx.userInfo?.userHandle;
     if (!me) return json({ ok: false, reason: "sign-in" }, 401);
-    if (!ctx.secrets.STRIPE_SECRET_KEY) return json({ ok: false, reason: "missing-key" }, 503);
-    const { kind } = await request.json();
+    const { mode, open, state } = await checkoutMode(ctx);
+    const { kind, mode: shown } = await request.json();
+    // The buyer pays in the mode their page showed them, or not at all: a page that still shows
+    // the other mode refreshes first.
+    if (shown !== mode) return json({ ok: false, reason: "mode-changed", mode }, 409);
+    if (!open) return json({ ok: false, reason: state === "disconnected" ? "account_disconnected" : "not_ready" }, 503);
     const price = PRICES[kind];
     if (!price) return json({ ok: false, reason: "unknown-item" }, 400);
 
     // One attempt per buyer per item: a second press, a retry after a lost answer, a reload,
     // all land on the session already open rather than minting another order.
     const pending = await ctx.db.query({ db: DB, field: "status", key: "pending", limit: 100 });
-    const open = pending.find((o) => o.buyerHandle === me && o.kind === kind && o.sessionUrl && Date.now() - o.createdAt < SESSION_TTL_MS);
-    if (open) return json({ ok: true, orderId: open._id, url: open.sessionUrl });
+    const attempt = pending.find((o) => o.buyerHandle === me && o.kind === kind && o.mode === mode && o.sessionUrl && Date.now() - o.createdAt < SESSION_TTL_MS);
+    if (attempt) return json({ ok: true, orderId: attempt._id, url: attempt.sessionUrl });
 
     const id = "order-" + crypto.randomUUID();
     const order = {
@@ -343,6 +431,7 @@ export async function fetch(request, ctx) {
       amount: price.amount,
       currency: price.currency,
       buyerHandle: me,
+      mode, // the account this order is made in; every later call for it passes the same mode
       status: "pending",
       createdAt: Date.now(),
     };
@@ -359,7 +448,7 @@ export async function fetch(request, ctx) {
       success_url: appUrl(ctx, `#paid=${id}`),
       cancel_url: appUrl(ctx, `#cancelled=${id}`),
     });
-    const session = await stripe(ctx, "POST", "/checkout/sessions", form, { "idempotency-key": id });
+    const session = await stripe(ctx, mode, "POST", "/checkout/sessions", form, { "idempotency-key": id });
     if (!session.ok) return json(session, session.reason === "stripe" ? 502 : 503);
 
     await ctx.db.put({ ...order, sessionId: session.body.id, sessionUrl: session.body.url }, { db: DB, id });
@@ -382,7 +471,6 @@ export async function fetch(request, ctx) {
 
 // The sweep: anyone who paid and closed the tab is still marked paid within a few minutes.
 export async function scheduled(event, ctx) {
-  if (!ctx.secrets.STRIPE_SECRET_KEY) return;
   let after;
   let settled = 0;
   do {
@@ -403,13 +491,19 @@ export async function scheduled(event, ctx) {
 ```js app=stripe-dues
 export function orders(doc, oldDoc, user, ctx) {
   if (!user?.userHandle) throw { forbidden: "sign in" };
+  // The app's go-live choice: written by backend.js on the owner's /go-live call alone, read on
+  // the owner's channel.
+  if (doc.type === "setup") {
+    ctx.requireBackend("fetch");
+    return { channels: ["orders"] };
+  }
   if (doc.type !== "order") throw { forbidden: "unknown document type" };
   if (oldDoc) {
     // Only backend.js changes an existing order — the /checkout route adding the session, the
     // /confirm route and the sweep settling it — so no field (sessionId included) is a buyer's to edit.
     ctx.requireBackend();
-    if (doc.buyerHandle !== oldDoc.buyerHandle || doc.amount !== oldDoc.amount || doc.currency !== oldDoc.currency || doc.kind !== oldDoc.kind) {
-      throw { forbidden: "an order keeps its buyer and its price" };
+    if (doc.buyerHandle !== oldDoc.buyerHandle || doc.amount !== oldDoc.amount || doc.currency !== oldDoc.currency || doc.kind !== oldDoc.kind || doc.mode !== oldDoc.mode) {
+      throw { forbidden: "an order keeps its buyer, its price and its mode" };
     }
   } else {
     if (doc.buyerHandle !== user.userHandle) throw { forbidden: "an order belongs to its buyer" };
@@ -431,9 +525,9 @@ import { apiFetch, useVibe } from "use-vibes";
 import { Badge, Button, Heading, Row, Stack, Text } from "@vibes.diy/pouf";
 
 // The setup verdict, read on mount and again whenever the app comes back into view: the owner
-// sets the key in another tab and returns, and the Pay buttons unlock without a reload.
+// connects Stripe in another tab and returns, and the Pay buttons unlock without a reload.
 function useSetup() {
-  const [setup, setSetup] = useState(null); // { ready, owner, items?, ownerHandle?, appSlug? }
+  const [setup, setSetup] = useState(null); // { ready, owner, mode, liveOpen?, items?, ownerHandle?, appSlug? }
   const latest = useRef(0);
   useEffect(() => {
     // Mount, focus and visibility reads overlap; only the latest one may land, or a slow stale
@@ -446,44 +540,55 @@ function useSetup() {
     const onVisible = () => { if (document.visibilityState === "visible") load(); };
     document.addEventListener("visibilitychange", onVisible);
     window.addEventListener("focus", load);
-    return () => { document.removeEventListener("visibilitychange", onVisible); window.removeEventListener("focus", load); };
+    window.addEventListener("setup-changed", load); // the Setup screen's own Take live button
+    return () => { document.removeEventListener("visibilitychange", onVisible); window.removeEventListener("focus", load); window.removeEventListener("setup-changed", load); };
   }, []);
   return setup;
 }
 
+// The button the Settings tab shows for each state of the owner's Stripe account, in its own words.
+const STRIPE_BUTTON = { absent: "Connect Stripe", onboarding: "Finish Stripe setup", disconnected: "Connect Stripe again" };
+
 // The Setup surface, the owner's alone: one item, every step a link to the exact page in that
 // page's own words, with this vibe's real handle and slug filled in.
 function SetupScreen({ setup }) {
   const vibe = `${setup.ownerHandle}/${setup.appSlug}`;
   const settingsUrl = `https://vibes.diy/vibes/mine/${vibe}/settings`;
-  const key = setup.items.find((item) => item.id === "stripe-key");
+  const item = setup.items.find((i) => i.id === "stripe-connect");
+  const live = setup.mode === "live";
+  const takeLive = () => apiFetch("/go-live", { method: "POST" }).then(() => window.dispatchEvent(new Event("setup-changed")));
   return (
     <Stack>
       <Heading>Setup</Heading>
       <Row gap={2}>
-        <Text>{key.label}</Text>
-        <Badge tone={key.done ? "up" : "info"}>{key.done ? "Done" : "To do"}</Badge>
+        <Text>{item.label}</Text>
+        <Badge tone={item.done ? "up" : "info"}>{item.done ? "Done" : item.state === "onboarding" ? "Stripe is finishing up" : "To do"}</Badge>
       </Row>
+      {item.problem && <Text muted>{item.problem}</Text>}
       <ol>
         <li>
-          Open Stripe's <a href="https://dashboard.stripe.com/test/apikeys" target="_blank" rel="noreferrer">API keys page (test mode)</a>,
-          use your Stripe account (the page offers to create one), and under <b>Standard keys</b> press <b>Reveal test key</b> beside <b>Secret key</b>.
-          Copy it; it starts with <code>sk_test_</code>.
+          Open <a href={settingsUrl} target="_blank" rel="noreferrer">this vibe's Settings tab</a> (My Vibes → this vibe → Settings)
+          and press <b>{STRIPE_BUTTON[item.state] ?? "Connect Stripe"}</b> under <b>Payments</b>.
+          Stripe opens its own setup pages: use your Stripe account, or create one there. Your Stripe account serves every app you make.
         </li>
         <li>
-          Open <a href={settingsUrl} target="_blank" rel="noreferrer">this vibe's Settings tab</a> (My Vibes → this vibe → Settings).
-          Under <b>Secrets</b>, enter the key <code>STRIPE_SECRET_KEY</code>, paste the value, and save.
-          From a terminal instead: <code>npx vibes-diy secrets set STRIPE_SECRET_KEY --vibe {vibe}</code>.
+          Come back here: the Pay buttons work as soon as Stripe says your account is ready. In test mode the card 4242 4242 4242 4242 with any future date pays.
         </li>
         <li>
-          Come back here: the Pay buttons work as soon as the key is saved. In test mode the card 4242 4242 4242 4242 pays.
-        </li>
-        <li>
-          {/* The Go-live step stays here once the item is done; its badge says which key is in. */}
-          <Badge tone={setup.live ? "up" : "info"}>{setup.live ? "Live" : "Test mode"}</Badge>{" "}
-          When a test payment goes through, switch to your live key to take real payments: open Stripe's{" "}
-          <a href="https://dashboard.stripe.com/apikeys" target="_blank" rel="noreferrer">API keys page (live mode)</a>, press <b>Reveal live key</b> beside <b>Secret key</b>
-          (it starts with <code>sk_live_</code>), and set <code>STRIPE_SECRET_KEY</code> to it the same way.
+          {/* The Go-live step stays here once the item is done; its badge says which account this app charges in. */}
+          <Badge tone={live ? "up" : "info"}>{live ? "Live" : "Test mode"}</Badge>{" "}
+          {live ? (
+            <>This app takes real payments into your Stripe account; refunds and payouts are in your Stripe Dashboard.</>
+          ) : setup.liveReady ? (
+            <>
+              Your live Stripe account is ready. Each app goes live on its own, so this one rehearses until you press{" "}
+              <Button onClick={takeLive}>Take live payments in this app</Button>. Buyers start fresh in live; test purchases stay rehearsals.
+            </>
+          ) : setup.liveOpen ? (
+            <>When a test payment goes through, press <b>Go live with Stripe</b> under <b>Payments</b> on <a href={settingsUrl} target="_blank" rel="noreferrer">the same Settings tab</a> and finish Stripe's live setup, once for all your apps; then come back here to take this app live.</>
+          ) : (
+            <>Test mode runs the whole flow end to end. The <b>Go live with Stripe</b> button appears under <b>Payments</b> on the same Settings tab when vibes.diy opens live payments.</>
+          )}
         </li>
       </ol>
     </Stack>
@@ -523,11 +628,16 @@ export default function App() {
     }
     setBusy(true);
     try {
-      const res = await apiFetch("/checkout", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ kind }) });
+      // The mode this page shows rides the request, so the buyer pays in the mode they saw.
+      const res = await apiFetch("/checkout", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ kind, mode: setup.mode }) });
       const data = await res.json();
       if (!data.ok) {
         tab.close();
-        setError(data.reason === "stripe" ? data.message : "Payments are not available right now.");
+        setError(
+          data.reason === "stripe" ? data.message
+          : data.reason === "mode-changed" ? `Payments here just moved to ${data.mode} mode. Refresh the page and press Pay again.`
+          : "Checkout is not open yet."
+        );
         return;
       }
       tab.location.href = data.url;
@@ -538,7 +648,8 @@ export default function App() {
 
   const ready = setup?.ready === true;
   const mine = orders.filter((o) => o.buyerHandle === me?.userHandle);
-  const paid = mine.some((o) => o.kind === "dues" && o.status === "paid");
+  // Only orders made in the app's current mode count: after going live, test orders are rehearsals.
+  const paid = mine.some((o) => o.kind === "dues" && o.status === "paid" && o.mode === setup?.mode);
   return (
     <Stack>
       <Row gap={2}>
@@ -558,9 +669,18 @@ export default function App() {
           {paid ? (
             <Badge tone="up">Dues paid</Badge>
           ) : ready ? (
-            <Button onClick={() => pay("dues")} disabled={busy} loading={busy}>
-              Pay $40 dues — Stripe opens in a new tab
-            </Button>
+            <Stack>
+              {/* Test mode is a rehearsal: the owner gets the test card, buyers learn it ends at go-live. */}
+              {setup.mode === "test" && (
+                <Row gap={2}>
+                  <Badge tone="info">Test mode</Badge>
+                  <Text muted>{setup.owner ? "Pay with the test card 4242 4242 4242 4242 and any future date." : "This is a rehearsal: test purchases end when the app goes live."}</Text>
+                </Row>
+              )}
+              <Button onClick={() => pay("dues")} disabled={busy} loading={busy}>
+                Pay $40 dues — Stripe opens in a new tab
+              </Button>
+            </Stack>
           ) : (
             <Text muted>Checkout is not open yet.</Text>
           )}
@@ -568,7 +688,7 @@ export default function App() {
           {setup?.owner && (
             <ul>
               {orders.map((o) => (
-                <li key={o._id}>@{o.buyerHandle} · {o.title} · {(o.amount / 100).toFixed(2)} {o.currency.toUpperCase()} · {o.status}</li>
+                <li key={o._id}>@{o.buyerHandle} · {o.title} · {(o.amount / 100).toFixed(2)} {o.currency.toUpperCase()} · {o.status}{o.mode === setup.mode ? "" : ` · ${o.mode} rehearsal`}</li>
               ))}
             </ul>
           )}