Stripe Setup

1. Create a Stripe Account and Get API Keys

1. Go to the Stripe Dashboard  and log in (or create a new account).
2. If you haven’t already, activate your account by providing business details (you can use test mode first).
3. Navigate to Developers → API keys.
4. Copy the following keys:
   • Publishable key (starts with pk_test_)
   • Secret key (starts with sk_test_)

2. Add Stripe Environment Variables

Add the keys to your .env.local file:

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=           # You will fill this later after creating the webhook

• STRIPE_SECRET_KEY – your secret key (keep it safe, never expose it client‑side).

• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY – your publishable key (safe to use on the frontend).

• STRIPE_WEBHOOK_SECRET – will be set after configuring the webhook (step 6).

3. Create Products and Prices in Stripe

In Stripe, products represent what you sell, and prices define the cost and billing interval.

1. In the Stripe Dashboard, go to Products → Add Product.

2. Create two products with monthly recurring prices:

   • Pro – e.g., $15.00/month

     • After creation, copy the Price ID (starts with price_).
     • Example: price_1T4Gva0nFlRU9YFbswMyH3tw

   • Enterprise – e.g., $50.00/month

     • Copy its Price ID as well.
     • Example: price_1T4Gvb0nFlRU9YFbswMyH4ux

4. Enter Price IDs into the Admin Panel

1. Log in to your Prodly admin panel.

2. Navigate to Admin Panel → Settings.

3. You will see groups like General, Free Plan, Pro Plan, Enterprise Plan.

4. In the Pro Plan group, locate the setting for the Stripe Price ID (e.g., Stripe Price ID for Pro). If it doesn’t exist, you can add it directly in the database (the admin panel automatically displays all settings from the settings table).

• Key: Stripe Price ID for Pro

• Value: paste your Pro Price ID (e.g., price_1T4Gva0nFlRU9YFbswMyH3tw)

• Plan price in cents: 1500

5. In the Enterprise Plan group, do the same for Stripe Price ID for Enterprise.

6. Click Save All at the top or bottom of the page.

5. Checkout Session Creation (Already Implemented)

Your application already contains the necessary API route to create a Stripe Checkout session.

File: src/app/api/stripe/create-checkout-session/route.ts

This endpoint reads the appropriate Price ID from the database based on the selected plan, so no code changes are needed. It returns a session URL that redirects the user to Stripe’s payment page.

6. Configure the Webhook in Stripe Dashboard

The webhook listens for events from Stripe (successful payment, subscription updates) and updates your database accordingly.

For Local Development

You need to expose your local server to the internet so Stripe can reach it. Use Stripe CLI (recommended) or ngrok.

A. Using Stripe CLI:

1. Install the Stripe CLI from stripe.com/docs/stripe-cli .

2. Run:

stripe login
stripe listen --forward-to localhost:3000/api/stripe/webhook

The CLI will output a webhook signing secret. Copy it and add to your .env.local:

STRIPE_WEBHOOK_SECRET=whsec_...

B. Using ngrok:

1. Start your Next.js app (npm run dev).

2. In another terminal, run:

ngrok http 3000

3. Copy the generated HTTPS URL (e.g., https://abc123.ngrok.io).

4. In Stripe Dashboard, go to Developers → Webhooks → Add endpoint.

5. Enter your ngrok URL + /api/stripe/webhook (e.g., https://abc123.ngrok.io/api/stripe/webhook).

6. Select events to listen to:

• checkout.session.completed

• customer.subscription.updated

• customer.subscription.deleted

7. After creation, click Click to reveal in the Signing secret section and copy the secret. Add it to your .env.local as STRIPE_WEBHOOK_SECRET.

For Production

When your app is live on Vercel (or another platform), create a new webhook endpoint pointing to:

https://yourdomain.com/api/stripe/webhook

Subscribe to the same events, copy the signing secret, and set it as STRIPE_WEBHOOK_SECRET in your hosting environment (e.g., Vercel Environment Variables).

7. Webhook Handler (Already Implemented)

Your project includes a webhook handler at src/app/api/stripe/webhook/route.ts. It processes Stripe events and updates user credits accordingly. When a checkout.session.completed event is received, it:

• Extracts the user ID from client_reference_id

• Determines which Price ID was used

• Looks up the corresponding credits from the plan configuration (which can also be stored in settings, e.g., pro_credits, enterprise_credits)

Increments the user’s credits_remaining in the database

No additional coding is required – just ensure your database has the necessary columns and functions (like increment_credits).

8. Test the Integration

1. Make sure your app is running and the webhook is listening (Stripe CLI or ngrok active).

2. Go to your pricing page and click Subscribe on a plan.

3. You will be redirected to Stripe’s Checkout page. Use the test card:

   • Card number: 4242 4242 4242 4242

   • Expiry: any future date

   • CVC: any 3 digits

4. After successful payment, you should be redirected back to your app.

5. Check that the user’s credits have increased. You can verify in the database or via the user dashboard.

6. In Stripe Dashboard, navigate to Events to confirm that the checkout.session.completed event was sent and received successfully.