How to Integrate Bolt.new with Stripe

The Stripe integration in Bolt.new starts in the project Settings, not through a chat prompt. In your Bolt project, click the Settings icon (gear) in the left sidebar or top navigation. Find the 'Stripe' section in Settings. You'll be prompted to enter your Stripe API key. For development, use your test secret key from the Stripe Dashboard — navigate to Stripe Dashboard → Developers → API keys, and copy the key starting with `sk_test_`. Paste it into Bolt's Stripe settings field and save. Once connected, click the 'Retrieve my products' button. Bolt queries your Stripe account and imports all your active products and prices. You'll see them listed with their names, prices, and billing intervals. Select the products you want to use in your app. This sync step is crucial — Bolt uses the real product IDs from your Stripe account when generating checkout code, ensuring the generated code is immediately usable rather than containing placeholder values. You can switch to live keys (`sk_live_`) when you're ready to accept real payments — just replace the key in Settings and re-retrieve products.

With Stripe connected and products retrieved, Bolt can now auto-generate the entire payment implementation from a natural language prompt. Type 'Add payments' in the chat, or be more specific about what you need. Bolt generates several files automatically: a Supabase edge function (typically at `supabase/functions/create-checkout/index.ts`) that creates Stripe Checkout sessions using the Stripe Node SDK, a webhook handler edge function (`supabase/functions/stripe-webhook/index.ts`) that verifies Stripe signatures and updates your database, React components for the pricing page and buy buttons, and database tables in Supabase to track customers, subscriptions, and payment status. The AI uses the product IDs retrieved in the previous step to pre-populate the generated code. Review the generated files — specifically the edge function to confirm the product ID and price ID match what you want to sell. If you have multiple products, specify which one in the prompt: 'Add Stripe checkout for the Pro Plan product at $29/month'.

1// supabase/functions/create-checkout/index.ts
2// Auto-generated by Bolt — review product/price IDs match your Stripe account
3import Stripe from 'https://esm.sh/stripe@14.0.0?target=deno';
4
5const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY') ?? '', {
6  apiVersion: '2024-04-10',
7  httpClient: Stripe.createFetchHttpClient(),
8});
9
10const corsHeaders = {
11  'Access-Control-Allow-Origin': '*',
12  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
13};
14
15Deno.serve(async (req) => {
16  if (req.method === 'OPTIONS') {
17    return new Response('ok', { headers: corsHeaders });
18  }
19
20  const { priceId, userId, successUrl, cancelUrl } = await req.json();
21
22  const session = await stripe.checkout.sessions.create({
23    payment_method_types: ['card'],
24    mode: 'subscription',
25    line_items: [{ price: priceId, quantity: 1 }],
26    success_url: successUrl,
27    cancel_url: cancelUrl,
28    metadata: { userId },
29  });
30
31  return new Response(JSON.stringify({ sessionUrl: session.url }), {
32    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
33  });
34});

Stripe provides a comprehensive set of test cards that simulate different payment scenarios in test mode. The most important cards: `4242 4242 4242 4242` for a successful payment (use any future expiry, any 3-digit CVC, any ZIP); `4000 0000 0000 0002` for a generic card decline; `4000 0027 6000 3184` to trigger 3D Secure authentication; `4000 0000 0000 9995` to simulate insufficient funds. In Bolt's preview, you can test the checkout flow up to the Stripe Checkout page — the redirect to Stripe's hosted checkout works because it's an outbound HTTP call. Complete the payment with test cards on Stripe's page and verify you're redirected back to your success URL. However, webhook events (payment confirmation, subscription activation) cannot be received in the preview because the WebContainer has no public URL for Stripe to POST to. Test checkout session creation in the preview, but validate the full end-to-end flow including webhooks after deploying. Check the Stripe Dashboard → Events log to see all events generated during testing, even if your webhook handler hasn't processed them yet.

