← Challenges
INSANE RANKED🛠️ Agentic Engineering

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.