LogoNEXTDEVKIT Docs

Overview

Learn how to set up and use Stripe for handling payments and subscriptions in NEXTDEVKIT

🚀 Setup

NEXTDEVKIT supports flexible pricing with Free, Pro (subscription), and Lifetime (one-time) plans. Follow these steps to set up Stripe integration:

1. Create Stripe Account

  1. Create a Stripe account at stripe.com
  2. Go to the Stripe Dashboard

2. Get API Keys

  1. Go to Developers → API keys
  2. Copy your Secret key (starts with sk_test_ for test mode)

Add to your .env file:

STRIPE_SECRET_KEY="sk_test_your_secret_key"

3. Set up Webhooks

  1. Go to Developers → Webhooks

  2. Click "Add endpoint"

  3. Enter your webhook URL: https://your-domain.com/api/webhooks/stripe

  4. Select these events:

    • checkout.session.completed
    • customer.subscription.created
    • customer.subscription.updated
    • customer.subscription.deleted

  5. Copy the Webhook Signing Secret (starts with whsec_)

Add to your .env file:

STRIPE_WEBHOOK_SECRET="whsec_your_webhook_secret"

4. Create Products and Prices

Pro Subscription Product

  1. Go to Products → Add product
  2. Name: "Pro Plan"
  3. Add Monthly price:
    • Price: $9.90 USD
    • Billing period: Monthly
    • Recurring: Yes
    • Copy the Price ID (starts with price_)
  4. Add Yearly price:
    • Price: $99.00 USD
    • Billing period: Yearly
    • Recurring: Yes
    • Copy the Price ID (starts with price_)

Lifetime Product

  1. Go to Products → Add product
  2. Name: "Lifetime Plan"
  3. Add One-time price:
    • Price: $399.00 USD
    • Billing period: One-time
    • Recurring: No
    • Copy the Price ID (starts with price_)

5. Configure Environment Variables

# Stripe Configuration
STRIPE_SECRET_KEY="sk_test_your_secret_key"
STRIPE_WEBHOOK_SECRET="whsec_your_webhook_secret"

# Price IDs
NEXT_PUBLIC_PRICE_ID_PRO_MONTHLY=
NEXT_PUBLIC_PRICE_ID_PRO_YEARLY=
NEXT_PUBLIC_PRICE_ID_LIFETIME=

🏗️ Payment Architecture

NEXTDEVKIT's payment system consists of:

src/
├── payment/
│   ├── types.ts          # Payment types and interfaces
│   ├── actions.ts        # Server actions for payments
│   └── providers/
│       ├── index.ts      # Payment provider factory
│       └── stripe.ts     # Stripe implementation
├── config/
│   └── marketing/
│       └── pricing.ts    # Pricing configuration

🧪 Testing

Test Credit Cards

Use these test cards with Stripe:

Card NumberDescription
4242 4242 4242 4242Successful payment
4000 0000 0000 32203D Secure authentication
4000 0000 0000 9995Insufficient funds
4000 0000 0000 0069Expired card

Local Development

# Install Stripe CLI
brew install stripe/stripe-cli/stripe

# Login to Stripe
stripe login

# Forward events to local server
stripe listen --forward-to localhost:3000/api/webhooks/stripe

# Test webhooks
stripe trigger checkout.session.completed
stripe trigger customer.subscription.created

or you can use the ngrok to create a tunnel to your local machine. Ngrok will then give you a URL that you can use to test the webhook locally.

ngrok http 3000

🔧 Troubleshooting

Common Issues

Webhook Not Receiving Events:

  • Check webhook URL is correct
  • Verify webhook signing secret
  • Ensure HTTPS in production
  • Check selected events

Payment Failures:

  • Verify API keys are correct
  • Check card details format
  • Ensure proper error handling
  • Test with different cards

Customer Portal Issues:

  • Check customer ID is valid
  • Verify return URL is correct
  • Ensure customer has payment methods

Subscription Problems:

  • Check subscription status
  • Verify webhook processing
  • Review billing cycle settings

🔗 Related Resources

🎯 Next Steps

Now that you understand payments, you can: