@fantastic.dev/better-stripe 0.13.0 → 0.15.0

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

@@ -73,3 +73,76 @@ it("offers the shared example countries in the native onboarding UI", async () =
   );
   expect(screen.getByRole("option", { name: "United Kingdom" })).toBeTruthy();
 });
+
+for (const flow of ["create", "continue"] as const) {
+  for (const transition of ["unmount", "scope", "current"] as const) {
+    it(`${flow} navigates only while current after ${transition}`, async () => {
+      let resolve!: (value: { url: string; onboardingUrl: string }) => void;
+      const response = new Promise<{ url: string; onboardingUrl: string }>(
+        (done) => {
+          resolve = done;
+        },
+      );
+      const navigate = vi.fn();
+      const { result, rerender, unmount } = renderHook(
+        ({ scope }) =>
+          useOnboarding({
+            scopeKey: scope,
+            createAccount: () => response,
+            continueOnboarding: () => response,
+            onNavigate: navigate,
+          }),
+        { initialProps: { scope: "seller-a" } },
+      );
+      let pending!: Promise<unknown>;
+      act(() => {
+        pending = result.current[flow]();
+      });
+      if (transition === "unmount") unmount();
+      if (transition === "scope") rerender({ scope: "seller-b" });
+      await act(async () => {
+        resolve({
+          url: "https://connect.stripe.com/setup",
+          onboardingUrl: "https://connect.stripe.com/setup",
+        });
+        await pending;
+      });
+      expect(navigate).toHaveBeenCalledTimes(transition === "current" ? 1 : 0);
+    });
+  }
+}
+
+for (const flow of ["create", "continue"] as const) {
+  it(`${flow} suppresses the default location assignment after unmount`, async () => {
+    let resolve!: (value: { url: string; onboardingUrl: string }) => void;
+    const response = new Promise<{ url: string; onboardingUrl: string }>(
+      (done) => {
+        resolve = done;
+      },
+    );
+    const assign = vi.fn();
+    const { result, unmount } = renderHook(() =>
+      useOnboarding({
+        scopeKey: "seller",
+        createAccount: () => response,
+        continueOnboarding: () => response,
+      }),
+    );
+    let pending!: Promise<unknown>;
+    act(() => {
+      pending = result.current[flow]();
+    });
+    unmount();
+    vi.stubGlobal("window", { location: { assign } });
+    try {
+      resolve({
+        url: "https://connect.stripe.com/setup",
+        onboardingUrl: "https://connect.stripe.com/setup",
+      });
+      await pending;
+      expect(assign).not.toHaveBeenCalled();
+    } finally {
+      vi.unstubAllGlobals();
+    }
+  });
+}

package/src/react/workflows/Onboarding.tsx

@@ -51,10 +51,13 @@ export function useOnboarding(props: OnboardingActions) {
             ? result.url
             : undefined;
       if (!url) throw new Error("Stripe did not return an onboarding URL.");
-      (props.onNavigate ?? ((url) => window.location.assign(url)))(url);
-      return true;
+      return url;
     },
     props.scopeKey,
