Stripe Projects Integration

Build a Full-Stack App with Stripe Projects + BlocWeave

Published 2026-06-22

What you'll build

A full-stack Next.js app with a database, hosting, analytics, and African payment integration — provisioned and deployed entirely from BlocWeave's chat panel. No dashboards, no manual sign-ups, no copy-pasting API keys.

By the end of this tutorial:

Supabase (database + auth), Vercel (hosting), and PostHog (analytics) are provisioned via Stripe Projects
Paystack payment integration is scaffolded via BlocWeave's built-in knowledge
Credentials are synced to .env automatically
The app is deployed and live on Vercel

This tutorial demonstrates BlocWeave's "both worlds" capability — global infrastructure via Stripe Projects and African payments via built-in scaffolds, orchestrated from the same chat.

Prerequisites

Install the Stripe CLI

macOS:

brew install stripe/stripe-cli/stripe

Other platforms: visit docs.stripe.com/stripe-cli/install.

Then install the Projects plugin:

stripe plugin install projects

Connect to BlocWeave

Open VS Code with BlocWeave installed. After a few seconds, BlocWeave detects the Stripe CLI and shows a notification:

"Stripe Projects CLI detected. Connect it to BlocWeave for one-command infrastructure provisioning?"

Click Connect. BlocWeave writes the MCP configuration to .blocweave/mcp.json — no manual editing needed.

If you missed the notification, create .blocweave/mcp.json manually:

{
  "mcpServers": {
    "stripe-projects": {
      "transport": "stdio",
      "command": "stripe",
      "args": ["mcp", "-q"]
    }
  }
}

Set up Stripe billing

Before provisioning paid services, add a payment method:

stripe projects billing add

Free tiers (Supabase, PostHog) don't require a payment method.

Provision your infrastructure

Open the BlocWeave chat panel and type:

BlocWeave prompt

Use Stripe Projects to set up a Next.js app. I need: 1. Supabase for database and auth 2. Vercel for hosting 3. PostHog for analytics Initialize the project, add all three services, and sync credentials to .env.

BlocWeave's agent will:

Run stripe projects init to create the project
Run stripe projects add supabase/project to provision a Supabase instance
Run stripe projects add vercel/project to connect Vercel
Run stripe projects add posthog/project to set up PostHog
Run stripe projects env --pull to sync all credentials to .env

Each step requires your approval — you'll see MCP tool call cards in the chat, just like run_command. After all services are provisioned, your .env contains:

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=eyJ...
SUPABASE_SERVICE_ROLE_KEY=eyJ...
VERCEL_TOKEN=...
POSTHOG_API_KEY=phc_...
POSTHOG_HOST=https://us.i.posthog.com

Add Paystack payments

Now add African payment integration. Stripe Projects doesn't cover Paystack — but BlocWeave does, natively.

BlocWeave prompt

Add Paystack payment integration to this Next.js app. 1. src/app/api/payments/initialize/route.ts — POST endpoint that creates a Paystack payment, accepts { email, amount } in the body, amount is in GHS (convert to pesewas), returns the authorization URL 2. src/app/api/payments/webhook/route.ts — POST endpoint that receives Paystack webhook events, verifies the HMAC-SHA512 signature using PAYSTACK_SECRET_KEY, handles charge.success to update order status in Supabase 3. src/app/api/payments/verify/[reference]/route.ts — GET endpoint that verifies a transaction by reference

BlocWeave auto-detects the "paystack" keyword and injects its Paystack scaffold context — HMAC verification patterns, pesewa conversion, redirect flow, webhook handling. The agent writes production-ready code using the Supabase credentials already in .env.

Add your Paystack keys

Get your keys from dashboard.paystack.com under Settings > API Keys & Webhooks.

Add them to .env:

PAYSTACK_SECRET_KEY=sk_test_your_key_here
PAYSTACK_PUBLIC_KEY=pk_test_your_key_here

Build the frontend

BlocWeave prompt

Add a checkout page at src/app/checkout/page.tsx that: 1. Shows a form with email and amount (GHS) fields 2. On submit, calls /api/payments/initialize and redirects to the Paystack authorization URL 3. After payment, Paystack redirects back to /checkout/success?reference=... 4. The success page calls /api/payments/verify/[reference] and shows the result Use the Supabase client to check if the user is authenticated. Track the checkout event with PostHog.

The agent has all three sets of credentials available — Supabase for auth checks, Paystack for payments, and PostHog for analytics — all wired from the same .env.

Deploy to Vercel

BlocWeave prompt

Deploy this app to Vercel using the Stripe Projects connection. Make sure all environment variables from .env are set in the Vercel project.

The agent uses stripe projects open vercel to access the Vercel dashboard, or guides you through the Vercel CLI deployment. Your Supabase and PostHog credentials need to be added to Vercel's environment settings — Stripe Projects provisions the infrastructure but doesn't automate production env var injection.

vercel env pull .env.production
vercel deploy --prod

Check project status

Verify everything is connected:

stripe projects status

This shows your project name, all provisioned services, current tiers, and health status.

To see your spend:

stripe projects spend

Project structure after this tutorial

my-app/
  .blocweave/
    mcp.json                          # Stripe Projects MCP config
  .projects/
    state.json                        # Stripe Projects shared state
    state.local.json                  # Your local resource associations
    vault/                            # Encrypted credentials (gitignored)
  .env                                # All credentials synced here
  src/
    app/
      page.tsx                        # Home page
      checkout/
        page.tsx                      # Checkout form
        success/
          page.tsx                    # Payment success page
      api/
        payments/
          initialize/
            route.ts                  # Paystack payment initialization
          webhook/
            route.ts                  # Paystack webhook handler
          verify/
            [reference]/
              route.ts                # Transaction verification
  package.json
  next.config.ts

What you've accomplished

Supabase provisioned via Stripe Projects — database, auth, credentials synced
Vercel connected via Stripe Projects — hosting ready
PostHog provisioned via Stripe Projects — analytics tracking
Paystack integrated via BlocWeave scaffolds — GHS payments, webhook verification, redirect flow

This is BlocWeave's "both worlds" story: global infrastructure from Stripe Projects (40+ providers) and African payment patterns from BlocWeave's built-in knowledge (12 providers) — orchestrated from the same chat, in the same session.

All tutorials