Playground API
Stop Waiting for the Backend • Part 20 of 122 min read•2026-09-20

How to Test Stripe Checkout & 3D Secure in React Without Real API Keys

Learn how to simulate Stripe PaymentIntents, 3D Secure verification, test credit cards, refunds, and webhook triggers using Playground API.

NK
Nilesh Kumar
Creator of Playground API
How to Test Stripe Checkout & 3D Secure in React Without Real API Keys

How to Test Stripe Checkout & 3D Secure in React Without Real API Keys

Integrating online payments (Stripe, PayPal, LemonSqueezy) into a frontend application is one of the most critical flows in ecommerce and SaaS.

However, testing payment forms during early frontend prototyping is painful:

  • You need a live Stripe test mode account and secret API keys.
  • Handling test card numbers (declines, insufficient funds, 3DS authentication challenges) requires navigating third-party dashboards.
  • Testing post-payment webhook fulfillment requires running local webhooks proxies.

Playground API provides a complete Mock Payment Gateway & Checkout Simulation with full Stripe API parity!

1. Creating a Payment Intent

Create payment intents via POST /api/v1/payments/intents:

typescript
1
const res = await fetch('https://playground.nileslabs.com/api/v1/payments/intents', {
2
method: 'POST',
3
headers: { 'Content-Type': 'application/json' },
4
body: JSON.stringify({
5
amount: 4900, // $49.00
6
currency: 'USD',
7
description: 'Pro Subscription Upgrade',
8
}),
9
});
10
11
const intent = await res.json();
12
console.log('Client Secret:', intent.client_secret);

2. Deterministic Test Card Numbers

Playground API supports standard deterministic test cards:

  • Success Card: 4242 4242 4242 4242 -> Status: succeeded
  • 3D Secure Challenge: 4000 0000 0000 3020 -> Status: requires_action (triggers 3DS modal)
  • Declined Card: 4000 0000 0000 0002 -> Status: 402 Payment Required (card_declined)
  • Insufficient Funds: 4000 0000 0000 9995 -> Status: 402 Payment Required (insufficient_funds)
typescript
1
// Confirm payment
2
const confirmRes = await fetch(https://playground.nileslabs.com/api/v1/payments/intents/${intent.id}/confirm`, {
3
method: 'POST',
4
headers: { 'Content-Type': 'application/json' },
5
body: JSON.stringify({
6
payment_method: {
7
card: { number: '4242424242424242', exp_month: 12, exp_year: 2028, cvc: '123' },
8
},
9
}),
10
});

3. Automatic Webhook Triggers

Confirming a payment intent automatically triggers a signed payment_intent.succeeded webhook to any registered endpoints in your session!

4. Interactive Payments Studio

Test payment modals, 3DS challenges, and refund flows directly inside the documentation:

👉 https://playground.nileslabs.com/docs/payments

Conclusion

Build high-converting checkout flows with confidence. Test payments with Playground API today!

Tags:#react#webdev#javascript#stripe
Series: Stop Waiting for the Backend
Part 20 of 12
Previous Article (#19)
Introducing the Official Zero-Dependency TypeScript SDK for Playground API
Next Article (#21)
How to Test Email & SMS Verification (OTP & Magic Links) in React Without Twilio or SendGrid

Try Playground API in Your Own App

Stateful mock REST & GraphQL API with private sandbox overlays.

Quickstart GuideOpen Interactive Studio