Skip to content

Stripe

What are we trying to accomplish?

The goal of these two lectures, Understanding Stripe and Multi-Agent Architecture: Implementing Stripe Donations, is to equip students with the knowledge and practical skills necessary to add payments to a Full-Stack Application, using Claude Code to implement the work end to end. Students will first build a mental model of how Stripe fits into an application: what Stripe is, why developers use it, and why their app never actually processes a payment but only asks Stripe to. They will learn the division of responsibilities between the server side (Supabase Edge Functions that hold the secret key, create Payment Intents, and receive webhooks) and the client side (a React + Vite frontend that uses Stripe Elements and Stripe.js so card data never touches their servers), and why the webhook, not the client, is the source of truth for what the database records. They will also learn what changes when an app moves from test mode to production, along with important details such as idempotent webhook handlers, 3D Secure, and testing failure cases. They will then plan a one-time donation feature by identifying the front-end and back-end changes it requires, and design a three-agent Claude Code architecture made up of a Supabase agent, a UI agent verified with Playwright, and a supervisor agent that defines its own passing requirements and acts as a security gate. By the end of these lectures, students should be capable of independently planning, directing, and validating a Stripe payment integration with a scoped, phased, verification-gated prompt.

Lectures and Assignments

Lectures

Assignments

TLO's (Terminal Learning Objectives)

  • Explain what Stripe is and how a payment flows between the client, the server, and Stripe
  • Describe the roles of the Payment Intent, client_secret, Stripe Elements, and webhooks, and why the webhook is the source of truth
  • Plan the front-end and back-end changes required for a one-time Stripe donation in a Supabase + React + Vite application
  • Direct Claude Code with a multi-agent prompt (Supabase agent, UI agent, and supervisor) to implement and verify a Stripe donation flow

ELO's (Enabling Learning Objectives)

  • Explain what Stripe is and the benefits of using it (no raw card data, fraud protection, global coverage, developer-first API, compliance)
  • Describe the cause-and-effect chain of a payment transaction from the click of a button to the database update
  • Explain why anything involving the Stripe secret key must happen on the server and never in the browser
  • Describe how Stripe Elements lets the client collect card details without ever reading them
  • Distinguish the role of Axios (calling the Edge Function) from the role of Stripe.js (confirming the payment)
  • Explain what a webhook is and why a database should only reflect what Stripe confirms through a webhook
  • Explain why webhook handlers must be idempotent
  • Distinguish test keys from live keys and list what changes when moving from local development to production
  • Compare one-time payments and subscriptions, and describe the Payment Intent lifecycle, including requires_action and 3D Secure
  • Create a Stripe account, locate API keys, and register a webhook endpoint
  • Identify the front-end needs (donate UI, Axios call, Stripe.js confirmation, result handling) and back-end needs (process-donation, donations table, stripe-webhook, RLS) of a donation feature
  • Define the scope of each agent in a multi-agent prompt, including what each agent must not touch
  • Explain why the Supabase agent runs before the UI agent, and what the supervisor agent does and why it defines its own passing requirements
  • Write a phased, verification-gated Claude Code prompt that uses Playwright to test both a successful card and a declined card