spaps 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spaps",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Sweet Potato Authentication & Payment Service CLI - Zero-config local development and project scaffolding",
   "main": "bin/spaps.js",
   "bin": {

package/src/docs-html.js

@@ -402,6 +402,14 @@ NEXT_PUBLIC_SPAPS_API_URL=http://localhost:${port}</code></pre>
             <h3>🔄 Auto-Refresh</h3>
             <p>Tokens automatically refresh when expired</p>
           </div>
+          <div class="feature-card">
+            <h3>💳 Mock Stripe</h3>
+            <p>Checkout & webhooks work instantly - no Stripe account needed!</p>
+          </div>
+          <div class="feature-card">
+            <h3>⚡ Auto Webhooks</h3>
+            <p>Webhooks fire automatically 2 seconds after payment actions</p>
+          </div>
         </div>
       </section>
       
@@ -460,16 +468,55 @@ await spaps.refresh();</code></pre>
       <section id="payments">
         <h2>Payment Integration</h2>
         
-        <h3>Stripe Checkout</h3>
-        <pre><code>// Create checkout session
+        <div class="alert" style="background: #e0f2fe; border-color: #0369a1; margin-bottom: 2rem;">
+          <strong>🎉 New in v0.3.1:</strong> Local Stripe testing with automatic webhook simulation!
+          <br>• No Stripe account required for local development
+          <br>• Webhooks fire automatically after payments
+          <br>• Mock checkout page included
+          <br>• Test webhook UI at <code>/api/stripe/webhooks/test</code>
+        </div>
+        
+        <h3>Stripe Checkout (Works in Local Mode!)</h3>
+        <pre><code>// Create checkout session - works instantly in local mode!
 const session = await spaps.createCheckoutSession(
-  'price_123abc',                      // Stripe price ID
+  'price_local_validate',              // Use local price IDs
   'http://localhost:3000/success',     // Success URL
   'http://localhost:3000/cancel'       // Cancel URL (optional)
 );
 
-// Redirect to Stripe
-window.location.href = session.data.url;</code></pre>
+// In local mode: Returns mock checkout URL
+// In production: Returns real Stripe URL
+window.location.href = session.data.url;
+
+// Webhook fires automatically after 2 seconds in local mode!</code></pre>
+
+        <h3>Local Mode Test Products</h3>
+        <pre><code>// Pre-configured test products (Buildooor tiers)
+const prices = {
+  'price_local_validate': '$500 - Validate tier',
+  'price_local_prototype': '$2,500 - Prototype tier',
+  'price_local_strategy': '$10,000 - Strategy tier',
+  'price_local_build': '$25,000 - Build tier'
+};</code></pre>
+
+        <h3>Webhook Testing</h3>
+        <pre><code>// Your webhook handler (same code for local & production!)
+app.post('/webhook', (req, res) => {
+  const event = req.body;
+  
+  switch(event.type) {
+    case 'checkout.session.completed':
+      // In local: fires 2 seconds after checkout
+      // In production: fires when payment completes
+      console.log('Payment successful!');
+      break;
+  }
+  
+  res.json({ received: true });
+});
+
+// Test webhooks via UI (local only)
+// Visit: http://localhost:${port}/api/stripe/webhooks/test</code></pre>
         
         <h3>Subscription Management</h3>
         <pre><code>// Get current subscription

package/src/local-server.js

@@ -9,14 +9,18 @@ const express = require('express');
 const cors = require('cors');
 const chalk = require('chalk');
 const { generateDocsHTML } = require('./docs-html');
+const StripeLocalManager = require('./stripe-local');
 
 class LocalServer {
   constructor(options = {}) {
     this.port = options.port || process.env.PORT || 3300;
     this.json = options.json || false;
     this.app = express();
+    this.stripeManager = null;
     this.setupMiddleware();
     this.setupRoutes();
+    this.setupStripeRoutes();
+    this.setupCatchAll();
   }
 
   setupMiddleware() {
@@ -170,7 +174,176 @@ class LocalServer {
     this.app.get('/docs', (req, res) => {
       res.send(generateDocsHTML(this.port));
     });
+  }
+
+  setupStripeRoutes() {
+    // Mock Stripe checkout session
+    this.app.post('/api/stripe/create-checkout-session', async (req, res) => {
+      const { price_id, success_url, cancel_url } = req.body;
+      const sessionId = 'cs_local_' + Date.now();
+      
+      res.json({
+        sessionId,
+        url: `http://localhost:${this.port}/checkout/${sessionId}?success=${encodeURIComponent(success_url)}&cancel=${encodeURIComponent(cancel_url)}`
+      });
+
+      // Simulate webhook after delay
+      setTimeout(async () => {
+        try {
+          await this.simulateCheckoutWebhook(sessionId, price_id);
+          if (!this.json) {
+            console.log(chalk.blue(`⚡ Webhook simulated: checkout.session.completed`));
+          }
+        } catch (error) {
+          console.error(chalk.red('Webhook simulation failed:'), error);
+        }
+      }, 2000);
+    });
+
+    // Mock checkout page
+    this.app.get('/checkout/:sessionId', (req, res) => {
+      const { sessionId } = req.params;
+      const { success, cancel } = req.query;
+      
+      res.send(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>SPAPS Local - Mock Checkout</title>
+          <style>
+            body { font-family: system-ui; max-width: 400px; margin: 100px auto; padding: 2rem; }
+            button { width: 100%; padding: 1rem; margin: 0.5rem 0; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; }
+            .pay { background: #635bff; color: white; }
+            .pay:hover { background: #4b41e0; }
+            .cancel { background: #f5f5f5; }
+            .cancel:hover { background: #e5e5e5; }
+          </style>
+        </head>
+        <body>
+          <h1>🍠 Mock Checkout</h1>
+          <p>Session: ${sessionId}</p>
+          <p>This is a mock checkout page for local development.</p>
+          
+          <button class="pay" onclick="window.location='${success}'">
+            💳 Complete Payment
+          </button>
+          
+          <button class="cancel" onclick="window.location='${cancel}'">
+            Cancel
+          </button>
+          
+          <p style="margin-top: 2rem; color: #666; font-size: 14px;">
+            In production, this would be a real Stripe Checkout page.
+          </p>
+        </body>
+        </html>
+      `);
+    });
+
+    // Mock webhook endpoint
+    this.app.post('/api/stripe/webhooks', express.raw({ type: 'application/json' }), (req, res) => {
+      // In local mode, accept all webhooks
+      const event = typeof req.body === 'string' ? JSON.parse(req.body) : req.body;
+      
+      if (!this.json) {
+        console.log(chalk.blue(`⚡ Webhook received: ${event.type}`));
+      }
+      
+      // Store for testing
+      this.lastWebhookEvent = event;
+      
+      res.json({ received: true });
+    });
+
+    // Webhook testing UI
+    this.app.get('/api/stripe/webhooks/test', (req, res) => {
+      res.send(`
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>SPAPS - Stripe Webhook Tester</title>
+          <style>
+            body { font-family: system-ui; max-width: 800px; margin: 0 auto; padding: 2rem; }
+            button { background: #635bff; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; margin: 0.25rem; }
+            button:hover { background: #4b41e0; }
+            .event { background: #f9f9f9; padding: 1rem; margin: 1rem 0; border-radius: 8px; border-left: 4px solid #635bff; }
+          </style>
+        </head>
+        <body>
+          <h1>🍠 Stripe Webhook Tester</h1>
+          
+          <h2>Simulate Events</h2>
+          <div>
+            <button onclick="simulate('checkout.session.completed')">Checkout Completed</button>
+            <button onclick="simulate('payment_intent.succeeded')">Payment Success</button>
+            <button onclick="simulate('customer.subscription.created')">Subscription Created</button>
+          </div>
+          
+          <h2>Last Event</h2>
+          <div id="lastEvent">No events yet</div>
+          
+          <script>
+            async function simulate(type) {
+              const response = await fetch('/api/stripe/webhooks', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  id: 'evt_local_' + Date.now(),
+                  type: type,
+                  data: { object: { id: type.split('.')[0] + '_' + Date.now() } }
+                })
+              });
+              
+              if (response.ok) {
+                document.getElementById('lastEvent').innerHTML = 
+                  '<div class="event">✅ ' + type + ' - ' + new Date().toLocaleTimeString() + '</div>';
+              }
+            }
+          </script>
+        </body>
+        </html>
+      `);
+    });
+  }
+
+  async simulateCheckoutWebhook(sessionId, priceId) {
+    const event = {
+      id: 'evt_local_' + Date.now(),
+      type: 'checkout.session.completed',
+      data: {
+        object: {
+          id: sessionId,
+          amount_total: this.getPriceAmount(priceId),
+          currency: 'usd',
+          customer: 'cus_local_' + Date.now(),
+          payment_status: 'paid',
+          status: 'complete',
+          metadata: { app_id: 'local-app-001', price_id: priceId }
+        }
+      }
+    };
+
+    // Send to webhook endpoint
+    const response = await fetch(`http://localhost:${this.port}/api/stripe/webhooks`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(event)
+    });
+
+    return response.ok;
+  }
+
+  getPriceAmount(priceId) {
+    const prices = {
+      'price_local_validate': 50000,
+      'price_local_prototype': 250000,
+      'price_local_strategy': 1000000,
+      'price_local_build': 2500000
+    };
+    return prices[priceId] || 10000;
+  }
 
+  setupCatchAll() {
     // Catch-all for unimplemented routes
     this.app.use((req, res) => {
       res.status(404).json({

package/src/stripe-local.js

@@ -0,0 +1,263 @@
+/**
+ * Local Stripe Integration for SPAPS CLI
+ * Handles webhook forwarding and testing without Stripe CLI
+ */
+
+const { spawn } = require('child_process');
+const chalk = require('chalk');
+const ora = require('ora');
+const fs = require('fs');
+const path = require('path');
+
+class StripeLocalManager {
+  constructor(options = {}) {
+    this.port = options.port || 3300;
+    this.stripeCliProcess = null;
+    this.useBuiltInSimulator = options.simulator !== false;
+    this.webhookSecret = 'whsec_local_development_secret';
+  }
+
+  /**
+   * Check if Stripe CLI is installed
+   */
+  async checkStripeCLI() {
+    try {
+      const { execSync } = require('child_process');
+      execSync('stripe --version', { stdio: 'ignore' });
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  /**
+   * Start Stripe webhook forwarding
+   */
+  async startWebhookForwarding() {
+    const hasStripeCLI = await this.checkStripeCLI();
+
+    if (hasStripeCLI && !this.useBuiltInSimulator) {
+      return this.startStripeCLI();
+    } else {
+      return this.startBuiltInSimulator();
+    }
+  }
+
+  /**
+   * Start Stripe CLI webhook forwarding
+   */
+  async startStripeCLI() {
+    console.log(chalk.blue('\n📡 Starting Stripe CLI webhook forwarding...'));
+
+    return new Promise((resolve, reject) => {
+      this.stripeCliProcess = spawn('stripe', [
+        'listen',
+        '--forward-to',
+        `localhost:${this.port}/api/stripe/webhooks`,
+        '--print-json'
+      ]);
+
+      let webhookSecret = null;
+
+      this.stripeCliProcess.stdout.on('data', (data) => {
+        const output = data.toString();
+        
+        // Parse webhook secret from output
+        if (!webhookSecret && output.includes('whsec_')) {
+          const match = output.match(/whsec_[a-zA-Z0-9]+/);
+          if (match) {
+            webhookSecret = match[0];
+            console.log(chalk.green(`✅ Stripe webhooks connected!`));
+            console.log(chalk.gray(`   Secret: ${webhookSecret}`));
+            console.log(chalk.gray(`   Forwarding to: http://localhost:${this.port}/api/stripe/webhooks`));
+            
+            // Save webhook secret to env file
+            this.saveWebhookSecret(webhookSecret);
+            
+            resolve({ 
+              type: 'stripe-cli',
+              secret: webhookSecret,
+              url: `http://localhost:${this.port}/api/stripe/webhooks`
+            });
+          }
+        }
+
+        // Log webhook events
+        try {
+          const json = JSON.parse(output);
+          if (json.type) {
+            console.log(chalk.blue(`⚡ Webhook: ${json.type}`));
+          }
+        } catch (e) {
+          // Not JSON, ignore
+        }
+      });
+
+      this.stripeCliProcess.stderr.on('data', (data) => {
+        const error = data.toString();
+        if (error.includes('login')) {
+          console.log(chalk.yellow('\n⚠️  Stripe CLI not logged in'));
+          console.log(chalk.cyan('   Run: stripe login'));
+          reject(new Error('Stripe CLI not authenticated'));
+        } else if (error.includes('Error')) {
+          console.error(chalk.red(`Stripe CLI error: ${error}`));
+        }
+      });
+
+      this.stripeCliProcess.on('close', (code) => {
+        if (code !== 0 && code !== null) {
+          reject(new Error(`Stripe CLI exited with code ${code}`));
+        }
+      });
+    });
+  }
+
+  /**
+   * Start built-in webhook simulator
+   */
+  async startBuiltInSimulator() {
+    console.log(chalk.blue('\n🎭 Starting built-in webhook simulator...'));
+    console.log(chalk.gray('   (Stripe CLI not found or simulator mode enabled)'));
+    
+    // The local server will handle webhook simulation
+    console.log(chalk.green(`✅ Webhook simulator ready!`));
+    console.log(chalk.gray(`   Test UI: http://localhost:${this.port}/api/stripe/webhooks/test`));
+    console.log(chalk.gray(`   Endpoint: http://localhost:${this.port}/api/stripe/webhooks`));
+    
+    return {
+      type: 'simulator',
+      secret: this.webhookSecret,
+      url: `http://localhost:${this.port}/api/stripe/webhooks`,
+      testUI: `http://localhost:${this.port}/api/stripe/webhooks/test`
+    };
+  }
+
+  /**
+   * Save webhook secret to local env file
+   */
+  saveWebhookSecret(secret) {
+    const envPath = path.join(process.cwd(), '.env.local');
+    
+    try {
+      let envContent = '';
+      if (fs.existsSync(envPath)) {
+        envContent = fs.readFileSync(envPath, 'utf8');
+      }
+
+      // Update or add webhook secret
+      if (envContent.includes('STRIPE_WEBHOOK_SECRET=')) {
+        envContent = envContent.replace(
+          /STRIPE_WEBHOOK_SECRET=.*/,
+          `STRIPE_WEBHOOK_SECRET=${secret}`
+        );
+      } else {
+        envContent += `\n# Auto-generated by SPAPS\nSTRIPE_WEBHOOK_SECRET=${secret}\n`;
+      }
+
+      fs.writeFileSync(envPath, envContent);
+      console.log(chalk.gray(`   Secret saved to .env.local`));
+    } catch (error) {
+      console.error(chalk.yellow(`   Could not save webhook secret: ${error.message}`));
+    }
+  }
+
+  /**
+   * Stop webhook forwarding
+   */
+  stop() {
+    if (this.stripeCliProcess) {
+      console.log(chalk.yellow('\n👋 Stopping Stripe webhook forwarding...'));
+      this.stripeCliProcess.kill();
+      this.stripeCliProcess = null;
+    }
+  }
+
+  /**
+   * Create test products for local development
+   */
+  async createTestProducts() {
+    console.log(chalk.blue('\n📦 Creating test Stripe products...'));
+
+    const products = [
+      {
+        id: 'prod_local_validate',
+        name: 'Validate Tier',
+        description: 'Landing page with data capture',
+        price: 50000, // $500
+        price_id: 'price_local_validate'
+      },
+      {
+        id: 'prod_local_prototype',
+        name: 'Prototype Tier',
+        description: 'Clickable prototype with core flows',
+        price: 250000, // $2,500
+        price_id: 'price_local_prototype'
+      },
+      {
+        id: 'prod_local_strategy',
+        name: 'Strategy Tier',
+        description: 'Technical architecture and roadmap',
+        price: 1000000, // $10,000
+        price_id: 'price_local_strategy'
+      },
+      {
+        id: 'prod_local_build',
+        name: 'Build Tier',
+        description: 'Full application development',
+        price: 2500000, // $25,000
+        price_id: 'price_local_build'
+      }
+    ];
+
+    // Store products in local config
+    const configPath = path.join(process.cwd(), '.spaps', 'stripe-products.json');
+    const configDir = path.dirname(configPath);
+
+    if (!fs.existsSync(configDir)) {
+      fs.mkdirSync(configDir, { recursive: true });
+    }
+
+    fs.writeFileSync(configPath, JSON.stringify(products, null, 2));
+    
+    console.log(chalk.green('✅ Test products created:'));
+    products.forEach(p => {
+      console.log(chalk.gray(`   - ${p.name}: $${p.price / 100}`));
+    });
+
+    return products;
+  }
+
+  /**
+   * Show webhook testing instructions
+   */
+  showInstructions() {
+    console.log(chalk.yellow('\n📚 Webhook Testing Guide:'));
+    console.log();
+    
+    if (this.useBuiltInSimulator) {
+      console.log('1. Open webhook tester UI:');
+      console.log(chalk.cyan(`   http://localhost:${this.port}/api/stripe/webhooks/test`));
+      console.log();
+      console.log('2. Or trigger via code:');
+      console.log(chalk.gray('   ```javascript'));
+      console.log(chalk.gray('   // Your app code'));
+      console.log(chalk.gray('   const result = await spaps.createCheckoutSession(...);'));
+      console.log(chalk.gray('   // Webhook fires automatically after 1 second'));
+      console.log(chalk.gray('   ```'));
+    } else {
+      console.log('1. Trigger test events:');
+      console.log(chalk.cyan('   stripe trigger payment_intent.succeeded'));
+      console.log();
+      console.log('2. Or use the Stripe Dashboard:');
+      console.log(chalk.cyan('   https://dashboard.stripe.com/test/webhooks'));
+    }
+    
+    console.log();
+    console.log(chalk.blue('💡 Tips:'));
+    console.log('   - Webhooks auto-retry on failure');
+    console.log('   - Check logs for webhook events');
+    console.log('   - Use webhook secret in your app');
+  }
+}
+
+module.exports = StripeLocalManager;