@fantastic.dev/better-stripe 0.7.0 → 0.8.0

package/src/component/connect/mutations.ts

@@ -1,9 +1,10 @@
 import { v } from "convex/values";
 
 import type { Doc, Id } from "../_generated/dataModel";
-import { mutation, type MutationCtx } from "../_generated/server";
+import { mutation } from "../_generated/server";
 import { feeRoutingFields } from "../lib/fees";
-import { computeReversalSlices } from "../lib/reversals";
+import { computeReversalSlices, deriveReversalState } from "../lib/reversals";
+import { paymentSeller } from "../lib/paymentSeller";
 import {
   disputeFields,
   paymentStatusValidator,
@@ -12,23 +13,7 @@ import {
   transferFields,
 } from "./validators";
 
-async function paymentSeller(
-  ctx: MutationCtx,
-  stripePaymentIntentId?: string,
-): Promise<string | undefined> {
-  if (!stripePaymentIntentId) return undefined;
-  const payment = await ctx.db
-    .query("payments")
-    .withIndex("by_stripe_payment_intent_id", (q) =>
-      q.eq("stripePaymentIntentId", stripePaymentIntentId),
-    )
-    .first();
-  return payment?.destinationAccountId;
-}
-
-// =============================================================================
-// PAYMENT MUTATIONS
-// =============================================================================
+// Payment mutations
 
 export const upsertPayment = mutation({
   args: {
@@ -125,9 +110,7 @@ export const upsertPayment = mutation({
   },
 });
 
-// =============================================================================
-// PAYOUT MUTATIONS
-// =============================================================================
+// Payout mutations
 
 export const upsertPayout = mutation({
   args: {
@@ -332,30 +315,6 @@ export const upsertDispute = mutation({
 // TRANSFER MUTATIONS (ledger — BTS-12)
 // =============================================================================
 
-/**
- * Derive reversal status + transfer status from a (transfer amount, cumulative
- * reversed amount) pair. Shared by upsert and reversal so the three reversal
- * fields can never drift.
- */
-function deriveReversalState(
-  amount: number,
-  reversedAmount: number,
-  baseStatus: "pending" | "paid" | "failed" | "reversed",
-) {
-  const reversalStatus =
-    reversedAmount <= 0
-      ? undefined
-      : reversedAmount >= amount
-        ? ("fully_reversed" as const)
-        : ("partially_reversed" as const);
-  return {
-    reversedAmount: reversedAmount > 0 ? reversedAmount : undefined,
-    reversalStatus,
-    status:
-      reversalStatus === "fully_reversed" ? ("reversed" as const) : baseStatus,
-  };
-}
-
 export const upsertTransfer = mutation({
   args: transferFields,
   returns: v.null(),

package/src/component/connect/schema.ts

@@ -34,9 +34,10 @@ export const payoutsTable = defineTable(payoutFields)
  * (BTS-103). One row per payment intent; consumed and deleted by
  * `upsertPayment`'s insert branch.
  */
-export const pendingFeeRefundsTable = defineTable(
-  pendingFeeRefundFields,
-).index("by_stripe_payment_intent_id", ["stripePaymentIntentId"]);
+export const pendingFeeRefundsTable = defineTable(pendingFeeRefundFields).index(
+  "by_stripe_payment_intent_id",
+  ["stripePaymentIntentId"],
+);
 
 /**
  * Refunds. Compound status indexes follow Plan 002: filtered list queries

package/src/component/connect.test.ts

@@ -15,11 +15,7 @@ describe("connect — refunds", () => {
       stripePaymentIntentId?: string;
       accountId?: string;
       status:
-        | "pending"
-        | "requires_action"
-        | "succeeded"
-        | "failed"
-        | "canceled";
+        "pending" | "requires_action" | "succeeded" | "failed" | "canceled";
     },
   ) => {
     await t.mutation(api.connect.mutations.upsertRefund, {

package/src/component/lib/paymentSeller.ts

@@ -0,0 +1,15 @@
+import type { MutationCtx } from "../_generated/server";
+
+export async function paymentSeller(
+  ctx: MutationCtx,
+  stripePaymentIntentId?: string,
+): Promise<string | undefined> {
+  if (!stripePaymentIntentId) return undefined;
+  const payment = await ctx.db
+    .query("payments")
+    .withIndex("by_stripe_payment_intent_id", (q) =>
+      q.eq("stripePaymentIntentId", stripePaymentIntentId),
+    )
+    .first();
+  return payment?.destinationAccountId;
+}

package/src/component/lib/reversals.ts

@@ -64,10 +64,14 @@ export function computeReversalSlices(
         );
         break;
       case "fraction":
-        to = Math.min(leg.amount, Math.max(from, Math.round(leg.amount * fraction)));
+        to = Math.min(
+          leg.amount,
+          Math.max(from, Math.round(leg.amount * fraction)),
+        );
         break;
       case "amount": {
-        const prorata = total > 0 ? Math.round((mode.amount * leg.amount) / total) : 0;
+        const prorata =
+          total > 0 ? Math.round((mode.amount * leg.amount) / total) : 0;
         const take = Math.max(0, Math.min(prorata, budget, leg.amount - from));
         budget -= take;
         to = from + take;
@@ -111,3 +115,27 @@ export function computeReversalSlices(
 
   return slices;
 }
+
+/**
+ * Derive reversal status + transfer status from a (transfer amount, cumulative
+ * reversed amount) pair. Shared by upsert and reversal so the three reversal
+ * fields can never drift.
+ */
+export function deriveReversalState(
+  amount: number,
+  reversedAmount: number,
+  baseStatus: "pending" | "paid" | "failed" | "reversed",
+) {
+  const reversalStatus =
+    reversedAmount <= 0
+      ? undefined
+      : reversedAmount >= amount
+        ? ("fully_reversed" as const)
+        : ("partially_reversed" as const);
+  return {
+    reversedAmount: reversedAmount > 0 ? reversedAmount : undefined,
+    reversalStatus,
+    status:
+      reversalStatus === "fully_reversed" ? ("reversed" as const) : baseStatus,
+  };
+}

package/src/component/subscription-scoping.test.ts

@@ -64,7 +64,11 @@ describe("per-store subscription scoping (BTS-19)", () => {
 
     const active = await t.query(
       api.billing.queries.listSubscriptionsByUserAndStore,
-      { userId: "buyer_1", destinationAccountId: "acct_store_a", status: "active" },
+      {
+        userId: "buyer_1",
+        destinationAccountId: "acct_store_a",
+        status: "active",
+      },
     );
     expect(active.map((s) => s.stripeSubscriptionId)).toEqual(["sub_active"]);
   });

package/src/component/triggers.test.ts

@@ -236,10 +236,13 @@ describe("webhook event ledger", () => {
     it("fresh processing dedupes", async () => {
       const t = convexTest(schema, modules);
 
-      const first = await t.mutation(api.webhooks.mutations.insertWebhookEvent, {
-        stripeEventId: "evt_stale_001",
-        eventType: "invoice.paid",
-      });
+      const first = await t.mutation(
+        api.webhooks.mutations.insertWebhookEvent,
+        {
+          stripeEventId: "evt_stale_001",
+          eventType: "invoice.paid",
+        },
+      );
       expect(first).toBe("inserted");
 
       // Immediate second insert — row is fresh processing, must dedupe.

package/src/react/components/BuyerBillingView.render.test.tsx

@@ -69,7 +69,10 @@ describe("BuyerBillingView", () => {
 
   it("renders the empty label with no subscriptions and no saved card", () => {
     const html = renderToStaticMarkup(
-      createElement(BuyerBillingView, { subscriptions: [], paymentMethod: null }),
+      createElement(BuyerBillingView, {
+        subscriptions: [],
+        paymentMethod: null,
+      }),
     );
     expect(html).toContain("No billing yet");
   });
@@ -122,7 +125,9 @@ describe("BuyerBillingView", () => {
       createElement(BuyerBillingView, {
         subscriptions: [activeSub],
         paymentMethod,
-        updateCardSlot: createElement("div", { "data-testid": "embedded-card" }),
+        updateCardSlot: createElement("div", {
+          "data-testid": "embedded-card",
+        }),
       }),
     );
     expect(html).toContain('data-testid="embedded-card"');

package/src/react/components/ConnectProvider.live.test.tsx

@@ -0,0 +1,61 @@
+// @vitest-environment jsdom
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import type { ReactNode } from "react";
+const stripe = vi.hoisted(() => ({ initialize: vi.fn(), update: vi.fn() }));
+vi.mock("@stripe/connect-js/pure.js", () => ({
+  loadConnectAndInitialize: stripe.initialize,
+}));
+vi.mock("@stripe/connect-js", () => ({
+  loadConnectAndInitialize: stripe.initialize,
+}));
+vi.mock("@stripe/react-connect-js", () => ({
+  ConnectComponentsProvider: ({ children }: { children: ReactNode }) =>
+    children,
+}));
+import { ConnectProvider } from "./ConnectProvider.js";
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+it("updates appearance and locale while retaining the active Connect session", async () => {
+  stripe.initialize.mockReturnValue({ update: stripe.update });
+  const first = vi.fn(async () => "first_session");
+  const next = vi.fn(async () => "refreshed_session");
+  const { rerender } = render(
+    <ConnectProvider
+      publishableKey="pk_test_one"
+      fetchClientSecret={first}
+      locale="en"
+    />,
+  );
+  const fetch = stripe.initialize.mock.calls[0][0].fetchClientSecret;
+  expect(await fetch()).toBe("first_session");
+  rerender(
+    <ConnectProvider
+      publishableKey="pk_test_one"
+      fetchClientSecret={next}
+      locale="fr"
+      appearance={{ variables: { colorPrimary: "#123456" } }}
+    />,
+  );
+  expect(stripe.initialize).toHaveBeenCalledTimes(1);
+  expect(stripe.update).toHaveBeenLastCalledWith({
+    locale: "fr",
+    appearance: { variables: { colorPrimary: "#123456" } },
+  });
+  expect(await fetch()).toBe("refreshed_session");
+  expect(next).toHaveBeenCalledTimes(1);
+});
+it("creates a separate Connect instance when the publishable key changes", () => {
+  stripe.initialize.mockReturnValue({ update: stripe.update });
+  const fetch = async () => "session";
+  const { rerender } = render(
+    <ConnectProvider publishableKey="pk_test_one" fetchClientSecret={fetch} />,
+  );
+  rerender(
+    <ConnectProvider publishableKey="pk_test_two" fetchClientSecret={fetch} />,
+  );
+  expect(stripe.initialize).toHaveBeenCalledTimes(2);
+  expect(stripe.initialize.mock.calls[1][0].publishableKey).toBe("pk_test_two");
+});

package/src/react/components/ConnectProvider.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 
 import type { IStripeConnectInitParams } from "@stripe/connect-js";
-import { loadConnectAndInitialize } from "@stripe/connect-js";
+import { loadConnectAndInitialize } from "@stripe/connect-js/pure.js";
 import { ConnectComponentsProvider } from "@stripe/react-connect-js";
 
 export type ConnectProviderProps = {
@@ -32,24 +32,38 @@ export type ConnectProviderProps = {
  * ConnectJS renders client-only iframes; on the server this component renders
  * its tree but the embedded surfaces only materialize in the browser.
  */
-export function ConnectProvider({
+export function ConnectProvider(props: ConnectProviderProps) {
+  return <ConnectInstanceProvider key={props.publishableKey} {...props} />;
+}
+function ConnectInstanceProvider({
   publishableKey,
   fetchClientSecret,
   appearance,
   locale,
   children,
 }: ConnectProviderProps) {
+  const fetcher = useRef(fetchClientSecret);
+  useEffect(() => {
+    fetcher.current = fetchClientSecret;
+  }, [fetchClientSecret]);
   // Lazy useState initializer: exactly one Connect instance per mount, stable
   // across re-renders (loadConnectAndInitialize returns synchronously).
   const [connectInstance] = useState(() =>
     loadConnectAndInitialize({
       publishableKey,
-      fetchClientSecret,
+      fetchClientSecret: () => fetcher.current(),
       ...(appearance !== undefined ? { appearance } : {}),
       ...(locale !== undefined ? { locale } : {}),
     }),
   );
 
+  useEffect(() => {
+    if (appearance !== undefined || locale !== undefined)
+      connectInstance.update({
+        ...(appearance !== undefined ? { appearance } : {}),
+        ...(locale !== undefined ? { locale } : {}),
+      });
+  }, [connectInstance, appearance, locale]);
   return (
     <ConnectComponentsProvider connectInstance={connectInstance}>
       {children}

package/src/react/components/ConnectStatusBadge.tsx

@@ -3,10 +3,7 @@
 import type { ReactNode } from "react";
 
 export type ConnectStatus =
-  | "pending"
-  | "in_progress"
-  | "complete"
-  | "restricted";
+  "pending" | "in_progress" | "complete" | "restricted";
 
 export type ConnectStatusDetails = {
   detailsSubmitted: boolean;

package/src/react/components/DisputeDetail.render.test.tsx

@@ -74,7 +74,11 @@ describe("DisputeDetail", () => {
       createElement(DisputeDetail, {
         dispute: {
           ...dispute,
-          countdown: { dueBy: dispute.evidenceDueBy, daysRemaining: -2, isOverdue: true },
+          countdown: {
+            dueBy: dispute.evidenceDueBy,
+            daysRemaining: -2,
+            isOverdue: true,
+          },
         },
       }),
     );

package/src/react/components/EarningsSummary.render.test.tsx

@@ -73,9 +73,7 @@ describe("EarningsSummary", () => {
   });
 
   it("renders gross, reversals, net, and paid-out amounts", () => {
-    const html = renderToStaticMarkup(
-      createElement(EarningsSummary, earnings),
-    );
+    const html = renderToStaticMarkup(createElement(EarningsSummary, earnings));
     expect(html).toContain("Gross");
     expect(html).toContain("$105.00");
     // Honest label per the BTS-36 review — NOT "Fees".
@@ -89,9 +87,7 @@ describe("EarningsSummary", () => {
   });
 
   it("announces the latest payout with amount and status", () => {
-    const html = renderToStaticMarkup(
-      createElement(EarningsSummary, earnings),
-    );
+    const html = renderToStaticMarkup(createElement(EarningsSummary, earnings));
     // po_latest (newest _creationTime) wins over po_old.
     expect(html).toContain("Latest payout of $40.00 — in_transit");
   });

package/src/react/components/EmbeddedDisputes.render.test.tsx

@@ -21,12 +21,15 @@ const loadConnectAndInitialize = vi.fn(
   }),
 );
 
-vi.mock("@stripe/connect-js", () => ({
+vi.mock("@stripe/connect-js/pure.js", () => ({
   loadConnectAndInitialize: (initParams: unknown) =>
     loadConnectAndInitialize(initParams as Record<string, unknown>),
 }));
 
-vi.mock("@stripe/react-connect-js", () => ({
+vi.mock("@stripe/react-connect-js", async () => ({
+  ...(await vi.importActual<typeof import("@stripe/react-connect-js")>(
+    "@stripe/react-connect-js",
+  )),
   ConnectComponentsProvider: ({
     connectInstance,
     children,
@@ -73,9 +76,8 @@ describe("ConnectProvider", () => {
     expect(loadConnectAndInitialize).toHaveBeenCalledTimes(1);
     const initParams = loadConnectAndInitialize.mock.calls[0][0];
     expect(initParams.publishableKey).toBe("pk_test_123");
-    // The EXACT fetcher reference is handed over — the Connect runtime calls
-    // it to obtain the createDisputeSession clientSecret; render must not.
-    expect(initParams.fetchClientSecret).toBe(fetchClientSecret);
+    // The Connect runtime receives a lazy fetcher. Rendering does not request a session.
+    expect(initParams.fetchClientSecret).toEqual(expect.any(Function));
     expect(fetchClientSecret).not.toHaveBeenCalled();
     // Provider rendered with an instance, children inside.
     expect(html).toContain('data-testid="connect-provider"');

package/src/react/components/EmbeddedDisputes.tsx

@@ -25,7 +25,10 @@ export type EmbeddedDisputesProps = {
  * Must be rendered inside a {@link ConnectProvider} whose `fetchClientSecret`
  * returns that session's `clientSecret`.
  */
-export function EmbeddedDisputes({ payment, className }: EmbeddedDisputesProps) {
+export function EmbeddedDisputes({
+  payment,
+  className,
+}: EmbeddedDisputesProps) {
   return (
     <div className={className}>
       {payment ? (

package/src/react/components/EvidenceForm.render.test.tsx

@@ -19,10 +19,7 @@ import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
 
 import { EvidenceForm as BarrelExport } from "../index.js";
-import {
-  EvidenceForm,
-  type EvidenceFormRenderProps,
-} from "./EvidenceForm.js";
+import { EvidenceForm, type EvidenceFormRenderProps } from "./EvidenceForm.js";
 
 const allFields = {
   productDescription: "Ceramics Masterclass, lifetime access",
@@ -33,10 +30,7 @@ const allFields = {
 
 /** Render via the children prop and hand back the captured render props. */
 function capture(
-  props: Omit<
-    Parameters<typeof EvidenceForm>[0],
-    "children"
-  >,
+  props: Omit<Parameters<typeof EvidenceForm>[0], "children">,
 ): EvidenceFormRenderProps {
   let received: EvidenceFormRenderProps | undefined;
   renderToStaticMarkup(

package/src/react/components/SplitBreakdown.render.test.tsx

@@ -34,8 +34,18 @@ const leg = (over: Record<string, unknown>) => ({
 
 const totals = {
   legs: [
-    leg({ stripeTransferId: "tr_store", role: "store", amount: 8000, net: 8000 }),
-    leg({ stripeTransferId: "tr_aff", role: "affiliate", amount: 1000, net: 1000 }),
+    leg({
+      stripeTransferId: "tr_store",
+      role: "store",
+      amount: 8000,
+      net: 8000,
+    }),
+    leg({
+      stripeTransferId: "tr_aff",
+      role: "affiliate",
+      amount: 1000,
+      net: 1000,
+    }),
   ],
   store: 8000,
   affiliate: 1000,
@@ -79,7 +89,10 @@ describe("SplitBreakdown", () => {
       createElement(SplitBreakdown, {
         breakdown: {
           ...totals,
-          legs: [...totals.legs, leg({ stripeTransferId: "tr_misc", amount: 500, net: 500 })],
+          legs: [
+            ...totals.legs,
+            leg({ stripeTransferId: "tr_misc", amount: 500, net: 500 }),
+          ],
           other: 500,
           recipientsTotal: 9500,
           platform: 500,
@@ -136,8 +149,18 @@ describe("SplitBreakdown", () => {
     expect(received!.breakdown).toBe(totals);
     expect(received!.lines).toEqual([
       { key: "store", label: "Store", amount: 8000, amountLabel: "$80.00" },
-      { key: "affiliate", label: "Affiliate", amount: 1000, amountLabel: "$10.00" },
-      { key: "platform", label: "Platform", amount: 1000, amountLabel: "$10.00" },
+      {
+        key: "affiliate",
+        label: "Affiliate",
+        amount: 1000,
+        amountLabel: "$10.00",
+      },
+      {
+        key: "platform",
+        label: "Platform",
+        amount: 1000,
+        amountLabel: "$10.00",
+      },
     ]);
     expect(html).toBe("<p>3</p>");
   });

package/src/react/components/SplitBreakdown.tsx

@@ -75,7 +75,11 @@ export function SplitBreakdown({
   const money = (amount: number) => formatPrice(amount, currency, locale);
 
   const lines: SplitBreakdownLine[] = [
-    { key: "store" as const, label: labels?.store ?? "Store", amount: breakdown.store },
+    {
+      key: "store" as const,
+      label: labels?.store ?? "Store",
+      amount: breakdown.store,
+    },
     {
       key: "affiliate" as const,
       label: labels?.affiliate ?? "Affiliate",
@@ -83,7 +87,13 @@ export function SplitBreakdown({
     },
     // The catch-all bucket only earns a line when it carries money.
     ...(breakdown.other > 0
-      ? [{ key: "other" as const, label: labels?.other ?? "Other", amount: breakdown.other }]
+      ? [
+          {
+            key: "other" as const,
+            label: labels?.other ?? "Other",
+            amount: breakdown.other,
+          },
+        ]
       : []),
     {
       key: "platform" as const,

package/src/react/hooks/useCheckoutSession.ts

@@ -14,8 +14,7 @@ function extractErrorMessage(error: unknown, fallback: string): string {
  * Result of a checkout confirmation attempt.
  */
 export type CheckoutConfirmResult =
-  | { type: "success" }
-  | { type: "error"; message: string };
+  { type: "success" } | { type: "error"; message: string };
 
 /**
  * Checkout session state and actions.

package/src/react/hooks/useConfirmPayment.ts

@@ -8,8 +8,7 @@ import { useElements, useStripe } from "@stripe/react-stripe-js";
  * Normalized result from a Stripe confirmation operation.
  */
 export type StripeConfirmResult =
-  | { success: true }
-  | { success: false; error: string };
+  { success: true } | { success: false; error: string };
 
 /**
  * Hook for confirming a PaymentIntent (immediate charge) or SetupIntent (future charge / trial).

package/src/react/hooks/useEarnings.test.ts

@@ -48,8 +48,20 @@ const earningsResult = {
 };
 
 const previewPayouts = [
-  { stripePayoutId: "po_1", accountId: "acct_store", amount: 4000, currency: "usd", status: "paid" },
-  { stripePayoutId: "po_2", accountId: "acct_store", amount: 1500, currency: "usd", status: "pending" },
+  {
+    stripePayoutId: "po_1",
+    accountId: "acct_store",
+    amount: 4000,
+    currency: "usd",
+    status: "paid",
+  },
+  {
+    stripePayoutId: "po_2",
+    accountId: "acct_store",
+    amount: 1500,
+    currency: "usd",
+    status: "pending",
+  },
 ];
 
 const payoutsResult = {
@@ -70,7 +82,11 @@ describe("createUseEarnings", () => {
         [payoutsRef, payoutsResult],
       ]),
     );
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings("acct_store");
 
@@ -92,7 +108,11 @@ describe("createUseEarnings", () => {
         [payoutsRef, payoutsResult],
       ]),
     );
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings("acct_store");
 
@@ -111,7 +131,11 @@ describe("createUseEarnings", () => {
         [payoutsRef, undefined],
       ]),
     );
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings("acct_store");
 
@@ -125,7 +149,11 @@ describe("createUseEarnings", () => {
 
   it("skips both queries when the account id is undefined", () => {
     const mockUseQuery = useQueryFor(new Map());
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings(undefined);
 
@@ -143,11 +171,18 @@ describe("createUseEarnings", () => {
   it("treats empty ledgers as loaded with zero totals", () => {
     const mockUseQuery = useQueryFor(
       new Map<unknown, unknown>([
-        [earningsRef, { gross: 0, reversed: 0, transferCount: 0, transfers: [] }],
+        [
+          earningsRef,
+          { gross: 0, reversed: 0, transferCount: 0, transfers: [] },
+        ],
         [payoutsRef, { paidOut: 0, payoutCount: 0, payouts: [] }],
       ]),
     );
-    const useEarnings = createUseEarnings(mockUseQuery, earningsRef, payoutsRef);
+    const useEarnings = createUseEarnings(
+      mockUseQuery,
+      earningsRef,
+      payoutsRef,
+    );
 
     const result = useEarnings("acct_new");