● Disconnected
Saved Cards
Stripe.js v3
➕ Add New Card
Creates a SetupIntent, then confirms with Stripe.js to save the card for future payments.
💳 Your Cards
Cards saved via SetupIntent webhook.
Click Refresh to load cards.
🧪 Test Card Numbers
4242 4242 4242 4242
✅ Always succeeds
4000 0025 0000 3155
🔐 Requires 3DS
4000 0000 0000 9995
❌ Always declines
Click any card number to copy. Use any future expiry and any CVC.
🛍️ Process Checkout
POST /payments/checkout/process — creates a PaymentIntent on the server.
📋 Order Summary
Result from the checkout API call.
Place an order to see the summary.
✅ Confirm PaymentIntent
Use the clientSecret from checkout to confirm the payment. Handles 3DS automatically.
ℹ️ How it works
The payment flow for online orders.
  1. User places order → server creates PaymentIntent (capture_method: manual)
  2. Server returns clientSecret
  3. Client confirms with Stripe.js (this page)
  4. Stripe fires payment_intent.amount_capturable_updated
  5. Webhook handler captures the payment
  6. Order status updated to PAID
🔔 Webhook Setup
Run the Stripe CLI to forward events to your local server.
PAYMENTS WEBHOOK
Click to copy
USERS WEBHOOK (setup_intent)
Click to copy
⚡ Trigger Test Events
Manually fire Stripe events via CLI.
Click any button to copy the CLI command to clipboard.
📡 Expected Events
PaymentIntent
payment_intent.succeeded
payment_intent.payment_failed
payment_intent.amount_capturable_updated
payment_intent.canceled
payment_intent.created
SetupIntent
setup_intent.succeeded
setup_intent.setup_failed
setup_intent.canceled
setup_intent.requires_action
PaymentMethod
payment_method.attached
payment_method.detached
payment_method.updated
payment_method.automatically_updated