How to Integrate Stripe Connect with V0

Start by opening V0 at v0.dev and describing the marketplace interface you need. Be specific about the seller onboarding flow, the payment confirmation screens, and any dashboards. V0 will generate a complete Next.js App Router project with React components, Tailwind styling, and placeholder API calls. When V0 finishes generating, review the preview — you should see your seller dashboard, a 'Connect Stripe Account' CTA button, and a checkout form. V0 will likely generate mock fetch calls to API endpoints like /api/stripe-connect/authorize and /api/stripe-connect/payment — these are the routes you'll build in the next steps. The generated code establishes your component structure; now you need to wire in real Stripe logic. Use the Git panel in V0's sidebar to push the generated project to a new GitHub repository, which Vercel will use for automatic deployments. If V0 hasn't generated API route files yet, note the component file locations (typically app/page.tsx and app/components/) since you'll add route files alongside them.

After exporting your V0 project to GitHub, open the code locally (or edit via GitHub) and create the API route files Stripe Connect needs. The first route handles the OAuth redirect — it constructs the Stripe Connect authorization URL with your client ID and a redirect URI, then sends the user to Stripe to authorize your platform. When Stripe redirects back to your app with a code parameter, the second route exchanges that code for a connected account ID using stripe.oauth.token(). You store this account ID (typically in your database, though for simplicity you can use a cookie or session for testing). These two routes together complete the seller onboarding flow. Create the files at app/api/stripe-connect/authorize/route.ts and app/api/stripe-connect/callback/route.ts. The authorize route reads your Stripe Connect client ID from process.env.STRIPE_CONNECT_CLIENT_ID and constructs the OAuth URL. The callback route reads the code from the URL query string and calls the Stripe SDK to exchange it. Make sure to handle errors gracefully — Stripe will include an error parameter in the redirect URL if the seller declines or something goes wrong. The connected account ID you receive (starting with 'acct_') is what you'll reference in every subsequent payment for that seller.

1// app/api/stripe-connect/authorize/route.ts
2import { NextResponse } from 'next/server';
3
4export async function GET() {
5  const clientId = process.env.STRIPE_CONNECT_CLIENT_ID!;
6  const redirectUri = `${process.env.NEXT_PUBLIC_APP_URL}/api/stripe-connect/callback`;
7
8  const params = new URLSearchParams({
9    response_type: 'code',
10    client_id: clientId,
11    scope: 'read_write',
12    redirect_uri: redirectUri,
13  });
14
15  return NextResponse.redirect(
16    `https://connect.stripe.com/oauth/authorize?${params.toString()}`
17  );
18}
19
20// app/api/stripe-connect/callback/route.ts
21import { NextRequest, NextResponse } from 'next/server';
22import Stripe from 'stripe';
23
24const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
25
26export async function GET(request: NextRequest) {
27  const { searchParams } = new URL(request.url);
28  const code = searchParams.get('code');
29  const error = searchParams.get('error');
30
31  if (error) {
32    return NextResponse.redirect(
33      `${process.env.NEXT_PUBLIC_APP_URL}/onboarding?error=${error}`
34    );
35  }
36
37  if (!code) {
38    return NextResponse.json({ error: 'Missing authorization code' }, { status: 400 });
39  }
40
41  try {
42    const response = await stripe.oauth.token({
43      grant_type: 'authorization_code',
44      code,
45    });
46
47    const connectedAccountId = response.stripe_user_id;
48    // TODO: Save connectedAccountId to your database linked to the seller's user ID
49
50    return NextResponse.redirect(
51      `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?connected=true`
52    );
53  } catch (err) {
54    console.error('Stripe Connect OAuth error:', err);
55    return NextResponse.redirect(
56      `${process.env.NEXT_PUBLIC_APP_URL}/onboarding?error=oauth_failed`
57    );
58  }
59}

