320 lines
7.8 KiB
Markdown
320 lines
7.8 KiB
Markdown
# 🎭 Testing Stripe with Fake Accounts - Super Simple Guide
|
|
|
|
## 🚀 Quick Start (5 Minutes)
|
|
|
|
### Step 1: Make Sure Stripe Test Mode is ON
|
|
|
|
In Stripe Dashboard, ensure you're in **TEST MODE** (toggle in top-right corner should say "Test mode").
|
|
|
|
### Step 2: Create "Standard" Product in Stripe
|
|
|
|
1. Go to **Products** in Stripe Dashboard
|
|
2. Click **Add product**
|
|
3. Name: `Standard`
|
|
4. Monthly price: `€9.99/month`
|
|
5. Click **Add product**
|
|
6. **Copy the price ID** (looks like `price_1O7...`)
|
|
7. Add to `apps/main/.env`:
|
|
```env
|
|
VITE_STRIPE_STANDARD_MONTHLY_PRICE_ID=price_YOUR_ID_HERE
|
|
```
|
|
|
|
### Step 3: Start Everything
|
|
|
|
**Terminal 1 - API:**
|
|
```bash
|
|
cd api
|
|
npm run dev
|
|
```
|
|
|
|
**Terminal 2 - Frontend:**
|
|
```bash
|
|
cd apps/main
|
|
npm run dev
|
|
```
|
|
|
|
**Terminal 3 - Stripe Webhooks:**
|
|
```bash
|
|
stripe listen --forward-to http://localhost:3000/api/v1/stripe/webhook
|
|
```
|
|
|
|
Copy the webhook secret (`whsec_...`) and add to `api/.env`:
|
|
```env
|
|
STRIPE_WEBHOOK_SECRET=whsec_YOUR_SECRET_HERE
|
|
```
|
|
|
|
Restart your API (Terminal 1).
|
|
|
|
### Step 4: Create Fake Test Accounts
|
|
|
|
Create 3 test users in your app:
|
|
|
|
**Account 1: Free User (stays free)**
|
|
```
|
|
Email: free.user@test.com
|
|
Password: TestPass123!
|
|
Name: Free User
|
|
```
|
|
|
|
**Account 2: Premium User (will subscribe)**
|
|
```
|
|
Email: premium.user@test.com
|
|
Password: TestPass123!
|
|
Name: Premium User
|
|
```
|
|
|
|
**Account 3: Canceling User (subscribe then cancel)**
|
|
```
|
|
Email: cancel.user@test.com
|
|
Password: TestPass123!
|
|
Name: Cancel User
|
|
```
|
|
|
|
## 🧪 Testing Scenarios
|
|
|
|
### Test 1: Free User ✅
|
|
|
|
1. **Login** as `free.user@test.com`
|
|
2. **Go to Settings**
|
|
3. **You should see:**
|
|
- Badge: "Gratuit"
|
|
- Message: "Passez à Standard..."
|
|
- Button: "Passer à Standard"
|
|
|
|
**Verify in database:**
|
|
```sql
|
|
SELECT email, is_paying, subscription_tier
|
|
FROM profiles
|
|
WHERE email = 'free.user@test.com';
|
|
-- Should show: is_paying = false, subscription_tier = 'free'
|
|
```
|
|
|
|
### Test 2: Subscribe to Standard 💳
|
|
|
|
1. **Login** as `premium.user@test.com`
|
|
2. **Go to Settings**
|
|
3. **Click "Passer à Standard"**
|
|
4. **In Stripe Checkout, enter:**
|
|
```
|
|
Email: premium.user@test.com
|
|
Card: 4242 4242 4242 4242
|
|
Expiry: 12/34
|
|
CVC: 123
|
|
Name: Premium User
|
|
```
|
|
5. **Click Subscribe**
|
|
6. **Watch Terminal 3** - You should see:
|
|
```
|
|
✓ customer.created
|
|
✓ customer.subscription.created
|
|
✓ invoice.created
|
|
✓ invoice.paid
|
|
✓ payment_intent.succeeded
|
|
```
|
|
|
|
7. **You'll be redirected back to Settings**
|
|
8. **You should see:**
|
|
- Badge: "Actif" (green)
|
|
- Message: "Plan Standard"
|
|
- Renewal date displayed
|
|
- Buttons: "Gérer l'abonnement" and "Annuler"
|
|
|
|
**Verify in database:**
|
|
```sql
|
|
-- Check profile updated
|
|
SELECT email, is_paying, subscription_tier
|
|
FROM profiles
|
|
WHERE email = 'premium.user@test.com';
|
|
-- Should show: is_paying = true, subscription_tier = 'standard'
|
|
|
|
-- Check subscription exists
|
|
SELECT status, current_period_end, cancel_at_period_end
|
|
FROM stripe_subscriptions
|
|
WHERE user_id = (SELECT id FROM profiles WHERE email = 'premium.user@test.com');
|
|
-- Should show: status = 'active', cancel_at_period_end = false
|
|
|
|
-- Check customer exists
|
|
SELECT * FROM stripe_customers
|
|
WHERE email = 'premium.user@test.com';
|
|
```
|
|
|
|
### Test 3: Customer Portal 🏪
|
|
|
|
1. **Still logged in** as `premium.user@test.com`
|
|
2. **Click "Gérer l'abonnement"**
|
|
3. **Opens Stripe Customer Portal** where you can:
|
|
- View/download invoices
|
|
- Update payment method
|
|
- View subscription details
|
|
- Cancel subscription
|
|
|
|
### Test 4: Cancel Subscription ❌
|
|
|
|
1. **In your app** (as `cancel.user@test.com`)
|
|
2. **Subscribe first** (follow Test 2)
|
|
3. **Click "Annuler"** button
|
|
4. **Watch Terminal 3:**
|
|
```
|
|
✓ customer.subscription.updated
|
|
```
|
|
5. **You should see:**
|
|
- Orange warning: "Abonnement en cours d'annulation"
|
|
- Message: "Sera annulé le [date]"
|
|
- Button: "Réactiver l'abonnement"
|
|
|
|
**Verify in database:**
|
|
```sql
|
|
SELECT cancel_at_period_end, current_period_end
|
|
FROM stripe_subscriptions
|
|
WHERE user_id = (SELECT id FROM profiles WHERE email = 'cancel.user@test.com');
|
|
-- Should show: cancel_at_period_end = true
|
|
|
|
-- Note: is_paying should STILL be true until period ends
|
|
SELECT is_paying FROM profiles WHERE email = 'cancel.user@test.com';
|
|
-- Should show: is_paying = true (until period_end)
|
|
```
|
|
|
|
### Test 5: Reactivate Subscription ↩️
|
|
|
|
1. **Click "Réactiver l'abonnement"**
|
|
2. **Watch Terminal 3:**
|
|
```
|
|
✓ customer.subscription.updated
|
|
```
|
|
3. **Should return to normal active state**
|
|
|
|
**Verify in database:**
|
|
```sql
|
|
SELECT cancel_at_period_end
|
|
FROM stripe_subscriptions
|
|
WHERE user_id = (SELECT id FROM profiles WHERE email = 'cancel.user@test.com');
|
|
-- Should show: cancel_at_period_end = false
|
|
```
|
|
|
|
## 🎯 Quick Verification Script
|
|
|
|
Run this in Supabase SQL Editor after testing:
|
|
|
|
```sql
|
|
-- View all test users and their subscriptions
|
|
SELECT
|
|
p.email,
|
|
p.is_paying,
|
|
p.subscription_tier,
|
|
s.status as sub_status,
|
|
s.cancel_at_period_end as canceling,
|
|
to_char(s.current_period_end, 'YYYY-MM-DD') as expires
|
|
FROM profiles p
|
|
LEFT JOIN stripe_subscriptions s ON s.user_id = p.id
|
|
WHERE p.email LIKE '%test.com'
|
|
ORDER BY p.created_at DESC;
|
|
```
|
|
|
|
Expected results:
|
|
```
|
|
free.user@test.com | false | free | null | null | null
|
|
premium.user@test.com | true | standard | active | false | 2025-12-02
|
|
cancel.user@test.com | true | standard | active | true | 2025-12-02
|
|
```
|
|
|
|
## 🎴 Test Card Cheat Sheet
|
|
|
|
| Scenario | Card Number | Use For |
|
|
|----------|-------------|---------|
|
|
| ✅ Success | `4242 4242 4242 4242` | Normal subscription |
|
|
| ❌ Decline | `4000 0000 0000 0002` | Test payment failure |
|
|
| 💳 3D Secure | `4000 0027 6000 3184` | Test authentication |
|
|
| 🏦 Insufficient | `4000 0000 0000 9995` | Test insufficient funds |
|
|
|
|
**For all cards:**
|
|
- Expiry: Any future date (e.g., `12/34`)
|
|
- CVC: Any 3 digits (e.g., `123`)
|
|
- ZIP: Any 5 digits (e.g., `12345`)
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### "Passer à Standard" button doesn't work
|
|
|
|
**Check:**
|
|
```typescript
|
|
// In browser console:
|
|
console.log(import.meta.env.VITE_STRIPE_STANDARD_MONTHLY_PRICE_ID);
|
|
// Should show: price_xxxxx
|
|
```
|
|
|
|
If undefined, add to `apps/main/.env` and restart frontend.
|
|
|
|
### Webhook not received
|
|
|
|
**Terminal 3 should show:**
|
|
```
|
|
⣾ Ready! Your webhook signing secret is whsec_xxxxx
|
|
```
|
|
|
|
If not, run:
|
|
```bash
|
|
stripe listen --forward-to http://localhost:3000/api/v1/stripe/webhook
|
|
```
|
|
|
|
### is_paying not updating
|
|
|
|
**Check webhook was processed:**
|
|
```bash
|
|
# In Terminal 3, you should see:
|
|
✓ customer.subscription.created [200]
|
|
```
|
|
|
|
**Manually trigger update:**
|
|
```sql
|
|
-- Force update profile
|
|
UPDATE profiles
|
|
SET is_paying = true, subscription_tier = 'standard'
|
|
WHERE email = 'premium.user@test.com';
|
|
```
|
|
|
|
### Can't see SubscriptionCard
|
|
|
|
**Add to settings.tsx:**
|
|
```typescript
|
|
import { SubscriptionCard } from "../components/SubscriptionCard";
|
|
|
|
// In the cards section:
|
|
<SubscriptionCard />
|
|
```
|
|
|
|
## ✅ Success Checklist
|
|
|
|
After testing all 3 accounts, you should have:
|
|
|
|
- [ ] Free user shows upgrade prompt
|
|
- [ ] Premium user shows active subscription
|
|
- [ ] Webhook events appear in Terminal 3
|
|
- [ ] Database shows correct subscription data
|
|
- [ ] `is_paying` updates automatically
|
|
- [ ] Can cancel subscription
|
|
- [ ] Cancellation shows warning
|
|
- [ ] Can reactivate subscription
|
|
- [ ] Customer portal opens correctly
|
|
- [ ] Each user only sees their own data
|
|
|
|
## 🎉 You're Done!
|
|
|
|
If all checks pass, your Stripe integration is working perfectly!
|
|
|
|
**Next steps:**
|
|
1. Test with more edge cases (different cards, failed payments)
|
|
2. Add subscription checks to premium features
|
|
3. Build pricing page
|
|
4. Prepare for production deployment
|
|
|
|
## 🔗 More Information
|
|
|
|
- **Complete Setup**: `docs/STRIPE_SETUP.md`
|
|
- **Quick Reference**: `docs/STRIPE_QUICK_REFERENCE.md`
|
|
- **Detailed Testing**: `docs/STRIPE_TESTING_GUIDE.md`
|
|
- **API Documentation**: `docs/STRIPE_IMPLEMENTATION_SUMMARY.md`
|
|
|
|
---
|
|
|
|
**Pro Tip**: Keep these test accounts for future testing. You can reset them by deleting subscriptions in Stripe Dashboard (Test Mode → Subscriptions).
|
|
|