+    (url) => {
+      if (typeof url === "string")
+        (props.onNavigate ?? ((url) => window.location.assign(url)))(url);
+    },
   );
   const run = action.run;
   return {
@@ -69,9 +72,9 @@ export function useOnboarding(props: OnboardingActions) {
     createError: operation === "create" ? action.error : null,
     linkError: operation === "link" ? action.error : null,
     restartError: operation === "close" ? action.error : null,
-    create: () => run("create"),
-    continue: () => run("link"),
-    close: () => run("close"),
+    create: async () => ((await run("create")) ? true : undefined),
+    continue: async () => ((await run("link")) ? true : undefined),
+    close: async () => ((await run("close")) ? true : undefined),
   };
 }
 export type OnboardingAccount = {

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

@@ -0,0 +1,127 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, expect, it, vi } from "vitest";
+const confirm = vi.hoisted(() => vi.fn());
+vi.mock("../components/StripeProvider.js", () => ({
+  StripeProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+vi.mock("@stripe/react-stripe-js", () => ({
+  PaymentElement: () => <div>Card details</div>,
+}));
+vi.mock("../hooks/useConfirmPayment.js", () => ({
+  useConfirmPayment: () => ({
+    confirmSetup: confirm,
+    isReady: true,
+    hasElements: true,
+  }),
+}));
+import { SaveCard } from "./SaveCard.js";
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+it("retries provisioning with the same logical request and requires explicit consent before confirmation", async () => {
+  const create = vi
+    .fn()
+    .mockRejectedValueOnce(new Error("offline"))
+    .mockResolvedValue({ setupIntentId: "seti_one", clientSecret: "secret" });
+  const success = vi.fn();
+  confirm.mockResolvedValue({ success: true });
+  render(
+    <SaveCard
+      publishableKey="pk_test"
+      scopeKey="buyer"
+      requestId="save-one"
+      returnUrl="https://app.test/cards"
+      createSetupIntent={create}
+      onSuccess={success}
+    />,
+  );
+  await screen.findByText("offline");
+  await userEvent.click(screen.getByRole("button", { name: "Retry" }));
+  await screen.findByText("Card details");
+  expect(create.mock.calls).toEqual([
+    [{ requestId: "save-one" }],
+    [{ requestId: "save-one" }],
+  ]);
+  await userEvent.click(screen.getByRole("button", { name: "Save card" }));
+  expect(confirm).not.toHaveBeenCalled();
+  await userEvent.click(screen.getByRole("checkbox"));
+  await userEvent.click(screen.getByRole("button", { name: "Save card" }));
+  await waitFor(() => expect(success).toHaveBeenCalledWith("seti_one"));
+  expect(confirm).toHaveBeenCalledWith("https://app.test/cards", "always");
+});
+it("keeps failed authentication retryable and does not report completion", async () => {
+  confirm
+    .mockResolvedValueOnce({ success: false, error: "Authentication failed" })
+    .mockResolvedValueOnce({ success: true });
+  const success = vi.fn();
+  render(
+    <SaveCard
+      publishableKey="pk_test"
+      scopeKey="buyer"
+      returnUrl="https://app.test/cards"
+      createSetupIntent={async () => ({
+        setupIntentId: "seti_one",
+        clientSecret: "secret",
+      })}
+      onSuccess={success}
+    />,
+  );
+  await screen.findByText("Card details");
+  await userEvent.click(screen.getByRole("checkbox"));
+  await userEvent.click(screen.getByRole("button", { name: "Save card" }));
+  await screen.findByRole("alert");
+  expect(success).not.toHaveBeenCalled();
+  await userEvent.click(screen.getByRole("button", { name: "Save card" }));
+  await waitFor(() => expect(success).toHaveBeenCalledOnce());
+});
+it("does not confirm the same completed setup twice", async () => {
+  confirm.mockResolvedValue({ success: true });
+  const success = vi.fn();
+  render(
+    <SaveCard
+      publishableKey="pk_test"
+      scopeKey="buyer"
+      returnUrl="https://app.test/cards"
+      createSetupIntent={async () => ({
+        setupIntentId: "seti_one",
+        clientSecret: "secret",
+      })}
+      onSuccess={success}
+    />,
+  );
+  await screen.findByText("Card details");
+  await userEvent.click(screen.getByRole("checkbox"));
+  await userEvent.click(screen.getByRole("button", { name: "Save card" }));
+  await waitFor(() => expect(success).toHaveBeenCalledOnce());
+  await userEvent.click(screen.getByRole("button", { name: "Save card" }));
+  expect(confirm).toHaveBeenCalledOnce();
+});
+it("blocks repeat confirmation through a custom render callback", async () => {
+  confirm.mockResolvedValue({ success: true });
+  const success = vi.fn();
+  let submit: (() => Promise<void>) | undefined;
+  render(
+    <SaveCard
+      publishableKey="pk_test"
+      scopeKey="buyer"
+      returnUrl="https://app.test/cards"
+      createSetupIntent={async () => ({
+        setupIntentId: "seti_one",
+        clientSecret: "secret",
+      })}
+      onSuccess={success}
+      renderForm={(state) => {
+        submit = state.submit;
+        return <button onClick={() => state.setConsent(true)}>Consent</button>;
+      }}
+    />,
+  );
+  await userEvent.click(await screen.findByRole("button", { name: "Consent" }));
+  await submit!();
+  await submit!();
+  expect(confirm).toHaveBeenCalledOnce();
+  expect(success).toHaveBeenCalledOnce();
+});

package/src/react/workflows/SaveCard.tsx

@@ -0,0 +1,117 @@
+"use client";
+import { useRef, useState, type ReactNode } from "react";
+import { PaymentElement } from "@stripe/react-stripe-js";
+import {
+  StripeProvider,
+  type StripeProviderProps,
+} from "../components/StripeProvider.js";
+import { useConfirmPayment } from "../hooks/useConfirmPayment.js";
+import { useWorkflowResource } from "./useWorkflowResource.js";
+import { useWorkflowAction } from "./useWorkflowAction.js";
+export type SaveCardFormState = {
+  paymentElement: ReactNode;
+  consent: boolean;
+  setConsent: (value: boolean) => void;
+  submit: () => Promise<void>;
+  isPending: boolean;
+  error: string | null;
+};
+export type SaveCardProps = Pick<
+  StripeProviderProps,
+  "publishableKey" | "appearance"
+> & {
+  scopeKey: string;
+  requestId?: string;
+  returnUrl: string;
+  /** Authenticated callback authorizes customer, records usage consent and durable request identity. */
+  createSetupIntent: (request: {
+    requestId: string;
+  }) => Promise<{ setupIntentId: string; clientSecret: string }>;
+  onSuccess?: (setupIntentId: string) => void;
+  renderForm?: (state: SaveCardFormState) => ReactNode;
+};
+/** Unstyled card setup. Host owns usage disclosures and authorization. */
+export function SaveCard(props: SaveCardProps) {
+  return (
+    <SaveCardBody
+      key={`${props.scopeKey}:${props.requestId ?? ""}`}
+      {...props}
+    />
+  );
+}
+function SaveCardBody(props: SaveCardProps) {
+  const [requestId] = useState(() => props.requestId ?? crypto.randomUUID());
+  const state = useWorkflowResource(() =>
+    props.createSetupIntent({ requestId }),
+  );
+  if (state.error)
+    return (
+      <div role="alert">
+        {state.error}
+        <button type="button" onClick={state.refresh}>
+          Retry
+        </button>
+      </div>
+    );
+  if (!state.data || state.isLoading)
+    return <p role="status">Preparing card setup…</p>;
+  return (
+    <StripeProvider
+      publishableKey={props.publishableKey}
+      appearance={props.appearance}
+      elementsOptions={{ clientSecret: state.data.clientSecret }}
+    >
+      <SaveCardForm {...props} setupIntentId={state.data.setupIntentId} />
+    </StripeProvider>
+  );
+}
+function SaveCardForm(props: SaveCardProps & { setupIntentId: string }) {
+  const { confirmSetup, isReady, hasElements } = useConfirmPayment();
+  const [consent, setConsent] = useState(false);
+  const completed = useRef(false);
+  const action = useWorkflowAction(async () => {
+    if (completed.current) return false;
+    if (!consent) throw new Error("Consent is required to save this card.");
+    const result = await confirmSetup(props.returnUrl, "always");
+    if (!result.success) throw new Error(result.error);
+    completed.current = true;
+    return true;
+  });
+  const state: SaveCardFormState = {
+    paymentElement: <PaymentElement />,
+    consent,
+    setConsent,
+    submit: async () => {
+      const saved = await action.run();
+      if (saved) props.onSuccess?.(props.setupIntentId);
+    },
+    isPending:
+      action.isPending ||
+      !isReady ||
+      !hasElements ||
+      action.result !== undefined,
+    error: action.error,
+  };
+  if (props.renderForm) return <>{props.renderForm(state)}</>;
+  return (
+    <div>
+      {state.paymentElement}
+      <label>
+        <input
+          type="checkbox"
+          checked={consent}
+          onChange={(e) => setConsent(e.target.checked)}
+        />
+        Save this card for future payments and show it at checkout.
+      </label>
+      {state.error && <p role="alert">{state.error}</p>}
+      <button
+        type="button"
+        disabled={!consent || state.isPending}
+        onClick={() => void state.submit()}
+      >
+        Save card
+      </button>
+    </div>
+  );
+}

package/src/react/workflows/index.ts

@@ -265,3 +265,6 @@ export type {
   AffiliatePayoutEditorState,
   AffiliatePayoutUpdate,
 } from "./AffiliatePayoutEditor.js";
+
+export { EvidenceUpload } from "./EvidenceUpload.js";
+export type { EvidenceUploadProps } from "./EvidenceUpload.js";

package/src/react/workflows/useWorkflowAction.ts

@@ -12,6 +12,7 @@ export type WorkflowActionState<T, Args extends unknown[]> = {
 export function useWorkflowAction<T, Args extends unknown[]>(
   action: (...args: Args) => Promise<T>,
   scope: string = "default",
+  onSuccess?: (result: T) => void,
 ): WorkflowActionState<T, Args> {
   const initial = {
     scope,
@@ -22,11 +23,13 @@ export function useWorkflowAction<T, Args extends unknown[]>(
   const [state, setState] = useState(initial);
   if (state.scope !== scope) setState(initial);
   const callback = useRef(action);
+  const success = useRef(onSuccess);
   const lifecycle = useRef({ version: 0, mounted: false });
   const lock = useRef<number | null>(null);
   useEffect(() => {
     callback.current = action;
-  }, [action]);
+    success.current = onSuccess;
+  }, [action, onSuccess]);
   useEffect(() => {
     const version = ++lifecycle.current.version;
     lifecycle.current.mounted = true;
@@ -51,9 +54,11 @@ export function useWorkflowAction<T, Args extends unknown[]>(
       setState({ scope, isPending: true, error: null, result: undefined });
       const current = () =>
         lifecycle.current.mounted && lifecycle.current.version === version;
+      const complete = success.current;
       try {
         const result = await callback.current(...args);
         if (!current()) return undefined;
+        complete?.(result);
         setState({ scope, isPending: false, error: null, result });
         return result;
       } catch (error) {