Why Stripe?

Stripe is a complete payment solution that provides:

• Secure Payments: PCI-compliant payment processing
• Checkout Sessions: Easy-to-use checkout flow
• Webhooks: Real-time payment event notifications
• Multi-Currency: Support for multiple currencies
• Easy Integration: Simple Next.js integration

Step-by-Step Setup

Step 1: Create Stripe Account

1. Go to stripe.com
2. Click "Sign Up" or "Start Now"
3. Sign up with your email address
4. Verify your email address
5. Complete the onboarding process

Step 2: Get API Keys

1. After signing in, navigate to Developers → API Keys
2. You'll see two keys:
   • Publishable Key: Starts with pk_test_ (for test) or pk_live_ (for production)
   • Secret Key: Starts with sk_test_ (for test) or sk_live_ (for production)
3. Copy both keys
4. Add them to your .env.local file:

   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxx
   STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxx

Step 3: Create Credit Products

LogoAIpro uses one-time payments for credit packages. Create products in Stripe:

1. Navigate to Products in the sidebar
2. Click "Add Product"
3. Create three products for your credit packages:
   • Basic Pack: One-time payment, $9.99 (50 credits)
   • Pro Pack: One-time payment, $24.99 (150 credits)
   • Enterprise Pack: One-time payment, $79.99 (500 credits)
4. For each product:
   • Enter product name (e.g., "Basic Pack")
   • Enter description
   • Set price (one-time payment)
   • Save the product
5. Copy the Price ID for each product (starts with price_)

Step 4: Configure Credit Packages in Code

Update credit packages in your pricing configuration file:

export const creditPackages = [
  {
    name: "Basic Pack",
    credits: 50,
    price: "$9.99",
    pricePerCredit: "$0.20 per credit",
    description: "Perfect for testing and small projects.",
    ctaLabel: "Buy Basic Pack",
    ctaHref: "/api/checkout/credits?plan=basic",
  },
  {
    name: "Pro Pack",
    credits: 150,
    price: "$24.99",
    pricePerCredit: "$0.17 per credit",
    description: "Best value for regular users and creators.",
    highlight: true,
    ctaLabel: "Buy Pro Pack",
    ctaHref: "/api/checkout/credits?plan=pro",
  },
  {
    name: "Enterprise Pack",
    credits: 500,
    price: "$79.99",
    pricePerCredit: "$0.16 per credit",
    description: "For businesses and heavy users.",
    ctaLabel: "Buy Enterprise Pack",
    ctaHref: "/api/checkout/credits?plan=enterprise",
  },
];

Step 5: Configure Checkout API

Update checkout route in app/api/checkout/credits/route.ts to map plans to Stripe Price IDs:

const PLAN_PRICE_MAP: Record = {
  'basic': process.env.STRIPE_PRICE_BASIC || 'price_xxxxxxxxxxxxx',
  'pro': process.env.STRIPE_PRICE_PRO || 'price_xxxxxxxxxxxxx',
  'enterprise': process.env.STRIPE_PRICE_ENTERPRISE || 'price_xxxxxxxxxxxxx',
};

Add these Price IDs to your .env.local:

STRIPE_PRICE_BASIC=price_xxxxxxxxxxxxx
STRIPE_PRICE_PRO=price_xxxxxxxxxxxxx
STRIPE_PRICE_ENTERPRISE=price_xxxxxxxxxxxxx

Step 6: Set Up Webhooks

Webhooks are essential for automatically adding credits to user accounts after payment.

1. Navigate to Developers → Webhooks in Stripe Dashboard
2. Click "Add Endpoint"
3. Configure the webhook:
   • Endpoint URL:

     # Development (use ngrok for local testing)
     https://your-ngrok-url.ngrok.io/api/webhooks/stripe
     
     # Production
     https://yourdomain.com/api/webhooks/stripe

   • Events to Listen For: Select these events:
     • checkout.session.completed - Payment successful
     • payment_intent.succeeded - Payment completed
     • payment_intent.payment_failed - Payment failed
4. Click "Add Endpoint"
5. Copy the Signing Secret (starts with whsec_)
6. Add it to your .env.local:

   STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx

Step 7: Configure Application URLs

1. Navigate to Settings → Branding in Stripe Dashboard
2. Configure your application details:
   • Business name: LogoAIpro
   • Support email: Your support email
   • Support phone: Your support phone (optional)
3. Configure redirect URLs in your checkout API route:

   success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard/credits?session_id={CHECKOUT_SESSION_ID}&success=true`,
   cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard/credits?canceled=true`,

Step 8: Test Payment Flow

1. Ensure all environment variables are set in .env.local
2. Start your development server: npm run dev
3. Navigate to Dashboard → Credits
4. Click "Buy Credits" on any package
5. Use Stripe test card: 4242 4242 4242 4242
6. Use any future expiry date and any 3-digit CVC
7. Complete the payment
8. Verify credits are added to your account

Production Setup

Switching to Production Keys

1. In Stripe Dashboard, toggle from "Test" to "Live" mode
2. Get your production API keys
3. Create production products and prices
4. Update environment variables on your production server:

   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxxxxxxxxxxxx
   STRIPE_SECRET_KEY=sk_live_xxxxxxxxxxxxx
   STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxx
   STRIPE_PRICE_BASIC=price_xxxxxxxxxxxxx
   STRIPE_PRICE_PRO=price_xxxxxxxxxxxxx
   STRIPE_PRICE_ENTERPRISE=price_xxxxxxxxxxxxx

5. Update webhook URL to your production domain
6. Test payment in production with a real card

Testing with Stripe Test Cards

Stripe provides test cards for testing different scenarios:

Use any future expiry date (e.g., 12/25) and any 3-digit CVC (e.g., 123).

Verification Checklist