USER ONBOARDING

Guide users through Stripe Connect setup and show onboarding status.

PREVIEW

Complete Your Setup

Finish your Stripe account verification

Setup Progress
Business Type
Business Profile
Bank Account
Identity Verification
What Happens Next
  • Complete all verification requirements
  • Upload required documents if requested
  • Wait for Stripe to review your information
  • Receive email confirmation when approved

Payments powered by Stripe

Your financial information is never stored on our servers

CODE

user-onboarding-example.tsxtsx
1import { UserOnboarding } from '@/components/fanbace/platform';
2import { useStripeConnect } from '@/lib/sdk';
3 
4export default function OnboardingPage() {
5  const { status, requirements, connect, loading } = useStripeConnect();
6 
7  return (
8    <UserOnboarding
9      status={status}
10      requirements={requirements}
11      onConnect={connect}
12      loading={loading}
13    />
14  );
15}

PROPS

PropTypeDefaultDescription
status'pending' | 'in_progress' | 'active' | 'suspended'-Current Stripe account status
requirementsRequirement[]-Verification requirements (in_progress only)
onConnect() => void-Callback when connect button is clicked
loadingbooleanfalseShow loading state

ALL STATUS STATES

Pending

Connect with Stripe

Set up your payment account to start selling

What Happens Next
  • Connect your Stripe account securely
  • Verify your identity and business information
  • Add your bank account for payouts
  • Start selling once approved (usually < 24 hours)

Payments powered by Stripe

Your financial information is never stored on our servers

In Progress

Complete Your Setup

Finish your Stripe account verification

Setup Progress
Business Type
Business Profile
Bank Account
Identity Verification
What Happens Next
  • Complete all verification requirements
  • Upload required documents if requested
  • Wait for Stripe to review your information
  • Receive email confirmation when approved

Payments powered by Stripe

Your financial information is never stored on our servers

Active

Account Active

Your payment account is ready

Ready to Sell

Your payment account is verified and active. You can now publish products and receive payments.

Payments powered by Stripe

Your financial information is never stored on our servers

Suspended

Account Suspended

Please contact support to resolve issues

Action Required

Your account has been suspended. Please contact support to resolve any outstanding issues.

Payments powered by Stripe

Your financial information is never stored on our servers

USAGE EXAMPLES

WITH REAL STRIPE INTEGRATION

Connect to actual Stripe API

1import { useEffect } from 'react';
2import { useStripeConnect } from '@/lib/sdk';
3 
4function StripeOnboarding() {
5  const {
6    status,
7    requirements,
8    accountId,
9    connect,
10    refresh,
11    loading,
12  } = useStripeConnect();
13 
14  // Auto-refresh status every 30 seconds
15  useEffect(() => {
16    const interval = setInterval(refresh, 30000);
17    return () => clearInterval(interval);
18  }, [refresh]);
19 
20  const handleConnect = async () => {
21    const url = await connect();
22    window.location.href = url; // Redirect to Stripe
23  };
24 
25  return (
26    <CreatorOnboarding
27      status={status}
28      requirements={requirements}
29      onConnect={handleConnect}
30      loading={loading}
31    />
32  );
33}

IN DASHBOARD LAYOUT

Show persistent reminder until verified

1function DashboardLayout({ children }) {
2  const { status, connect } = useStripeConnect();
3 
4  return (
5    <div>
6      {status !== 'active' && (
7        <div className="bg-yellow-50 border-b-2 border-yellow-200 p-4">
8          <div className="container mx-auto">
9            <UserOnboarding
10              status={status}
11              onConnect={connect}
12              compact
13            />
14          </div>
15        </div>
16      )}
17      {children}
18    </div>
19  );
20}

WITH ANALYTICS TRACKING

Track onboarding funnel

1function TrackedOnboarding() {
2  const { status, connect } = useStripeConnect();
3 
4  const handleConnect = async () => {
5    analytics.track('stripe_connect_started', {
6      current_status: status,
7      timestamp: new Date().toISOString(),
8    });
9 
10    await connect();
11  };
12 
13  useEffect(() => {
14    if (status === 'active') {
15      analytics.track('stripe_connect_completed', {
16        completion_time: Date.now(),
17      });
18    }
19  }, [status]);
20 
21  return (
22    <CreatorOnboarding
23      status={status}
24      onConnect={handleConnect}
25    />
26  );
27}