@fantastic.dev/better-stripe 0.14.0 → 0.15.0

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>
+  );
+}