Aller au contenu principal

Stripe Integration

Accept payments and manage subscriptions with Stripe.

Overview​

Prompt To App provides seamless Stripe integration for:

  • One-time payments
  • Subscription billing
  • Customer management
  • Webhook handling

Setup​

1. Get Stripe API Keys​

  1. Go to Stripe Dashboard
  2. Navigate to Developers → API Keys
  3. Copy your Publishable Key and Secret Key

2. Add to Your Project​

In Prompt To App, click Extensions → Stripe and enter:

  • Publishable Key: pk_test_... (for frontend)
  • Secret Key: sk_test_... (for backend)

3. AI Generates Integration​

The AI will automatically:

  • Install Stripe SDK
  • Create payment components
  • Set up webhook handlers
  • Add customer management

Features​

Checkout Session​

Create a payment page:

// AI-generated code
import { loadStripe } from '@stripe/stripe-js';

const stripe = await loadStripe(process.env.STRIPE_PUBLISHABLE_KEY);

const handleCheckout = async () => {
  const response = await fetch('/api/create-checkout-session', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      priceId: 'price_xxx',
      successUrl: window.location.origin + '/success',
      cancelUrl: window.location.origin + '/cancel',
    }),
  });
  
  const session = await response.json();
  await stripe.redirectToCheckout({ sessionId: session.id });
};

Subscription Management​

// Create subscription
const subscription = await stripe.subscriptions.create({
  customer: customerId,
  items: [{ price: 'price_xxx' }],
  payment_behavior: 'default_incomplete',
  expand: ['latest_invoice.payment_intent'],
});

// Cancel subscription
await stripe.subscriptions.cancel(subscriptionId);

// Update subscription
await stripe.subscriptions.update(subscriptionId, {
  items: [{ price: 'price_new' }],
});

Webhook Handling​

// AI-generated webhook endpoint
app.post('/api/stripe-webhook', async (req, res) => {
  const sig = req.headers['stripe-signature'];
  
  try {
    const event = stripe.webhooks.constructEvent(
      req.body,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET
    );
    
    switch (event.type) {
      case 'checkout.session.completed':
        // Handle successful payment
        break;
      case 'customer.subscription.updated':
        // Handle subscription change
        break;
      case 'customer.subscription.deleted':
        // Handle cancellation
        break;
    }
    
    res.json({ received: true });
  } catch (err) {
    res.status(400).send(`Webhook Error: ${err.message}`);
  }
});

Common Use Cases​

One-Time Payment​

"Add a checkout button that charges $29.99 for the premium plan"

AI generates:

  • Checkout button component
  • Backend endpoint to create session
  • Success/cancel pages
  • Payment confirmation

Subscription Billing​

"Implement monthly subscription with 3 tiers: Basic ($9), Pro ($29), Enterprise ($99)"

AI generates:

  • Pricing table component
  • Subscription management dashboard
  • Upgrade/downgrade logic
  • Webhook handlers for billing events

Customer Portal​

"Add a billing page where users can update payment method and view invoices"

AI generates:

  • Customer portal link
  • Invoice history display
  • Payment method update form
  • Subscription status display

Security Best Practices​

Environment Variables​

Never expose secret keys in frontend code:

# .env
STRIPE_PUBLISHABLE_KEY=pk_test_xxx  # Safe for frontend
STRIPE_SECRET_KEY=sk_test_xxx       # Backend only!
STRIPE_WEBHOOK_SECRET=whsec_xxx     # Backend only!

Webhook Verification​

Always verify webhook signatures:

const event = stripe.webhooks.constructEvent(
  req.body,
  sig,
  process.env.STRIPE_WEBHOOK_SECRET
);

Amount Validation​

Validate amounts server-side:

// ❌ BAD: Trust client amount
const amount = req.body.amount;

// ✅ GOOD: Fetch from database
const product = await db.products.findById(req.body.productId);
const amount = product.price;

Testing​

Test Mode​

Use test API keys for development:

  • pk_test_... (publishable)
  • sk_test_... (secret)

Test Cards​

Stripe provides test card numbers:

  • Success: 4242 4242 4242 4242
  • Decline: 4000 0000 0000 0002
  • 3D Secure: 4000 0025 0000 3155

Webhook Testing​

Use Stripe CLI to forward webhooks locally:

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

Going Live​

1. Switch to Live Keys​

Replace test keys with live keys:

  • pk_live_...
  • sk_live_...

2. Configure Webhooks​

In Stripe Dashboard:

  1. Go to Developers → Webhooks
  2. Add endpoint: https://yourdomain.com/api/stripe-webhook
  3. Select events to listen for
  4. Copy webhook secret

3. Verify Integration​

  • Test real payment with small amount
  • Verify webhook events are received
  • Check customer data in Stripe Dashboard

Troubleshooting​

Payment Not Processing​

  • Check API keys are correct
  • Verify webhook endpoint is accessible
  • Look for errors in Stripe Dashboard logs

Webhook Not Firing​

  • Confirm webhook URL is correct
  • Check webhook secret matches
  • Verify endpoint returns 200 status

Subscription Not Updating​

  • Check webhook handlers are processing events
  • Verify database is updating correctly
  • Look for errors in server logs

Resources​