@fantastic.dev/better-stripe 0.8.1 → 0.9.0

package/src/react/workflows/AffiliateRateEditor.tsx

@@ -0,0 +1,92 @@
+"use client";
+import { useId, useState, type ReactNode } from "react";
+import { useWorkflowAction } from "./useWorkflowAction.js";
+export type AffiliateRateUpdate = {
+  affiliateBasisPoints: number | null;
+  expectedVersion: number;
+};
+export type AffiliateRateEditorState = {
+  percentage: string;
+  setPercentage: (value: string) => void;
+  effectiveLabel: string;
+  isPending: boolean;
+  error: string | null;
+  message: string | undefined;
+  save: () => Promise<unknown>;
+};
+export type AffiliateRateEditorProps = {
+  scopeKey: string;
+  affiliateBasisPoints: number | null;
+  effectiveBasisPoints: number;
+  source: "plan" | "product" | "price" | "store" | "global" | "none";
+  version: number;
+  onSave: (update: AffiliateRateUpdate) => Promise<unknown>;
+  children?: (state: AffiliateRateEditorState) => ReactNode;
+};
+/** Unstyled nullable commission editor. Blank inherits the next applicable rate. */
+export function AffiliateRateEditor(props: AffiliateRateEditorProps) {
+  const id = useId();
+  const scope = `${props.scopeKey}:${props.version}`;
+  const initial = {
+    scope,
+    percentage:
+      props.affiliateBasisPoints === null
+        ? ""
+        : String(props.affiliateBasisPoints / 100),
+  };
+  const [fields, setFields] = useState(initial);
+  if (fields.scope !== scope) setFields(initial);
+  const action = useWorkflowAction(async () => {
+    const value = fields.percentage.trim();
+    const rate = value === "" ? null : Math.round(Number(value) * 100);
+    if (
+      rate !== null &&
+      (!/^\d+(\.\d{1,2})?$/.test(value) ||
+        !Number.isSafeInteger(rate) ||
+        rate < 0 ||
+        rate > 10000)
+    )
+      throw new Error(
+        "Enter a percentage from 0 to 100 with at most two decimal places, or leave it blank to inherit.",
+      );
+    await props.onSave({
+      affiliateBasisPoints: rate,
+      expectedVersion: props.version,
+    });
+    return "Affiliate payout saved.";
+  }, props.scopeKey);
+  const state: AffiliateRateEditorState = {
+    percentage: fields.percentage,
+    setPercentage: (percentage) =>
+      setFields((previous) => ({ ...previous, percentage })),
+    effectiveLabel: `Effective payout: ${props.effectiveBasisPoints / 100}% from ${props.source === "plan" ? "store plan" : props.source}.`,
+    isPending: action.isPending,
+    error: action.error,
+    message: action.result,
+    save: action.run,
+  };
+  if (props.children) return <>{props.children(state)}</>;
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        void state.save();
+      }}
+    >
+      <label htmlFor={id}>Affiliate payout (%)</label>
+      <input
+        id={id}
+        inputMode="decimal"
+        value={state.percentage}
+        disabled={state.isPending}
+        onChange={(event) => state.setPercentage(event.target.value)}
+      />
+      <p>{state.effectiveLabel} Leave blank to inherit.</p>
+      {state.error && <p role="alert">{state.error}</p>}
+      {state.message && <p role="status">{state.message}</p>}
+      <button type="submit" disabled={state.isPending}>
+        {state.isPending ? "Saving…" : "Save payout"}
+      </button>
+    </form>
+  );
+}

package/src/react/workflows/CheckoutForms.test.tsx

