Build E-commerce App with Stripe Payments

What you're building: Full e-commerce application with Stripe payment integration

Tech stack: React + NestJS + PostgreSQL + Stripe

Step 1: Tell Cocoding.ai What to Build

Copy/paste this prompt:

Build a full-stack e-commerce application with Stripe payment integration.

Frontend (React):
- Product listing page
- Shopping cart
- Checkout page with Stripe Elements
- Order confirmation page
- User authentication (register/login)

Backend (NestJS):
- Product management (CRUD)
- Shopping cart API
- Stripe payment integration (Payment Intents)
- Webhook handling for payment status
- Order management
- PostgreSQL database with TypeORM

Payment Flow:
1. Customer adds products to cart
2. Checkout → Create Payment Intent
3. Collect payment details with Stripe Elements
4. Confirm payment on client side
5. Webhook updates order status
6. Show confirmation page

Features:
- Secure payment processing with Stripe
- Real-time payment status updates via webhooks
- Order history
- Email confirmation on successful payment

Cocoding.ai creates everything automatically — backend, frontend, database, payment integration.

Step 2: Get Stripe API Keys

2.1 Create Stripe Account

Visit: [dashboard.stripe.com/register](https://dashboard.stripe.com/register)

📸 Screenshot placeholder: Stripe registration page

Sign up for a test account (free).

2.2 Get Test Keys

1. Go to: [dashboard.stripe.com/test/apikeys](https://dashboard.stripe.com/test/apikeys)
2. Copy Publishable key (starts with pk_test_)
3. Click Reveal next to Secret key (starts with sk_test_)

📸 Screenshot placeholder: API keys page showing keys to copy

Step 3: Add Stripe Keys to App

📸 Screenshot placeholder: .env file showing Stripe keys

Open backend/.env and update:

STRIPE_SECRET_KEY=sk_test_YOUR_SECRET_KEY_HERE

Open frontend/.env and update:

VITE_STRIPE_PUBLISHABLE_KEY=pk_test_YOUR_PUBLISHABLE_KEY_HERE

Save the files — both frontend and backend restart automatically.

Step 4: Test Your E-commerce App

📸 Screenshot placeholder: App homepage showing products

4.1 Browse Products

1. Open the app (Cocoding.ai provides URL)
2. View product listings
3. Click on products for details

📸 Screenshot placeholder: Product detail page

4.2 Add to Cart

1. Click "Add to Cart" on products
2. View cart by clicking cart icon
3. Adjust quantities if needed

📸 Screenshot placeholder: Shopping cart page

4.3 Checkout with Stripe

1. Click "Checkout"
2. Fill in shipping information
3. Enter payment details using Stripe Elements

📸 Screenshot placeholder: Checkout page with Stripe payment form

Test Card Numbers:

• Success: 4242 4242 4242 4242 (any future expiry, any CVC)
• Decline: 4000 0000 0000 0002
• Insufficient Funds: 4000 0000 0000 9995

1. Click "Pay Now"

📸 Screenshot placeholder: Payment processing/loading state

1. Wait for payment confirmation
2. See order confirmation page!

📸 Screenshot placeholder: Order confirmation page with order details

Step 5: Set Up Webhooks (Optional but Recommended)

Webhooks notify your app when payment status changes, ensuring your database stays in sync with Stripe.

5.1 Install Stripe CLI

macOS:

brew install stripe/stripe-cli/stripe

Linux:

wget https://github.com/stripe/stripe-cli/releases/download/v1.19.4/stripe_1.19.4_linux_x86_64.tar.gz
tar -xvf stripe_1.19.4_linux_x86_64.tar.gz
sudo mv stripe /usr/local/bin

5.2 Authenticate

stripe login

📸 Screenshot placeholder: Stripe login browser flow

5.3 Start Webhook Forwarding

stripe listen --forward-to http://localhost:8001/api/webhooks/stripe

Copy the webhook signing secret (whsec_...).

📸 Screenshot placeholder: Terminal showing webhook secret

5.4 Add Webhook Secret

Open backend/.env and add:

STRIPE_WEBHOOK_SECRET=whsec_YOUR_WEBHOOK_SECRET_HERE

5.5 Test Webhook

stripe trigger payment_intent.succeeded

Expected Backend Logs:

🎣 Stripe webhook received
✅ Webhook verified successfully
📦 Order status updated to: completed

How Stripe Payments Work

1. Customer adds products to cart
   ↓
2. Clicks "Checkout" → POST /api/payments/create-intent
   ↓
3. Backend creates Stripe Payment Intent
   - Calculates total amount
   - Creates payment intent in Stripe
   - Returns client_secret
   ↓
4. Frontend receives client_secret
   ↓
5. Stripe Elements collects card details
   - Card number, expiry, CVC
   - Tokensizes securely (card data never hits your server)
   ↓
6. Confirm payment → stripe.confirmCardPayment()
   ↓
7. Stripe processes payment
   - Authenticates card (3D Secure if needed)
   - Charges card
   ↓
8. Payment succeeds/failed
   ↓
9. Webhook: Stripe → POST /api/webhooks/stripe
   - Backend verifies signature
   - Updates order status in database
   - Sends confirmation email
   ↓
10. Frontend shows confirmation

Troubleshooting

Payment fails with "Invalid API Key"?

• Verify STRIPE_SECRET_KEY in backend .env
• Verify VITE_STRIPE_PUBLISHABLE_KEY in frontend .env
• Check keys start with pk_test_ / sk_test_
• Restart frontend and backend after updating keys

Stripe Elements not loading?

• Check browser console for errors
• Verify frontend .env has correct publishable key
• Check VITE_ prefix (required for Vite)
• Restart frontend dev server

Payment creates but order not updating?

• Webhook secret might be missing
• Test webhook: stripe trigger payment_intent.succeeded
• Check backend logs for webhook errors
• Verify webhook endpoint is accessible

Test card declined?

• Use correct test card: 4242 4242 4242 4242
• Check expiry date is in future
• Use any 3-digit CVC
• Ensure you're in test mode (not live mode)

Amount showing as cents?

Stripe uses amounts in cents ($10.00 = 1000). Backend should handle this automatically. If not, tell Cocoding.ai: "Fix Stripe amount formatting - dollars should be converted to cents"

Test Different Payment Scenarios

Successful Payment

Card: 4242 4242 4242 4242
Expiry: Any future date
CVC: Any 3 digits
Result: Payment succeeds ✅

Declined Card

Card: 4000 0000 0000 0002
Result: Payment declined ❌

Insufficient Funds

Card: 4000 0000 0000 9995
Result: Payment declined with "insufficient funds" message

Requires 3D Secure

Card: 4000 0025 0000 3155
Result: Shows test authentication page

Production Setup

Step 1: Get Live API Keys

1. Go to: [dashboard.stripe.com/apikeys](https://dashboard.stripe.com/apikeys)
2. Toggle to "Live mode"
3. Copy live Publishable key (pk_live_)
4. Copy live Secret key (sk_live_)

📸 Screenshot placeholder: Live API keys section

Step 2: Update Environment Variables

Backend:

STRIPE_SECRET_KEY=sk_live_YOUR_LIVE_SECRET_KEY

Frontend:

VITE_STRIPE_PUBLISHABLE_KEY=pk_live_YOUR_LIVE_PUBLISHABLE_KEY

Step 3: Configure Production Webhook

1. Go to: [dashboard.stripe.com/webhooks](https://dashboard.stripe.com/webhooks)
2. Click "Add endpoint"
3. Enter URL:
4. Select events:

- payment_intent.succeeded

- payment_intent.payment_failed

1. Click "Add endpoint"
2. Copy webhook signing secret (whsec_...)
3. Add to backend .env:

STRIPE_WEBHOOK_SECRET=whsec_YOUR_LIVE_WEBHOOK_SECRET

📸 Screenshot placeholder: Production webhook endpoint configuration

Step 4: Test Live Payment

1. Use a real card (small amount like $1.00)
2. Complete checkout
3. Verify order status updates
4. Check Stripe dashboard for payment

Security Best Practices

✅ Never store card data — Let Stripe handle it with Stripe Elements

✅ Always verify webhook signatures

1// Backend automatically does this
2const event = stripe.webhooks.constructEvent(rawBody, signature, secret);

✅ Use environment variables for keys — Never hardcode API keys

✅ Never log full card details — Only log last 4 digits

✅ Enable Stripe Radar — Fraud protection (included with Stripe)

✅ Set up alerts — Get notified of failed payments

Costs & Pricing

Stripe Fees (per transaction):

• Card payments: 2.9% + $0.30 (US)
• International cards: Additional 1%
• No monthly fees — Pay only when you process payments

Example:

• $100 payment → $3.20 fee (2.9% = $2.90 + $0.30)
• You receive: $96.80

Customize Your App

Tell Cocoding.ai what you want:

Payment Features

• "Add support for multiple payment methods (Apple Pay, Google Pay)"
• "Add saved cards for returning customers"
• "Implement subscription/recurring payments"
• "Add support for coupons and discounts"
• "Implement partial refunds"
• "Add support for multiple currencies"

Order Management

• "Send email confirmation with order details"
• "Add order tracking page"
• "Implement order status updates (shipped, delivered)"
• "Add printable invoice generation"
• "Export orders to CSV"

Checkout Experience

• "Add guest checkout (no account required)"
• "Implement express checkout"
• "Add multiple shipping options"
• "Calculate sales tax automatically"
• "Add digital product downloads"

Admin Features

• "Add admin dashboard to manage products"
• "Add order management panel"
• "View sales analytics and reports"
• "Manage inventory with stock alerts"

Going to Production Checklist

• [ ] Switched from test keys to live keys
• [ ] Production webhook endpoint configured
• [ ] HTTPS enabled on your domain (required)
• [ ] Terms of service and privacy policy added
• [ ] Business information verified in Stripe
• [ ] Payment page descriptor configured
• [ ] Error handling tested
• [ ] Email notifications working
• [ ] Test transactions completed successfully
• [ ] Monitoring/alerts set up
• [ ] Refund process documented
• [ ] Customer support contact info visible

Pro Tips

Test thoroughly:

• Use Stripe test cards for all scenarios
• Test failed payments, declines, refunds
• Test webhook delivery
• Verify order status updates correctly

Optimize checkout:

• Minimize form fields
• Show order summary clearly
• Display security badges
• Support guest checkout
• Auto-focus on card field

Monitor payments:

• Check Stripe Dashboard regularly
• Set up email alerts for failed payments
• Track conversion rates
• Monitor webhook delivery success rate

Handle errors gracefully:

• Show clear error messages
• Provide retry options
• Offer customer support contact
• Log errors for debugging

FAQ

Q: Do I need to be PCI compliant?

A: Using Stripe Elements, you're PCI compliant! Stripe handles card data security.

Q: Can I accept international payments?

A: Yes! Stripe supports 135+ currencies. Tell Cocoding.ai: "Add multi-currency support"

Q: How do I handle refunds?

A: Use Stripe Dashboard or API. Tell Cocoding.ai: "Add refund button in order management"

Q: Can I save cards for repeat customers?

A: Yes! Tell Cocoding.ai: "Add saved cards feature with Stripe Setup Intents"

Q: What about subscriptions?

A: Tell Cocoding.ai: "Add Stripe Subscription integration for recurring payments"

Q: How do I handle sales tax?

A: Tell Cocoding.ai: "Integrate Stripe Tax for automatic tax calculation"

Q: Can I use different payment methods?

A: Yes! Stripe supports 40+ payment methods. Tell Cocoding.ai: "Add [payment method] support"