Merge branch 'feature/stripe-embedded-onboarding'

- Update StripeConnectOnboarding component with embedded flow
- Add new Stripe routes and service methods for embedded onboarding
- Update EarningsStatus and EarningsDashboard to support new flow
- Add required frontend dependencies

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

backend/routes/stripe.js

@@ -133,6 +133,41 @@ router.post("/account-links", authenticateToken, requireVerifiedEmail, async (re
   }
 });
 
+// Create account session for embedded onboarding
+router.post("/account-sessions", authenticateToken, requireVerifiedEmail, async (req, res, next) => {
+  let user = null;
+  try {
+    user = await User.findByPk(req.user.id);
+
+    if (!user || !user.stripeConnectedAccountId) {
+      return res.status(400).json({ error: "No connected account found" });
+    }
+
+    const accountSession = await StripeService.createAccountSession(
+      user.stripeConnectedAccountId
+    );
+
+    const reqLogger = logger.withRequestId(req.id);
+    reqLogger.info("Stripe account session created", {
+      userId: req.user.id,
+      stripeConnectedAccountId: user.stripeConnectedAccountId,
+    });
+
+    res.json({
+      clientSecret: accountSession.client_secret,
+    });
+  } catch (error) {
+    const reqLogger = logger.withRequestId(req.id);
+    reqLogger.error("Stripe account session creation failed", {
+      error: error.message,
+      stack: error.stack,
+      userId: req.user.id,
+      stripeConnectedAccountId: user?.stripeConnectedAccountId,
+    });
+    next(error);
+  }
+});
+
 // Get account status
 router.get("/account-status", authenticateToken, async (req, res, next) => {
   let user = null;

backend/services/stripeService.js

@@ -64,6 +64,22 @@ class StripeService {
     }
   }
 
+  static async createAccountSession(accountId) {
+    try {
+      const accountSession = await stripe.accountSessions.create({
+        account: accountId,
+        components: {
+          account_onboarding: { enabled: true },
+        },
+      });
+
+      return accountSession;
+    } catch (error) {
+      logger.error("Error creating account session", { error: error.message, stack: error.stack });
+      throw error;
+    }
+  }
+
   static async createTransfer({
     amount,
     currency = "usd",

frontend/package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@googlemaps/js-api-loader": "^1.16.10",
+        "@stripe/connect-js": "^3.3.31",
+        "@stripe/react-connect-js": "^3.3.31",
         "@stripe/react-stripe-js": "^3.3.1",
         "@stripe/stripe-js": "^5.2.0",
         "@testing-library/dom": "^10.4.0",
@@ -3381,6 +3383,23 @@
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
       "license": "MIT"
     },
+    "node_modules/@stripe/connect-js": {
+      "version": "3.3.31",
+      "resolved": "https://registry.npmjs.org/@stripe/connect-js/-/connect-js-3.3.31.tgz",
+      "integrity": "sha512-vjsZbatveSMoceOKZHt4eImmlBQla112OV9+enxcZUC1dGziTl2J2E3iH3n01yx9nu9ziesMJnSh/Y2d62TA/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@stripe/react-connect-js": {
+      "version": "3.3.31",
+      "resolved": "https://registry.npmjs.org/@stripe/react-connect-js/-/react-connect-js-3.3.31.tgz",
+      "integrity": "sha512-lzJbFdnlUxyILuEjdE9CqYhGq10XPvz89m/Phe/9aqXhLi02eIbaNHZOL+WQo1NMOGWeLjASnMCUagCZwoOsiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@stripe/connect-js": ">=3.3.29",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@stripe/react-stripe-js": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-3.9.2.tgz",

frontend/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.16.10",
+    "@stripe/connect-js": "^3.3.31",
+    "@stripe/react-connect-js": "^3.3.31",
     "@stripe/react-stripe-js": "^3.3.1",
     "@stripe/stripe-js": "^5.2.0",
     "@testing-library/dom": "^10.4.0",

frontend/src/components/EarningsStatus.tsx

@@ -2,11 +2,13 @@ import React from "react";
 
 interface EarningsStatusProps {
   hasStripeAccount: boolean;
+  isOnboardingComplete?: boolean;
   onSetupClick: () => void;
 }
 
 const EarningsStatus: React.FC<EarningsStatusProps> = ({
   hasStripeAccount,
+  isOnboardingComplete = false,
   onSetupClick,
 }) => {
   // No Stripe account exists
@@ -31,7 +33,29 @@ const EarningsStatus: React.FC<EarningsStatusProps> = ({
     );
   }
 
-  // Account exists and is set up
+  // Account exists but onboarding incomplete
+  if (!isOnboardingComplete) {
+    return (
+      <div className="text-center">
+        <div className="mb-3">
+          <i
+            className="bi bi-clock-history text-warning"
+            style={{ fontSize: "2.5rem" }}
+          ></i>
+        </div>
+        <h6 className="text-warning">Setup Incomplete</h6>
+        <p className="text-muted small mb-3">
+          Your earnings account was created but setup is not complete. Please
+          finish the onboarding process to start receiving payments.
+        </p>
+        <button className="btn btn-warning" onClick={onSetupClick}>
+          Continue Setup
+        </button>
+      </div>
+    );
+  }
+
+  // Account exists and is fully set up
   return (
     <div className="text-center">
       <div className="mb-3">

frontend/src/components/StripeConnectOnboarding.tsx

@@ -1,20 +1,66 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
+import { loadConnectAndInitialize } from "@stripe/connect-js";
+import {
+  ConnectAccountOnboarding,
+  ConnectComponentsProvider,
+} from "@stripe/react-connect-js";
 import { stripeAPI } from "../services/api";
 
 interface StripeConnectOnboardingProps {
   onComplete: () => void;
   onCancel: () => void;
+  hasExistingAccount?: boolean;
 }
 
 const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
   onComplete,
   onCancel,
+  hasExistingAccount = false,
 }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [step, setStep] = useState<"start" | "creating" | "redirecting">(
+  const [step, setStep] = useState<"start" | "creating" | "onboarding">(
-    "start"
+    hasExistingAccount ? "onboarding" : "start"
   );
+  const [stripeConnectInstance, setStripeConnectInstance] = useState<any>(null);
+
+  const fetchClientSecret = useCallback(async () => {
+    const response = await stripeAPI.createAccountSession();
+    return response.data.clientSecret;
+  }, []);
+
+  const initializeStripeConnect = useCallback(async () => {
+    try {
+      const publishableKey = process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY;
+      if (!publishableKey) {
+        throw new Error("Stripe publishable key not configured");
+      }
+
+      const instance = loadConnectAndInitialize({
+        publishableKey,
+        fetchClientSecret,
+        appearance: {
+          overlays: "dialog",
+          variables: {
+            colorPrimary: "#0d6efd",
+            colorBackground: "#ffffff",
+            colorText: "#212529",
+            colorDanger: "#dc3545",
+            fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+            fontSizeBase: "16px",
+            borderRadius: "8px",
+            spacingUnit: "4px",
+          },
+        },
+      });
+
+      setStripeConnectInstance(instance);
+    } catch (err: any) {
+      setError(err.message || "Failed to initialize Stripe");
+      setStep("start");
+      setLoading(false);
+    }
+  }, [fetchClientSecret]);
 
   const createStripeAccount = async () => {
     setLoading(true);
@@ -22,24 +68,14 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
     setStep("creating");
 
     try {
-      // First, create the Stripe Connected Account
+      // Create the Stripe Connected Account
-      const accountResponse = await stripeAPI.createConnectedAccount();
+      await stripeAPI.createConnectedAccount();
 
-      setStep("redirecting");
+      // Initialize Stripe Connect for embedded onboarding
+      await initializeStripeConnect();
 
-      // Generate onboarding link
+      setStep("onboarding");
-      const refreshUrl = `${window.location.origin}/earnings?refresh=true`;
+      setLoading(false);
-      const returnUrl = `${window.location.origin}/earnings?setup=complete`;
-
-      const linkResponse = await stripeAPI.createAccountLink({
-        refreshUrl,
-        returnUrl,
-      });
-
-      const { url } = linkResponse.data;
-
-      // Redirect to Stripe onboarding
-      window.location.href = url;
     } catch (err: any) {
       setError(
         err.response?.data?.error || err.message || "Failed to set up earnings"
@@ -49,20 +85,47 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
     }
   };
 
+  const startOnboardingForExistingAccount = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      await initializeStripeConnect();
+      setStep("onboarding");
+      setLoading(false);
+    } catch (err: any) {
+      setError(err.message || "Failed to initialize onboarding");
+      setLoading(false);
+    }
+  };
+
+  // If user already has an account, initialize immediately
+  React.useEffect(() => {
+    if (hasExistingAccount && step === "onboarding" && !stripeConnectInstance) {
+      startOnboardingForExistingAccount();
+    }
+  }, [hasExistingAccount]);
+
   const handleStartSetup = () => {
     createStripeAccount();
   };
 
+  const handleOnboardingExit = () => {
+    onComplete();
+  };
+
   return (
     <div
       className="modal fade show d-block"
       style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
       tabIndex={-1}
     >
-      <div className="modal-dialog modal-lg">
+      <div className={`modal-dialog ${step === "onboarding" ? "modal-xl" : "modal-lg"}`}>
         <div className="modal-content">
           <div className="modal-header">
-            <h5 className="modal-title">Set Up Earnings</h5>
+            <h5 className="modal-title">
+              {step === "onboarding" ? "Complete Your Earnings Setup" : "Set Up Earnings"}
+            </h5>
             <button
               type="button"
               className="btn-close"
@@ -131,9 +194,7 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
                     <i className="bi bi-info-circle"></i> What to expect:
                   </h6>
                   <ul className="mb-0">
-                    <li>
+                    <li>Verify your identity securely</li>
-                      You'll be redirected to Stripe to verify your identity
-                    </li>
                     <li>Provide bank account details for deposits</li>
                     <li>The setup process takes about 5 minutes</li>
                     <li>Start earning immediately after setup</li>
@@ -149,7 +210,7 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
             )}
 
             {step === "creating" && (
-              <div className="text-center">
+              <div className="text-center py-5">
                 <div className="spinner-border text-primary mb-3" role="status">
                   <span className="visually-hidden">Loading...</span>
                 </div>
@@ -160,17 +221,30 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
               </div>
             )}
 
-            {step === "redirecting" && (
+            {step === "onboarding" && (
-              <div className="text-center">
+              <>
-                <div className="spinner-border text-success mb-3" role="status">
+                {!stripeConnectInstance ? (
+                  <div className="text-center py-5">
+                    <div className="spinner-border text-primary mb-3" role="status">
                       <span className="visually-hidden">Loading...</span>
                     </div>
-                <h5>Redirecting to Stripe...</h5>
+                    <h5>Loading onboarding form...</h5>
-                <p className="text-muted">
-                  You'll be redirected to complete the setup process. This may
-                  take a moment.
-                </p>
                   </div>
+                ) : (
+                  <div style={{ minHeight: "500px" }}>
+                    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
+                      <ConnectAccountOnboarding
+                        onExit={handleOnboardingExit}
+                      />
+                    </ConnectComponentsProvider>
+                  </div>
+                )}
+                {error && (
+                  <div className="alert alert-danger mt-3">
+                    <i className="bi bi-exclamation-triangle"></i> {error}
+                  </div>
+                )}
+              </>
             )}
           </div>
           <div className="modal-footer">
@@ -194,13 +268,20 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
                 </button>
               </>
             )}
-            {(step === "creating" || step === "redirecting") && (
+            {step === "creating" && (
               <div className="w-100 text-center">
                 <small className="text-muted">
                   Please don't close this window...
                 </small>
               </div>
             )}
+            {step === "onboarding" && stripeConnectInstance && (
+              <div className="w-100">
+                <small className="text-muted">
+                  <i className="bi bi-lock"></i> Your information is securely processed by Stripe
+                </small>
+              </div>
+            )}
           </div>
         </div>
       </div>

frontend/src/pages/EarningsDashboard.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { rentalAPI, userAPI } from "../services/api";
+import { rentalAPI, userAPI, stripeAPI } from "../services/api";
 import { Rental, User } from "../types";
 import StripeConnectOnboarding from "../components/StripeConnectOnboarding";
 import EarningsStatus from "../components/EarningsStatus";
@@ -12,11 +12,17 @@ interface EarningsData {
   rentalsWithEarnings: Rental[];
 }
 
+interface AccountStatus {
+  detailsSubmitted: boolean;
+  payoutsEnabled: boolean;
+}
+
 const EarningsDashboard: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [earningsData, setEarningsData] = useState<EarningsData | null>(null);
   const [userProfile, setUserProfile] = useState<User | null>(null);
+  const [accountStatus, setAccountStatus] = useState<AccountStatus | null>(null);
   const [showOnboarding, setShowOnboarding] = useState(false);
 
   useEffect(() => {
@@ -28,11 +34,28 @@ const EarningsDashboard: React.FC = () => {
     try {
       const response = await userAPI.getProfile();
       setUserProfile(response.data);
+
+      // If user has a Stripe account, fetch account status
+      if (response.data.stripeConnectedAccountId) {
+        await fetchAccountStatus();
+      }
     } catch (err) {
       console.error("Failed to fetch user profile:", err);
     }
   };
 
+  const fetchAccountStatus = async () => {
+    try {
+      const response = await stripeAPI.getAccountStatus();
+      setAccountStatus({
+        detailsSubmitted: response.data.detailsSubmitted,
+        payoutsEnabled: response.data.payoutsEnabled,
+      });
+    } catch (err) {
+      console.error("Failed to fetch account status:", err);
+    }
+  };
+
   const fetchEarningsData = async () => {
     try {
       // Get completed rentals where user is the owner
@@ -99,6 +122,7 @@ const EarningsDashboard: React.FC = () => {
   }
 
   const hasStripeAccount = !!userProfile?.stripeConnectedAccountId;
+  const isOnboardingComplete = accountStatus?.detailsSubmitted ?? false;
 
   return (
     <div className="container mt-4">
@@ -243,6 +267,7 @@ const EarningsDashboard: React.FC = () => {
             <div className="card-body">
               <EarningsStatus
                 hasStripeAccount={hasStripeAccount}
+                isOnboardingComplete={isOnboardingComplete}
                 onSetupClick={() => setShowOnboarding(true)}
               />
             </div>
@@ -284,6 +309,7 @@ const EarningsDashboard: React.FC = () => {
         <StripeConnectOnboarding
           onComplete={handleSetupComplete}
           onCancel={() => setShowOnboarding(false)}
+          hasExistingAccount={hasStripeAccount}
         />
       )}
     </div>

frontend/src/services/api.ts

@@ -309,6 +309,7 @@ export const stripeAPI = {
   createConnectedAccount: () => api.post("/stripe/accounts"),
   createAccountLink: (data: { refreshUrl: string; returnUrl: string }) =>
     api.post("/stripe/account-links", data),
+  createAccountSession: () => api.post("/stripe/account-sessions"),
   getAccountStatus: () => api.get("/stripe/account-status"),
   createSetupCheckoutSession: (data: { rentalData?: any }) =>
     api.post("/stripe/create-setup-checkout-session", data),