@@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import type { ReactNode } from "react";
 const mocks = vi.hoisted(() => ({
+  sessionEmail: null as string | null,
   updateEmail: vi.fn(),
   confirm: vi.fn(),
   submit: vi.fn(),
@@ -21,6 +22,7 @@ vi.mock("@stripe/react-stripe-js/checkout", () => ({
     type: "success",
     checkout: {
       id: "cs_test",
+      email: mocks.sessionEmail,
       canConfirm: false,
       updateEmail: mocks.updateEmail,
       confirm: mocks.confirm,
@@ -36,6 +38,7 @@ import { CheckoutElementsForm, PaymentIntentForm } from "./CheckoutForms.js";
 afterEach(cleanup);
 beforeEach(() => {
   vi.clearAllMocks();
+  mocks.sessionEmail = null;
   mocks.updateEmail.mockResolvedValue({ type: "success" });
   mocks.confirm.mockResolvedValue({
     type: "error",
@@ -53,6 +56,27 @@ const props = {
   email: "buyer@example.com",
   onNavigate: vi.fn(),
 };
+it("confirms a session with a server-set email without attempting to update it", async () => {
+  mocks.sessionEmail = "account@example.com";
+  mocks.updateEmail.mockResolvedValue({
+    type: "error",
+    error: { message: "You cannot update the email" },
+  });
+  mocks.confirm.mockResolvedValue({ type: "success" });
+  const navigate = vi.fn();
+  render(<CheckoutElementsForm {...props} onNavigate={navigate} />);
+  const input = screen.getByRole("textbox", {
+    name: "Email for your receipt",
+  }) as HTMLInputElement;
+  expect(input.value).toBe("account@example.com");
+  expect(input.readOnly).toBe(true);
+  await userEvent.click(screen.getByRole("button", { name: "Pay" }));
+  expect(mocks.updateEmail).not.toHaveBeenCalled();
+  expect(mocks.confirm).toHaveBeenCalledOnce();
+  expect(navigate).toHaveBeenCalledWith(
+    "https://app.test/receipt?session_id=cs_test",
+  );
+});
 it("sends the email before confirming, including when canConfirm is initially false", async () => {
   render(<CheckoutElementsForm {...props} />);
   await userEvent.click(screen.getByRole("button", { name: "Pay" }));
@@ -70,6 +94,22 @@ it("does not confirm after Stripe rejects the email", async () => {
   expect(screen.getByRole("alert").textContent).toContain("Invalid email");
   expect(mocks.confirm).not.toHaveBeenCalled();
 });
+it("keeps a guest email editable after a declined payment", async () => {
+  mocks.updateEmail.mockImplementation(async (email: string) => {
+    mocks.sessionEmail = email;
+    return { type: "success" };
+  });
+  render(<CheckoutElementsForm {...props} />);
+  await userEvent.click(screen.getByRole("button", { name: "Pay" }));
+  await screen.findByText("Card declined");
+  const input = screen.getByRole("textbox", { name: "Email for your receipt" });
+  expect((input as HTMLInputElement).readOnly).toBe(false);
+  await userEvent.clear(input);
+  await userEvent.type(input, "other@example.com");
+  await userEvent.click(screen.getByRole("button", { name: "Pay" }));
+  expect(mocks.updateEmail).toHaveBeenLastCalledWith("other@example.com");
+  expect(mocks.confirm).toHaveBeenCalledTimes(2);
+});
 it("disables confirmation while Stripe is processing and supports a new attempt after failure", async () => {
   let resolve!: (value: unknown) => void;
   mocks.confirm.mockImplementationOnce(

package/src/react/workflows/CheckoutForms.tsx

@@ -24,6 +24,8 @@ import { StripeProvider } from "../components/StripeProvider.js";
 import { useWorkflowAction } from "./useWorkflowAction.js";
 export type CheckoutFormState = {
   email: string;
+  /** Stripe supplied this email when the session loaded; do not edit it. */
+  emailReadOnly?: boolean;
   setEmail: (email: string) => void;
   emailInputId: string;
   isPending: boolean;
@@ -44,6 +46,7 @@ export type CheckoutFormProps = CheckoutFormOptions & {
 };
 function NativeForm({
   email,
+  emailReadOnly,
   setEmail,
   emailInputId,
   paymentElement,
@@ -65,6 +68,7 @@ function NativeForm({
         required
         autoComplete="email"
         value={email}
+        readOnly={emailReadOnly}
         onChange={(event) => setEmail(event.target.value)}
       />
       {paymentElement}
@@ -86,31 +90,48 @@ export function CheckoutElementsForm(props: CheckoutFormProps) {
     </CheckoutSessionProvider>
   );
 }
-function SessionForm({
+function SessionForm(props: CheckoutFormProps) {
+  const checkout = useCheckout();
+  if (checkout.type === "loading")
+    return <p role="status">Loading checkout…</p>;
+  if (checkout.type === "error")
+    return <p role="alert">{checkout.error.message}</p>;
+  return (
+    <ReadySessionForm
+      key={checkout.checkout.id}
+      {...props}
+      checkout={checkout.checkout}
+    />
+  );
+}
+function ReadySessionForm({
+  checkout,
   email: initialEmail = "",
   returnUrl,
   onNavigate,
   renderForm,
-}: CheckoutFormProps) {
-  const checkout = useCheckout();
-  const [email, setEmail] = useState(initialEmail);
+}: CheckoutFormProps & {
+  checkout: Extract<
+    ReturnType<typeof useCheckout>,
+    { type: "success" }
+  >["checkout"];
+}) {
+  // Snapshot once per session: a guest update must not lock their input on retry.
+  const [sessionEmail] = useState(() => checkout.email);
+  const [email, setEmail] = useState(sessionEmail ?? initialEmail);
   const emailInputId = useId();
   const action = useWorkflowAction(async () => {
-    if (checkout.type !== "success") throw new Error("Checkout is not ready.");
-    const updated = await checkout.checkout.updateEmail(email);
-    if (updated.type === "error") throw new Error(updated.error.message);
-    const confirmed = await checkout.checkout.confirm();
+    if (!sessionEmail) {
+      const updated = await checkout.updateEmail(email);
+      if (updated.type === "error") throw new Error(updated.error.message);
+    }
+    const confirmed = await checkout.confirm();
     if (confirmed.type === "error") throw new Error(confirmed.error.message);
-    onNavigate(
-      returnUrl.replace("{CHECKOUT_SESSION_ID}", checkout.checkout.id),
-    );
+    onNavigate(returnUrl.replace("{CHECKOUT_SESSION_ID}", checkout.id));
   });
-  if (checkout.type === "loading")
-    return <p role="status">Loading checkout…</p>;
-  if (checkout.type === "error")
-    return <p role="alert">{checkout.error.message}</p>;
   const state: CheckoutFormState = {
-    email,
+    email: sessionEmail ?? email,
+    emailReadOnly: !!sessionEmail,
     setEmail,
     emailInputId,
     paymentElement: <PaymentElement />,

package/src/react/workflows/IntegrationSwitch.test.tsx

@@ -34,3 +34,28 @@ it("allows an uncontrolled choice without requiring a router", async () => {
   expect(screen.getByText("Stripe component")).toBeTruthy();
   expect(screen.queryByText("API controls")).toBeNull();
 });
+it("names API, BetterStripe components, and Stripe UI distinctly while preserving mode values", async () => {
+  const changed = vi.fn();
+  render(
+    <IntegrationSwitch
+      views={{
+        headless: <p>API controls</p>,
+        components: <p>Package UI</p>,
+        embedded: <p>Stripe embed</p>,
+        hosted: <p>Stripe portal</p>,
+      }}
+      onValueChange={changed}
+    />,
+  );
+  expect(screen.getByRole("button", { name: "via API" })).toBeTruthy();
+  expect(screen.getByRole("button", { name: "Stripe embedded" })).toBeTruthy();
+  expect(screen.getByRole("button", { name: "Stripe hosted" })).toBeTruthy();
+  await userEvent.click(
+    screen.getByRole("button", { name: "BetterStripe components" }),
+  );
+  expect(changed).toHaveBeenLastCalledWith("components");
+  expect(screen.getByText("Package UI")).toBeTruthy();
+  await userEvent.click(screen.getByRole("button", { name: "via API" }));
+  expect(changed).toHaveBeenLastCalledWith("headless");
+  expect(screen.queryByRole("button", { name: "Headless" })).toBeNull();
+});

package/src/react/workflows/IntegrationSwitch.tsx

@@ -2,8 +2,8 @@
 import { useState, type ReactNode } from "react";
 export type IntegrationMode = "headless" | "components" | "embedded" | "hosted";
 const labels: Record<IntegrationMode, string> = {
-  headless: "Headless",
-  components: "Components",
+  headless: "via API",
+  components: "BetterStripe components",
   embedded: "Stripe embedded",
   hosted: "Stripe hosted",
 };

package/src/react/workflows/Pagination.test.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, expect, it } from "vitest";
+import { Pagination, useCursorPagination } from "./Pagination.js";
+afterEach(cleanup);
+it("navigates cursor history and resets when the account changes", async () => {
+  function View({ account }: { account: string }) {
+    const state = useCursorPagination(account);
+    return (
+      <>
+        <output>{state.cursor ?? "first"}</output>
+        <Pagination
+          page={state.page}
+          canPrevious={state.canPrevious}
+          canNext={state.page < 3}
+          onPrevious={state.previous}
+          onNext={() => state.next(`cursor-${state.page}`)}
+        />
+      </>
+    );
+  }
+  const { rerender } = render(<View account="a" />);
+  expect(
+    screen.getByRole("button", { name: "Previous" }).hasAttribute("disabled"),
+  ).toBe(true);
+  await userEvent.click(screen.getByRole("button", { name: "Next" }));
+  expect(screen.getByText("cursor-1")).toBeTruthy();
+  await userEvent.click(screen.getByRole("button", { name: "Next" }));
+  expect(screen.getByText("Page 3")).toBeTruthy();
+  expect(
+    screen.getByRole("button", { name: "Next" }).hasAttribute("disabled"),
+  ).toBe(true);
+  await userEvent.click(screen.getByRole("button", { name: "Previous" }));
+  expect(screen.getByText("cursor-1")).toBeTruthy();
+  rerender(<View account="b" />);
+  expect(screen.getByText("Page 1")).toBeTruthy();
+  expect(screen.getByText("first")).toBeTruthy();
+});
+it("disables navigation while a page is loading", () => {
+  render(
+    <Pagination
+      page={2}
+      canPrevious
+      canNext
+      isLoading
+      onPrevious={() => {}}
+      onNext={() => {}}
+    />,
+  );
+  for (const button of screen.getAllByRole("button"))
+    expect(button.hasAttribute("disabled")).toBe(true);
+});

package/src/react/workflows/Pagination.tsx

@@ -0,0 +1,93 @@
+"use client";
+import { useState, type ReactNode } from "react";
+
+/** Cursor history for bounded server pages. Changing scope resets navigation. */
+export function useCursorPagination(scopeKey: string) {
+  const initial = { scopeKey, cursors: [null] as (string | null)[], index: 0 };
+  const [state, setState] = useState(initial);
+  const current = state.scopeKey === scopeKey ? state : initial;
+  if (state.scopeKey !== scopeKey) setState(initial);
+  return {
+    cursor: current.cursors[current.index],
+    page: current.index + 1,
+    canPrevious: current.index > 0,
+    previous: () =>
+      setState((previous) => ({
+        ...previous,
+        index: Math.max(0, previous.index - 1),
+      })),
+    next: (cursor: string) =>
+      setState((previous) => ({
+        ...previous,
+        cursors: [...previous.cursors.slice(0, previous.index + 1), cursor],
+        index: previous.index + 1,
+      })),
+  };
+}
+export type PaginationProps = {
+  page: number;
+  canPrevious: boolean;
+  canNext: boolean;
+  isLoading?: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+  previousLabel?: string;
+  nextLabel?: string;
+  pageLabel?: string;
+  children?: (state: {
+    pageLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+    previousDisabled: boolean;
+    nextDisabled: boolean;
+    previous: () => void;
+    next: () => void;
+  }) => ReactNode;
+};
+/** Unstyled navigation with render props for application design systems. */
+export function Pagination({
+  page,
+  canPrevious,
+  canNext,
+  isLoading = false,
+  onPrevious,
+  onNext,
+  previousLabel = "Previous",
+  nextLabel = "Next",
+  pageLabel = `Page ${page}`,
+  children,
+}: PaginationProps) {
+  const previousDisabled = isLoading || !canPrevious;
+  const nextDisabled = isLoading || !canNext;
+  const state = {
+    pageLabel,
+    previousLabel,
+    nextLabel,
+    previousDisabled,
+    nextDisabled,
+    previous: () => {
+      if (!previousDisabled) onPrevious();
+    },
+    next: () => {
+      if (!nextDisabled) onNext();
+    },
+  };
+  if (children) return <>{children(state)}</>;
+  return (
+    <nav aria-label="Pagination">
+      <button
+        type="button"
+        disabled={previousDisabled}
+        onClick={state.previous}
+      >
+        {previousLabel}
+      </button>
+      <span role="status" aria-live="polite">
+        {pageLabel}
+      </span>
+      <button type="button" disabled={nextDisabled} onClick={state.next}>
+        {nextLabel}
+      </button>
+    </nav>
+  );
+}

package/src/react/workflows/PlanPricingEditor.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, expect, it, vi } from "vitest";
+import { PlanPricingEditor } from "./PlanPricingEditor.js";
+afterEach(cleanup);
+it("validates money and percentages before saving minor units", async () => {
+  const save = vi.fn().mockResolvedValue(undefined);
+  render(
+    <PlanPricingEditor
+      plan={{
+        id: "starter",
+        name: "Starter",
+        monthlyAmount: 900,
+        feeBasisPoints: 900,
+        version: 0,
+      }}
+      onSave={save}
+    />,
+  );
+  const monthly = screen.getByLabelText("Monthly price (USD)");
+  await userEvent.clear(monthly);
+  await userEvent.type(monthly, "12.34");
+  const fee = screen.getByLabelText("Sale fee (%)");
+  await userEvent.clear(fee);
+  await userEvent.type(fee, "7.5");
+  await userEvent.click(screen.getByRole("button", { name: "Save pricing" }));
+  expect(save).toHaveBeenCalledWith({
+    monthlyAmount: 1234,
+    feeBasisPoints: 750,
+    affiliateBasisPoints: 0,
+    expectedVersion: 0,
+  });
+  expect(screen.getByRole("status").textContent).toContain("saved");
+  await userEvent.clear(fee);
+  await userEvent.type(fee, "101");
+  await userEvent.click(screen.getByRole("button", { name: "Save pricing" }));
+  expect(save).toHaveBeenCalledTimes(1);
+  expect(screen.getByRole("alert").textContent).toMatch(/fee/i);
+  await userEvent.clear(fee);
+  await userEvent.click(screen.getByRole("button", { name: "Save pricing" }));
+  expect(save).toHaveBeenLastCalledWith({
+    monthlyAmount: 1234,
+    feeBasisPoints: null,
+    affiliateBasisPoints: 0,
+    expectedVersion: 0,
+  });
+});
+it("validates affiliate payout percentages and saves basis points", async () => {
+  const save = vi.fn().mockResolvedValue(undefined);
+  render(
+    <PlanPricingEditor
+      plan={{
+        id: "growth",
+        name: "Growth",
+        monthlyAmount: 4900,
+        feeBasisPoints: 490,
+        affiliateBasisPoints: 2000,
+        version: 1,
+      }}
+      onSave={save}
+    />,
+  );
+  const share = screen.getByLabelText("Affiliate payout (%)");
+  await userEvent.clear(share);
+  await userEvent.type(share, "12.5");
+  await userEvent.click(screen.getByRole("button", { name: "Save pricing" }));
+  expect(save).toHaveBeenLastCalledWith({
+    monthlyAmount: 4900,
+    feeBasisPoints: 490,
+    affiliateBasisPoints: 1250,
+    expectedVersion: 1,
+  });
+  await userEvent.clear(share);
+  await userEvent.type(share, "100.001");
+  await userEvent.click(screen.getByRole("button", { name: "Save pricing" }));
+  expect(save).toHaveBeenCalledTimes(1);
+  expect(screen.getByRole("alert").textContent).toMatch(/affiliate/i);
+});

package/src/react/workflows/PlanPricingEditor.tsx

@@ -0,0 +1,156 @@
+"use client";
+import { useId, useState, type ReactNode } from "react";
+import { useWorkflowAction } from "./useWorkflowAction.js";
+export type PlanPricing = {
+  id: string;
+  name: string;
+  monthlyAmount: number;
+  feeBasisPoints: number | null;
+  affiliateBasisPoints?: number | null;
+  version: number;
+};
+export type PlanPricingUpdate = {
+  monthlyAmount: number;
+  feeBasisPoints: number | null;
+  affiliateBasisPoints?: number | null;
+  expectedVersion: number;
+};
+export type PlanPricingEditorState = {
+  monthlyPrice: string;
+  saleFee: string;
+  affiliateShare: string;
+  setMonthlyPrice: (value: string) => void;
+  setSaleFee: (value: string) => void;
+  setAffiliateShare: (value: string) => void;
+  save: () => Promise<unknown>;
+  isPending: boolean;
+  error: string | null;
+  message: string | undefined;
+};
+export type PlanPricingEditorProps = {
+  plan: PlanPricing;
+  onSave: (update: PlanPricingUpdate) => Promise<unknown>;
+  children?: (state: PlanPricingEditorState) => ReactNode;
+};
+/** Unstyled store-plan pricing editor. Authorization and Stripe price creation belong on the server. */
+export function PlanPricingEditor({
+  plan,
+  onSave,
+  children,
+}: PlanPricingEditorProps) {
+  const id = useId();
+  const scope = `${plan.id}:${plan.version}`;
+  const initial = {
+    scope,
+    affiliateShare: String((plan.affiliateBasisPoints ?? 0) / 100),
+    monthlyPrice: (plan.monthlyAmount / 100).toFixed(2),
+    saleFee:
+      plan.feeBasisPoints === null ? "" : String(plan.feeBasisPoints / 100),
+  };
+  const [fields, setFields] = useState(initial);
+  if (fields.scope !== scope) setFields(initial);
+  const action = useWorkflowAction(async () => {
+    if (!/^\d+(\.\d{1,2})?$/.test(fields.monthlyPrice.trim()))
+      throw new Error(
+        "Enter a positive monthly price with at most two decimal places.",
+      );
+    const monthlyAmount = Math.round(Number(fields.monthlyPrice) * 100);
+    if (!Number.isSafeInteger(monthlyAmount) || monthlyAmount <= 0)
+      throw new Error("Enter a positive monthly price.");
+    const feeBasisPoints =
+      fields.saleFee.trim() === ""
+        ? null
+        : Math.round(Number(fields.saleFee) * 100);
+    if (
+      feeBasisPoints !== null &&
+      (!/^\d+(\.\d{1,2})?$/.test(fields.saleFee.trim()) ||
+        !Number.isSafeInteger(feeBasisPoints) ||
+        feeBasisPoints < 0 ||
+        feeBasisPoints > 10000)
+    )
+      throw new Error(
+        "Enter a sale fee from 0 to 100%, with at most two decimal places, or leave it blank for Stripe processing only.",
+      );
+    const affiliateBasisPoints = Math.round(
+      Number(fields.affiliateShare) * 100,
+    );
+    if (
+      !/^\d+(\.\d{1,2})?$/.test(fields.affiliateShare.trim()) ||
+      !Number.isSafeInteger(affiliateBasisPoints) ||
+      affiliateBasisPoints < 0 ||
+      affiliateBasisPoints > 10000
+    )
+      throw new Error(
+        "Enter an affiliate payout from 0 to 100%, with at most two decimal places.",
+      );
+    await onSave({
+      monthlyAmount,
+      feeBasisPoints,
+      affiliateBasisPoints,
+      expectedVersion: plan.version,
+    });
+    return "Pricing saved. Existing subscriptions keep their monthly price.";
+  }, plan.id);
+  const state: PlanPricingEditorState = {
+    ...fields,
+    setMonthlyPrice: (monthlyPrice) =>
+      setFields((previous) => ({ ...previous, monthlyPrice })),
+    setSaleFee: (saleFee) =>
+      setFields((previous) => ({ ...previous, saleFee })),
+    setAffiliateShare: (affiliateShare) =>
+      setFields((previous) => ({ ...previous, affiliateShare })),
+    save: action.run,
+    isPending: action.isPending,
+    error: action.error,
+    message: action.result,
+  };
+  if (children) return <>{children(state)}</>;
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        void state.save();
+      }}
+      aria-label={`${plan.name} pricing`}
+    >
+      <h3>{plan.name}</h3>
+      <label htmlFor={`${id}-monthly`}>Monthly price (USD)</label>
+      <input
+        id={`${id}-monthly`}
+        inputMode="decimal"
+        value={state.monthlyPrice}
+        disabled={state.isPending}
+        onChange={(event) => state.setMonthlyPrice(event.target.value)}
+      />
+      <label htmlFor={`${id}-fee`}>Sale fee (%)</label>
+      <input
+        id={`${id}-fee`}
+        inputMode="decimal"
+        value={state.saleFee}
+        disabled={state.isPending}
+        onChange={(event) => state.setSaleFee(event.target.value)}
+      />
+      <p>
+        Leave the sale fee blank for Stripe processing only. The seller always
+        covers actual Stripe processing costs.
+      </p>
+      <label htmlFor={`${id}-affiliate`}>Affiliate payout (%)</label>
+      <input
+        id={`${id}-affiliate`}
+        inputMode="decimal"
+        value={state.affiliateShare}
+        disabled={state.isPending}
+        onChange={(event) => state.setAffiliateShare(event.target.value)}
+      />
+      <p>
+        Percentage of a referred sale after the sale fee. The seller receives
+        the remainder.
+      </p>
+      {state.error && <p role="alert">{state.error}</p>}
+      {state.message && <p role="status">{state.message}</p>}
+      <button type="submit" disabled={state.isPending}>
+        {state.isPending ? "Saving…" : "Save pricing"}
+      </button>
+    </form>
+  );
+}