Stripe Payment Integration Issues

[cosimocedrichm-8410]

Current versus Expected Behavior

Expected Behavior:

• Payment system should work seamlessly in both test and production environments

• Users should be able to complete payments for Premium (€7.99/month) and Epic (€20.99/month) plans

• Payment intents should be created successfully with proper Stripe configuration

• System should automatically detect environment and use appropriate Stripe keys

Current Behavior:

• Payment system frequently falls back to “demo mode” even when Stripe keys are configured

• Users encounter “Payment system temporarily unavailable” errors

• Inconsistent environment detection between development and production

• Payment intents fail to create due to configuration issues

• Error messages reference “Alive Team” but don’t provide clear resolution steps

Code Configuration Issues

1. Environment Variable Configuration Problems

Current problematic setup in .env.local:

Inconsistent key naming and environment detection

STRIPE_SECRET_KEY=sk_live_… # Used for production
STRIPE_SECRET_TEST_KEY=sk_test_… # Used for development
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_… # Always live key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_TEST_KEY=pk_test_… # Not being used properly

Issues:

• Environment detection logic is flawed in app/api/create-payment-intent/route.ts
• Publishable key doesn’t switch between test/live based on environment
• Multiple environment variables (NODE_ENV, NEXT_PUBLIC_APP_ENV, VERCEL_ENV) create confusion

2. Stripe Initialization Problems

Problematic code in app/api/create-payment-intent/route.ts:
// Environment-based Stripe key selection
const getStripeKey = () => {
// Check for explicit environment variable
if (process.env.NEXT_PUBLIC_APP_ENV === “production”) {
return process.env.STRIPE_SECRET_KEY
}

// Fallback to NODE_ENV
if (process.env.NODE_ENV === “production”) {
return process.env.STRIPE_SECRET_KEY
}

// Default to test key
return process.env.STRIPE_SECRET_TEST_KEY || process.env.STRIPE_SECRET_KEY
}

Issues:

• Complex environment detection logic that fails in edge cases
• No validation that the selected key matches the environment
• Missing error handling for key format validation
• Stripe instance created at module level, not per request

3. Frontend/Backend Key Mismatch

Frontend Stripe initialization:
// In components/payment-form.tsx
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || “”)

Stripe Payment Integration Issues - Alive Assist Platform

Current versus Expected Behavior

Expected Behavior:

• Payment system should work seamlessly in both test and production environments
• Users should be able to complete payments for Premium (€7.99/month) and Epic (€20.99/month) plans
• Payment intents should be created successfully with proper Stripe configuration
• System should automatically detect environment and use appropriate Stripe keys

Current Behavior:

• Payment system frequently falls back to “demo mode” even when Stripe keys are configured
• Users encounter “Payment system temporarily unavailable” errors
• Inconsistent environment detection between development and production
• Payment intents fail to create due to configuration issues
• Error messages reference “Alive Team” but don’t provide clear resolution steps

Code Configuration Issues

1. Environment Variable Configuration Problems

Current problematic setup in .env.local :

# Inconsistent key naming and environment detection STRIPE_SECRET_KEY=sk_live_... # Used for production STRIPE_SECRET_TEST_KEY=sk_test_... # Used for development NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_... # Always live key NEXT_PUBLIC_STRIPE_PUBLISHABLE_TEST_KEY=pk_test_... # Not being used properly

Issues:

• Environment detection logic is flawed in app/api/create-payment-intent/route.ts
• Publishable key doesn’t switch between test/live based on environment
• Multiple environment variables (NODE_ENV , NEXT_PUBLIC_APP_ENV , VERCEL_ENV ) create confusion

2. Stripe Initialization Problems

Problematic code in app/api/create-payment-intent/route.ts :

`// Environment-based Stripe key selection
const getStripeKey = () => {
// Check for explicit environment variable
if (process.env.NEXT_PUBLIC_APP_ENV === “production”) {
return process.env.STRIPE_SECRET_KEY
}

// Fallback to NODE_ENV
if (process.env.NODE_ENV === “production”) {
return process.env.STRIPE_SECRET_KEY
}

// Default to test key
return process.env.STRIPE_SECRET_TEST_KEY || process.env.STRIPE_SECRET_KEY
}`

