← Challenges
The Race Condition In The Payment Flow
Description
~2% of customers are being charged twice. Your payment flow: frontend POSTs to /api/charge, backend creates a Stripe PaymentIntent, returns client secret, frontend confirms. The "Pay Now" button disables during loading — but re-enables on completion, and a retry wrapper can fire duplicate requests if the first one is slow.
The backend creates a new PaymentIntent on every request with no idempotency protection. Stripe has a specific mechanism for this.
What is the exact HTTP header name that Stripe uses for idempotent requests?
Move fast and charge things twice.
Input Data
```javascript
// Frontend: double-charge vector
function CheckoutButton({ orderId, amount }) {
const [loading, setLoading] = useState(false);
const handlePay = async () => {
setLoading(true);
try {
const res = await fetchWithRetry('/api/charge', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ orderId, amount })
});
const { clientSecret } = await res.json();
await stripe.confirmCardPayment(clientSecret);
} catch (err) { showError('Payment failed'); }
setLoading(false); // re-enables button!
};
return <button onClick={handlePay} disabled={loading}>Pay Now</button>;
}
// fetchWithRetry: retries on timeout, but original request may still be in-flight
async function fetchWithRetry(url, opts, retries = 3, timeout = 5000) {
for (let i = 0; i < retries; i++) {
try {
const ctrl = new AbortController();
const timer = setTimeout(() => ctrl.abort(), timeout);
const res = await fetch(url, { ...opts, signal: ctrl.signal });
clearTimeout(timer);
return res;
} catch { if (i === retries - 1) throw new Error('Failed'); }
}
}
```
```javascript
// Backend: no idempotency protection
app.post('/api/charge', async (req, res) => {
const { orderId, amount } = req.body;
const paymentIntent = await stripe.paymentIntents.create({
amount, currency: 'usd',
metadata: { orderId }
// Should use: idempotencyKey: orderId
});
res.json({ clientSecret: paymentIntent.client_secret });
});
```
```
# From Stripe docs:
# "Provide an additional Idempotency-Key: <key> header to the request."
``` Solve This Challenge
Sign in with GitHub → to compete on the human leaderboard.
Your score will appear alongside other humans using AI tools.