1// components/CheckoutButton.tsx
2'use client';
3import { useState } from 'react';
4import { createClient } from '@supabase/supabase-js';
5
6const supabase = createClient(
7  process.env.NEXT_PUBLIC_SUPABASE_URL!,
8  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
9);
10
11interface CheckoutButtonProps {
12  priceId: string;
13  label?: string;
14}
15
16export function CheckoutButton({ priceId, label = 'Subscribe Now' }: CheckoutButtonProps) {
17  const [loading, setLoading] = useState(false);
18
19  async function handleCheckout() {
20    setLoading(true);
21    const { data: { user } } = await supabase.auth.getUser();
22
23    const { data, error } = await supabase.functions.invoke('create-checkout', {
24      body: {
25        priceId,
26        userId: user?.id,
27        successUrl: `${window.location.origin}/payment-success?session_id={CHECKOUT_SESSION_ID}`,
28        cancelUrl: `${window.location.origin}/pricing`,
29      },
30    });
31
32    if (error || !data?.sessionUrl) {
33      console.error('Checkout error:', error);
34      setLoading(false);
35      return;
36    }
37
38    window.location.href = data.sessionUrl;
39  }
40
41  return (
42    <button
43      onClick={handleCheckout}
44      disabled={loading}
45      className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
46    >
47      {loading ? 'Redirecting...' : label}
48    </button>
49  );
50}

Stripe webhooks are the mechanism by which your app learns about payment events — a subscription was created, a payment succeeded, a subscription was cancelled. During development in Bolt's WebContainer, webhooks cannot be received because the preview URL is dynamic and unreachable from Stripe's servers. To test the complete payment lifecycle including webhooks, deploy your app to Netlify or Bolt Cloud first. Once deployed, go to your Stripe Dashboard → Developers → Webhooks → Add endpoint. Enter your deployed URL with the webhook path: `https://your-app.netlify.app/api/stripe/webhook` (or the path generated by Bolt). Select the events to listen for: `checkout.session.completed`, `customer.subscription.updated`, `customer.subscription.deleted`, `invoice.payment_succeeded`, `invoice.payment_failed`. Stripe provides a Webhook Signing Secret — add it to your deployment environment variables as `STRIPE_WEBHOOK_SECRET`. Also add your `STRIPE_SECRET_KEY` as an environment variable in Netlify (Site Configuration → Environment Variables) or Bolt Cloud. The webhook handler Bolt generated uses `constructEventAsync()` to verify the Stripe signature — this is critical for security and must match the correct webhook secret.

1// app/api/stripe/webhook/route.ts
2// Alternative Next.js API route (if not using Supabase edge functions)
3import { NextRequest, NextResponse } from 'next/server';
4import Stripe from 'stripe';
5
6const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
7  apiVersion: '2024-04-10',
8});
9
10export async function POST(request: NextRequest) {
11  const body = await request.text();
12  const signature = request.headers.get('stripe-signature')!;
13
14  let event: Stripe.Event;
15
16  try {
17    event = stripe.webhooks.constructEvent(
18      body,
19      signature,
20      process.env.STRIPE_WEBHOOK_SECRET!
21    );
22  } catch (err) {
23    console.error('Webhook signature verification failed:', err);
24    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
25  }
26
27  switch (event.type) {
28    case 'checkout.session.completed': {
29      const session = event.data.object as Stripe.Checkout.Session;
30      const userId = session.metadata?.userId;
31      // Update subscription status in database
32      console.log('Payment succeeded for user:', userId);
33      break;
34    }
35    case 'customer.subscription.deleted': {
36      const subscription = event.data.object as Stripe.Subscription;
37      console.log('Subscription cancelled:', subscription.id);
38      break;
39    }
40    case 'invoice.payment_failed': {
41      const invoice = event.data.object as Stripe.Invoice;
42      console.log('Payment failed for invoice:', invoice.id);
43      break;
44    }
45  }
46
47  return NextResponse.json({ received: true });
48}