Issues:

• Complex environment detection logic that fails in edge cases
• No validation that the selected key matches the environment
• Missing error handling for key format validation
• Stripe instance created at module level, not per request

3. Frontend/Backend Key Mismatch

Frontend Stripe initialization:

// In components/payment-form.tsx const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "")

Issues:

• Frontend always uses the same publishable key regardless of environment
• No runtime validation that frontend and backend keys match (test vs live)
• Missing error handling when publishable key is undefined

Steps to Reproduce the Issue

1. Deploy to production with environment variables:
   STRIPE_SECRET_KEY=sk_live_…
   NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_…
   STRIPE_WEBHOOK_SECRET=whsec_…
   NEXT_PUBLIC_APP_ENV=production

Navigate to pricing page and select a plan
Click “Get Started” button
Observe error: “Payment system temporarily unavailable”
Check browser console: Shows demo mode fallback despite live keys being configured
Check server logs: Shows Stripe initialization failures or key validation errors

Project Information

Framework: Next.js 14 with App Router
Environment: Vercel deployment
Stripe API Version: 2024-06-20
Payment Methods: Card payments (€7.99/month Premium, €20.99/month Epic)
Project URL: alive-assist.com

Specific Error Messages Encountered

Stripe API Error: No such payment_intent: pi_…
Payment intent creation error: Invalid payment request
Stripe not configured, falling back to demo mode
Payment system configuration error

Configuration Files Involved

1. app/api/create-payment-intent/route.ts - Main payment endpoint
2. components/payment-form.tsx - Frontend payment component
3. lib/stripe-client.ts - Frontend Stripe initialization
4. lib/stripe-server.ts - Backend Stripe initialization
5. .env.local - Environment variables
6. next.config.mjs - Next.js configuration

Required Fix Areas

1. Simplify environment detection - Use single source of truth
2. Validate key pairing - Ensure test keys are used together, live keys together
3. Improve error handling - Provide actionable error messages
4. Add configuration validation - Check keys at startup
5. Standardize initialization - Consistent Stripe setup across frontend/backend
6. Add logging - Better debugging information for payment failures

Environment Variables Needed for Resolution

Production

STRIPE_SECRET_KEY=sk_live_…
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_…
STRIPE_WEBHOOK_SECRET=whsec_…

Development

STRIPE_SECRET_TEST_KEY=sk_test_…
NEXT_PUBLIC_STRIPE_PUBLISHABLE_TEST_KEY=pk_test_…

Environment detection

NODE_ENV=production # or development

The core issue is inconsistent environment detection and key management across the application, leading to mismatched Stripe configurations and payment failures.

[system]

Did you know there’s another category dedicated to v0 topics? A human should be here soon to help, but the answer may already be available even faster in one of these other posts.

Our docs are a great place to start.

v0

We also have a walkthrough to help guide your workflow.

Become a v0 expert

Getting Started Using v0 is like chatting with a frontend engineer, who takes in your design guidelines and creates an application for you. A common workflow with v0 is putting in design files and images to scaffold your application and then use text prompts to nudge v0 into creating your perfect application. Remember, just like any other AI tool, the quality of the output that v0 generates depends on the quality of the prompt or instructions you input. So, it’s important to be clear, descripti…

And these recordings can give you a look at v0 features and strategies in action shown by our Community:

https://community.vercel.com/tags/c/events/42/v0

[cosimocedrichm-8410]

Hi!

Please let me know what the issue could be with the real payments not working in production, connected to my Stripe account.

It might be the change to a new domain www.alive-assist.com blocking the integration.

[jacobparis]

There should be no separate “TEST_KEY” environment variables, you will just use production key values in prod and your test key values in your development environment

That will make it impossible for your production environment to be in test mode

For Production (Vercel):

STRIPE_SECRET_KEY=sk_live_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

For Development (.env.local):

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...