Add 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>
This commit is contained in:
jackiettran
@@ -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">(
|
||||
"start"
|
||||
const [step, setStep] = useState<"start" | "creating" | "onboarding">(
|
||||
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
|
||||
const accountResponse = await stripeAPI.createConnectedAccount();
|
||||
// Create the Stripe Connected Account
|
||||
await stripeAPI.createConnectedAccount();
|
||||
|
||||
setStep("redirecting");
|
||||
// Initialize Stripe Connect for embedded onboarding
|
||||
await initializeStripeConnect();
|
||||
|
||||
// Generate onboarding link
|
||||
const refreshUrl = `${window.location.origin}/earnings?refresh=true`;
|
||||
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;
|
||||
setStep("onboarding");
|
||||
setLoading(false);
|
||||
} 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>
|
||||
You'll be redirected to Stripe to verify your identity
|
||||
</li>
|
||||
<li>Verify your identity securely</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" && (
|
||||
<div className="text-center">
|
||||
<div className="spinner-border text-success mb-3" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<h5>Redirecting to Stripe...</h5>
|
||||
<p className="text-muted">
|
||||
You'll be redirected to complete the setup process. This may
|
||||
take a moment.
|
||||
</p>
|
||||
</div>
|
||||
{step === "onboarding" && (
|
||||
<>
|
||||
{!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>Loading onboarding form...</h5>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user