Lovable and Stripe Connect integration: Step-by-Step Guide 2025

 

Setting Up Stripe Dependency in Your Project

 

In your Lovable project, you need to add Stripe as a dependency. Because Lovable doesn't have a terminal, add the dependency manually in your package configuration file. Open your project’s package.json file and add the Stripe dependency under "dependencies".

{
  "dependencies": {
    "stripe": "^10.0.0"
    // ... other dependencies
  }
  // ... rest of package.json contents
}

Make sure to save the file after you add the dependency so that Lovable recognizes it.

 

Creating a Stripe Integration File

 

Create a new file called stripe.ts in a suitable folder (for example, in a folder named src/integrations). This file will initialize your Stripe instance using your secret key stored as an environment variable.

// File: src/integrations/stripe.ts
import Stripe from 'stripe';

const stripeSecretKey = process.env.STRIPESECRETKEY || 'yourstripesecretkeyhere';
const stripe = new Stripe(stripeSecretKey, {
  apiVersion: '2022-11-15'
});

export default stripe;

Remember to replace 'yourstripesecretkeyhere' with your actual key or set the environment variable in your project settings.

 

Adding a Route for Creating a Stripe Connect Account

 

Inside your existing server route handling code (or if your project has a routes folder, in a new file), add a new route that creates a Stripe Connect Express account and generates an onboarding link. For instance, create a file named stripe-connect.ts in your routes folder.

// File: src/routes/stripe-connect.ts
import { Request, Response, Router } from 'express';
import stripe from '../integrations/stripe';

const router = Router();

router.post('/create-stripe-account', async (req: Request, res: Response) => {
  try {
    // Create a new Express Connect account
    const account = await stripe.accounts.create({ type: 'express' });

    // Create an account link for the onboarding process
    const accountLink = await stripe.accountLinks.create({
      account: account.id,
      refresh_url: 'https://your-lovable-app.com/reauth',
      return_url: 'https://your-lovable-app.com/return',
      type: 'account_onboarding'
    });

    res.json({ url: accountLink.url });
  } catch (error: any) {
    res.status(500).json({ error: error.message });
  }
});

export default router;

Adjust the refreshurl and returnurl to match your Lovable project domain.

 

Integrating Stripe Webhooks

 

To handle asynchronous events from Stripe, create a webhook endpoint. Since Lovable is coded in TypeScript and uses Express, create a file named stripe-webhook.ts in your routes folder. This file will build the webhook using Stripe’s library and verify the signature.

// File: src/routes/stripe-webhook.ts
import { Request, Response, Router } from 'express';
import bodyParser from 'body-parser';
import stripe from '../integrations/stripe';

const router = Router();

// Use raw body parser for webhooks
router.post('/webhook', bodyParser.raw({ type: 'application/json' }), (req: Request, res: Response) => {
  const sig = req.headers['stripe-signature'] as string;
  const webhookSecret = process.env.STRIPEWEBHOOKSECRET || 'yourwebhooksecret_here';

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

  // Example: handling a Connect account update event
  if (event.type === 'account.updated') {
    const account = event.data.object;
    // Process the account update, for example update your database
  }

  // Respond to acknowledge receipt of the event
  res.json({ received: true });
});

export default router;

Be sure to replace 'yourwebhooksecret_here' with your actual webhook secret, or store it securely as an environment variable.

 

Configuring Environment Variables

 

Place your sensitive keys into Lovable’s environment configuration settings. If your project has a configuration file, for example config.ts, add the following lines to access your keys:

// File: src/config.ts
export const STRIPESECRETKEY = process.env.STRIPESECRETKEY || 'yourstripesecretkeyhere';
export const STRIPEWEBHOOKSECRET = process.env.STRIPEWEBHOOKSECRET || 'yourwebhooksecret_here';

Then, update the stripe integration file if necessary to import from config.ts.

 

Registering the New Routes

 

To ensure that the new Stripe Connect and webhook routes are part of your Lovable project, register them in your main server file. This might be your app.ts or index.ts file. Add the following code to include the routes:

// File: src/app.ts or src/index.ts
import express from 'express';
import stripeConnectRoutes from './routes/stripe-connect';
import stripeWebhookRoutes from './routes/stripe-webhook';

const app = express();

// For JSON parsing on non-webhook routes
app.use(express.json());

// Register Stripe Connect route
app.use('/api', stripeConnectRoutes);

// Register Stripe Webhook endpoint
app.use('/api', stripeWebhookRoutes);

// ... other app configuration

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(Server running on port ${PORT});
});

Make sure to save all changes and Lovable will detect the updates to include the new functionality.

 

Testing the Stripe Integration

 

To check that your integration works properly, simulate a call from your Lovable user interface to the /api/create-stripe-account endpoint and confirm that you receive a URL for the Stripe Connect onboarding. Additionally, verify that your webhook endpoint processes events correctly by sending test webhook events from your Stripe dashboard.

 

By following these steps and inserting the code snippets into the indicated files, you will integrate Stripe Connect into your Lovable project.