Make your app monetized with Cursor ai + Stripe in 5 minutes

We will use Next.js + Stripe + Cursor ai to quickly build an online payment app .

Step 1: Create Next.js project using Cursor ai

1. Open Cursor ai (if not, install it first)

2. Create a new project

    npx create-next-app@latest stripe-app
   cd stripe-app

3. Install Stripe SDK

    npm install stripe @stripe/react-stripe-js @stripe/stripe-js

Step 2: Create API Key in Stripe

1. Register a Stripe account

2. Enter the developer dashboard

3. Copy the test mode API key :

• Publishable Key (for front-end)

• Secret Key (for backend)

4. Create a .env.local file in the project root directory :

    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your publishing keySTRIPE_SECRET_KEY=sk_test_your private key

Step 3: Use Cursor ai to generate Stripe payment API

1. Paste in pages/api/checkout.js :

    import Stripe from 'stripe';
   
   const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
   
   export default async function handler(req, res) {
     if (req.method === 'POST') {
       try {
         const session = await stripe.checkout.sessions.create({
           payment_method_types: ['card'],
           line_items: [
             {
               price_data: {
                 currency: 'usd',
                 product_data: { name: 'Virtual Lemonade' },
                 unit_amount: 100, // 1 USD },
               quantity: 1,
             },
           ],
           mode: 'payment',
           success_url: `${req.headers.origin}/success`,
           cancel_url: `${req.headers.origin}/cancel`,
         });
   
         res.status(200).json({ id: session.id });
       } catch (err) {
         res.status(500).json({ error: err.message });
       }
     } else {
       res.setHeader('Allow', ['POST']);
       res.status(405).end(`Method ${req.method} Not Allowed`);
     }
   }

2. Run the code in Cursor to ensure no errors

Step 4: Create a Payment Button

1. Paste in pages/index.js :

    import { loadStripe } from "@stripe/stripe-js";
   
   const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
   
   export default function Home() {
     const handleCheckout = async () => {
       const res = await fetch('/api/checkout', { method: 'POST' });
       const data = await res.json();
       const stripe = await stripePromise;
       await stripe.redirectToCheckout({ sessionId: data.id });
     };
   
     Return (
       <div>
         <h1>? Lemonade stand</h1>
         <p>Freshly squeezed lemonade, only sold for $1! </p>
         <button onClick={handleCheckout}>Buy now</button>
       </div>
     );
   }

2. Run the project :

    npm run dev

Step 5: Test payment

1. Visit http://localhost:3000

2. Click "Buy Now"

3. Enter the test card number 4242 4242 4242 4242

4. Payment successfully! ?

Step 6: Go online & receive payment

• Switch to Stripe production mode

• Update .env.local as the real API key

• Deploy Next.js to Vercel

• Start collecting payments!

In this way, you use Cursor ai + Stripe to monetize your app in 5 minutes !