Stripe integrace ve vibecoding: Jak přidat platby do aplikace za hodinu

Stripe integrace pro vibecoding projekty: Kompletní tutoriál

Stripe je nejpopulárnější platební brána pro SaaS a webové aplikace. Pro vibecodery je ideální díky výborné dokumentaci, skvělému developer experience a snadné integraci se Supabase. Tento tutoriál pokrývá vše od základního nastavení po produkční deployment.

Proč Stripe pro vibecoding projekty

• Developer-first – nejlepší API dokumentace v platebním průmyslu
• Supabase integrace – webhooky a Edge Functions pro serverovou logiku
• Globální pokrytí – 46+ zemí, 135+ měn, lokální platební metody
• Checkout – předpřipravený platební formulář, PCI compliant
• Subscriptions – built-in subscription management pro SaaS

Architektura: Stripe + Supabase

Doporučená architektura pro vibecoding projekty:

1. Frontend (React) – zobrazí pricing, redirectuje na Stripe Checkout
2. Edge Function (Supabase) – vytvoří Checkout Session s API klíčem
3. Stripe Checkout – bezpečný platební formulář hostovaný Stripe
4. Webhook (Edge Function) – zpracuje platební události
5. Database (Supabase) – uloží stav objednávky/subscription

Diagram toku

User → React App → Edge Function (create-checkout)
                         ↓
                   Stripe Checkout → Platba
                         ↓
                   Webhook → Edge Function (stripe-webhook)
                         ↓
                   Supabase DB (orders/subscriptions)

Krok 1: Nastavení Stripe účtu

1. Vytvořte účet na stripe.com
2. Aktivujte test mode (používejte test API klíče)
3. Uložte klíče do Supabase Edge Function secrets:
   • STRIPE_SECRET_KEY – sk_test_... (nikdy na frontendu!)
   • STRIPE_WEBHOOK_SECRET – whsec_...
   • STRIPE_PUBLISHABLE_KEY – pk_test_... (bezpečné pro frontend)

Krok 2: Checkout Session Edge Function

// supabase/functions/create-checkout/index.ts
import Stripe from "https://esm.sh/stripe@14";

const stripe = new Stripe(Deno.env.get("STRIPE_SECRET_KEY")!);

Deno.serve(async (req) => {
  const { priceId, userId } = await req.json();
  
  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${req.headers.get("origin")}/success`,
    cancel_url: `${req.headers.get("origin")}/pricing`,
    metadata: { userId },
  });
  
  return Response.json({ url: session.url });
});

Krok 3: Webhook pro zpracování plateb

// supabase/functions/stripe-webhook/index.ts
import Stripe from "https://esm.sh/stripe@14";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";

const stripe = new Stripe(Deno.env.get("STRIPE_SECRET_KEY")!);

Deno.serve(async (req) => {
  const body = await req.text();
  const sig = req.headers.get("stripe-signature")!;
  
  const event = stripe.webhooks.constructEvent(
    body, sig, Deno.env.get("STRIPE_WEBHOOK_SECRET")!
  );
  
  const supabase = createClient(
    Deno.env.get("SUPABASE_URL")!,
    Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
  );
  
  switch (event.type) {
    case "checkout.session.completed": {
      const session = event.data.object;
      await supabase.from("orders").insert({
        user_id: session.metadata.userId,
        stripe_payment_intent_id: session.payment_intent,
        amount: session.amount_total,
        status: "completed",
        order_type: "subscription",
      });
      break;
    }
  }
  
  return Response.json({ received: true });
});

Krok 4: Frontend integrace

// React komponenta
async function handleCheckout(priceId: string) {
  const { data } = await supabase.functions.invoke(
    "create-checkout",
    { body: { priceId, userId: user.id } }
  );
  window.location.href = data.url;
}

Testování plateb

Stripe poskytuje testovací karty:

Číslo karty	Výsledek
4242 4242 4242 4242	Úspěšná platba
4000 0000 0000 0002	Zamítnutá karta
4000 0000 0000 3220	3D Secure autentizace

Produkční checklist

• ☐ Přepněte na live API klíče
• ☐ Nastavte webhook endpoint v Stripe Dashboard
• ☐ Ověřte webhook signatury (zabezpečení)
• ☐ Implementujte error handling a retry logiku
• ☐ Přidejte customer portal pro správu subscriptions
• ☐ Nastavte emailové notifikace (Stripe automatické nebo vlastní)
• ☐ GDPR: informujte uživatele o zpracování platebních údajů

Alternativy ke Stripe

Pro specifické use cases zvažte:

• Lemon Squeezy – jednodušší, merchant of record (řeší DPH globálně)
• Paddle – enterprise MoR, B2B focus
• Gumroad – digitální produkty, jednorázové nákupy
• RevenueCat – in-app purchases pro mobilní aplikace

Závěr

Stripe integrace s Supabase Edge Functions je nejrobustnější řešení pro platby ve vibecoding projektech. Díky Checkout Session nepotřebujete vlastní platební formulář (PCI compliance zdarma) a webhooky zajistí spolehlivé zpracování plateb. Začněte v test mode, implementujte celý flow a přepněte na live až po důkladném testování.