The payment route is where Stripe Connect's split-payment magic happens. When a buyer checks out, your app creates a PaymentIntent on your platform's Stripe account, specifying the seller's connected account ID and your platform's application fee. Stripe automatically routes the funds: after the payment succeeds, the application_fee_amount stays with your platform and the remainder transfers to the seller's account. Create this route at app/api/stripe-connect/payment/route.ts. The route receives the amount, currency, and the seller's connected account ID from the request body. It calls stripe.paymentIntents.create() with a transfer_data object specifying the destination account. It then returns the client_secret from the created PaymentIntent back to the browser, which uses it with Stripe.js to confirm the payment on the client side. Be precise with amounts — Stripe uses the smallest currency unit (cents for USD, so $10.00 = 1000). The application_fee_amount should also be in cents. For example, a 10% platform fee on a $50 sale would be: amount: 5000, application_fee_amount: 500, with the remaining 4500 (minus Stripe's processing fee) going to the seller. This entire calculation and PaymentIntent creation happens server-side, so your Stripe secret key and the financial logic never touches the client.

1// app/api/stripe-connect/payment/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import Stripe from 'stripe';
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
6
7export async function POST(request: NextRequest) {
8  try {
9    const { amount, currency = 'usd', connectedAccountId, platformFeePercent = 10 } =
10      await request.json();
11
12    if (!amount || !connectedAccountId) {
13      return NextResponse.json(
14        { error: 'Missing required fields: amount, connectedAccountId' },
15        { status: 400 }
16      );
17    }
18
19    const amountInCents = Math.round(amount * 100);
20    const platformFee = Math.round(amountInCents * (platformFeePercent / 100));
21
22    const paymentIntent = await stripe.paymentIntents.create({
23      amount: amountInCents,
24      currency,
25      application_fee_amount: platformFee,
26      transfer_data: {
27        destination: connectedAccountId,
28      },
29    });
30
31    return NextResponse.json({
32      clientSecret: paymentIntent.client_secret,
33      paymentIntentId: paymentIntent.id,
34    });
35  } catch (error) {
36    console.error('Payment intent creation failed:', error);
37    return NextResponse.json(
38      { error: 'Failed to create payment intent' },
39      { status: 500 }
40    );
41  }
42}

Webhooks are essential for marketplace reliability — your app needs to know when a payment actually succeeds, not just when the client-side confirmation returns. Stripe sends POST requests to your webhook endpoint with signed payloads whenever payment events occur. Create a webhook handler at app/api/webhooks/stripe/route.ts. The most critical implementation detail for Next.js App Router is using await request.text() instead of request.json() to read the raw request body. Stripe signs the payload using your webhook secret, and that signature is computed against the raw bytes. If you parse the body to JSON first (even just by calling request.json()), the raw body changes and signature verification always fails. The stripe.webhooks.constructEvent() method verifies the signature and returns a typed Stripe event object. You then switch on event.type to handle the events you care about. For Connect, the key events are payment_intent.succeeded (payment completed), account.updated (seller's connected account details changed), and transfer.created (funds routed to seller). After processing, always return a 200 response quickly — Stripe will retry unacknowledged webhooks for up to 72 hours, and long-running webhook handlers can cause duplicate processing. Set up your webhook endpoint in the Stripe Dashboard under Developers → Webhooks, pointing to your deployed Vercel URL.

1// app/api/webhooks/stripe/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import Stripe from 'stripe';
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
6
7export async function POST(request: NextRequest) {
8  const body = await request.text(); // CRITICAL: use text(), not json()
9  const signature = request.headers.get('stripe-signature');
10
11  if (!signature) {
12    return NextResponse.json({ error: 'Missing stripe-signature header' }, { status: 400 });
13  }
14
15  let event: Stripe.Event;
16
17  try {
18    event = stripe.webhooks.constructEvent(
19      body,
20      signature,
21      process.env.STRIPE_WEBHOOK_SECRET!
22    );
23  } catch (err) {
24    console.error('Webhook signature verification failed:', err);
25    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
26  }
27
28  switch (event.type) {
29    case 'payment_intent.succeeded': {
30      const paymentIntent = event.data.object as Stripe.PaymentIntent;
31      console.log('Payment succeeded:', paymentIntent.id);
32      // Update order status in your database
33      break;
34    }
35    case 'account.updated': {
36      const account = event.data.object as Stripe.Account;
37      console.log('Connected account updated:', account.id);
38      // Update seller's verification status in your database
39      break;
40    }
41    case 'transfer.created': {
42      const transfer = event.data.object as Stripe.Transfer;
43      console.log('Transfer to seller:', transfer.destination, transfer.amount);
44      break;
45    }
46    default:
47      console.log('Unhandled event type:', event.type);
48  }
49
50  return NextResponse.json({ received: true });
51}

With all API routes created and pushed to GitHub, the final step is adding your Stripe credentials to Vercel so your serverless functions can authenticate with Stripe. Open the Vercel Dashboard, navigate to your project, click Settings in the top navigation, then Environment Variables in the left sidebar. You need to add four variables. STRIPE_SECRET_KEY is your Stripe platform secret key — find it at dashboard.stripe.com under Developers → API Keys. This key should never have the NEXT_PUBLIC_ prefix since it must stay server-side only. STRIPE_CONNECT_CLIENT_ID is your Connect application's client ID — find it at dashboard.stripe.com/connect/settings under 'Your Platform's client_id'. STRIPE_WEBHOOK_SECRET is the webhook signing secret — Stripe generates this when you create a webhook endpoint in the Dashboard. NEXT_PUBLIC_APP_URL is your deployed Vercel URL (e.g., https://your-app.vercel.app) — this is safe to expose since it's just your domain. Set each variable for Production, Preview, and Development environments. After saving, trigger a new deployment by pushing a small change to GitHub or clicking 'Redeploy' in the Vercel Dashboard. Vercel will rebuild your project with the new environment variables injected. For complex Connect configurations, RapidDev's team can help set up the complete marketplace payment flow including database integration for account storage. Once deployed, test the full flow by going through the OAuth onboarding with a Stripe test account and making a test payment using Stripe's test card 4242 4242 4242 4242.