How to Add Stripe Payments to Your App using Bolt.new

Adding payment processing used to be one of the most intimidating parts of web development. Between API keys, webhooks, PCI compliance, and testing, it could take days to implement correctly.

With Vibe Coding and Bolt.new, you can add Stripe payments to your app in under 30 minutes.

What We're Building

We'll add Stripe checkout to a simple SaaS app with:
* A pricing page with subscription plans
* Stripe Checkout integration
* Webhook handling for subscription events
* A customer portal for managing subscriptions

Prerequisites

1. A Stripe account (free at stripe.com)
2. Your Stripe API keys (test mode)

Step 1: Set Up Stripe

Get Your API Keys

1. Log in to Stripe Dashboard
2. Go to Developers > API Keys
3. Copy your Publishable Key and Secret Key (test mode)

Create Products

1. Go to Products
2. Create two products:
* Starter: $9/month
* Pro: $29/month
3. Note the Price IDs (e.g., `price_1234…`)

Step 2: Initialize the Project in Bolt.new

Go to bolt.new and paste:

> “Create a SaaS app with Stripe payment integration.
>
> Frontend:
> – React with Tailwind CSS
> – Pricing page with two plans: Starter ($9/mo) and Pro ($29/mo)
> – Each plan has a ‘Subscribe' button
>
> Backend:
> – Node.js with Express
> – Stripe integration for creating checkout sessions
> – Webhook endpoint to handle subscription events
> – Store subscription status in a database
>
> Use environment variables for Stripe keys.”

Step 3: Configure Environment Variables

Bolt.new will create a `.env` file. Update it with your Stripe keys:

“`env
STRIPE_SECRET_KEY=sk_test_…
STRIPE_PUBLISHABLE_KEY=pk_test_…
STRIPE_WEBHOOK_SECRET=whsec_… (we'll get this later)
STRIPE_PRICE_ID_STARTER=price_…
STRIPE_PRICE_ID_PRO=price_…
“`

Step 4: Review the Generated Code

Frontend: Pricing Page (`client/src/pages/Pricing.jsx`)

“`jsx
export function Pricing() {
const plans = [
{
name: ‘Starter',
price: ‘$9′,
priceId: process.env.REACT_APP_STRIPE_PRICE_ID_STARTER,
features: ['10 Projects', ‘5GB Storage', ‘Email Support']
},
{
name: ‘Pro',
price: ‘$29',
priceId: process.env.REACT_APP_STRIPE_PRICE_ID_PRO,
features: [‘Unlimited Projects', ‘100GB Storage', ‘Priority Support']
}
];

const handleSubscribe = async (priceId) => {
const response = await fetch(‘/api/create-checkout-session', {
method: ‘POST',
headers: { ‘Content-Type': ‘application/json' },
body: JSON.stringify({ priceId })
});

const { url } = await response.json();
window.location.href = url; // Redirect to Stripe Checkout
};

return (

);
}
“`

Backend: Create Checkout Session (`server/routes/stripe.js`)

“`javascript
const stripe = require(‘stripe')(process.env.STRIPE_SECRET_KEY);

router.post(‘/create-checkout-session', async (req, res) => {
const { priceId } = req.body;

try {
const session = await stripe.checkout.sessions.create({
mode: ‘subscription',
payment_method_types: [‘card'],
line_items: [
{
price: priceId,
quantity: 1,
},
],
success_url: `${process.env.CLIENT_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${process.env.CLIENT_URL}/pricing`,
customer_email: req.user.email, // Assuming you have auth
});

res.json({ url: session.url });
} catch (error) {
res.status(500).json({ error: error.message });
}
});
“`

Backend: Webhook Handler (`server/routes/webhooks.js`)

“`javascript
router.post(‘/webhook', express.raw({type: ‘application/json'}), async (req, res) => {
const sig = req.headers[‘stripe-signature'];

let event;
try {
event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_WEBHOOK_SECRET);
} catch (err) {
return res.status(400).send(`Webhook Error: ${err.message}`);
}

// Handle the event
switch (event.type) {
case ‘checkout.session.completed':
const session = event.data.object;
// Update user's subscription status in database
await db.run(
‘UPDATE users SET subscription_status = ?, stripe_customer_id = ? WHERE email = ?',
[‘active', session.customer, session.customer_email]
);
break;

case ‘customer.subscription.deleted':
const subscription = event.data.object;
// Cancel user's subscription in database
await db.run(
‘UPDATE users SET subscription_status = ? WHERE stripe_customer_id = ?',
[‘canceled', subscription.customer]
);
break;
}

res.json({received: true});
});
“`

Step 5: Test the Payment Flow

Test in Development

1. Click a “Subscribe” button
2. You'll be redirected to Stripe Checkout
3. Use test card: `4242 4242 4242 4242`
4. Expiry: Any future date
5. CVC: Any 3 digits
6. Complete the checkout

You'll be redirected back to your app with a success message.

Step 6: Set Up Webhooks

Webhooks notify your app when subscription events occur (e.g., payment failed, subscription canceled).

In Development (Using Stripe CLI)

“`bash
stripe listen –forward-to localhost:3000/api/webhook
“`

Copy the webhook signing secret and add it to `.env`:
“`env
STRIPE_WEBHOOK_SECRET=whsec_…
“`

In Production

1. Go to Stripe Dashboard > Developers > Webhooks
2. Add endpoint: `https://yourapp.com/api/webhook`
3. Select events: `checkout.session.completed`, `customer.subscription.deleted`, `invoice.payment_failed`
4. Copy the signing secret to your production environment variables

Step 7: Add Customer Portal

Let users manage their subscriptions (update payment method, cancel, etc.).

Prompt to Bolt.new:
> “Add a ‘Manage Subscription' button in the user dashboard. When clicked, it should redirect to the Stripe Customer Portal.”

Generated Code:
“`javascript
router.post(‘/create-portal-session', async (req, res) => {
const session = await stripe.billingPortal.sessions.create({
customer: req.user.stripeCustomerId,
return_url: `${process.env.CLIENT_URL}/dashboard`,
});

res.json({ url: session.url });
});
“`

Step 8: Handle Edge Cases

Failed Payments

Prompt:
> “Add email notifications when a payment fails. Use SendGrid to send an email to the user.”

Trial Periods

Prompt:
> “Add a 14-day free trial to both plans. Update the Stripe checkout session to include a trial period.”

Proration

Prompt:
> “Allow users to upgrade from Starter to Pro mid-month. Handle proration automatically.”

Step 9: Deploy

Deploy to production using Bolt.new's one-click deploy or:

“`bash

Frontend to Vercel

vercel

Backend to Railway

railway up
“`

Update your Stripe webhook endpoint to point to your production URL.

Security Best Practices

1. Never expose secret keys: Use environment variables
2. Verify webhook signatures: Always validate the Stripe signature
3. Use HTTPS: Stripe requires HTTPS for webhooks
4. Handle errors gracefully: Don't expose Stripe errors to users

Conclusion

Adding Stripe payments used to require deep knowledge of payment processing, webhooks, and security. With Vibe Coding, you describe what you want, and the AI handles the implementation.

At BYS Marketing, we've integrated Stripe into dozens of client apps. We can set up a complete payment system—including subscriptions, one-time payments, and customer portals—in a single day.

—

Need payment processing for your app?
Contact BYS Marketing. We'll integrate Stripe and handle all the technical complexity.