Show the bug.
Get the ticket.

🐛 [P1] Payment Submission Failure in Checkout Flow: Potential Unhandled Promise Rejection in usePaymentIntent Leading to Silent Failure State

📋 Summary

Based on the reported behavior, the checkout payment flow appears to fail silently. This is most likely caused by an unhandled promise rejection in the payment confirmation pipeline, although it could also stem from a race condition between the PaymentElement mount lifecycle and the clientSecret fetch.

🔍 Root Cause Analysis (hypothesized)

The handleSubmit callback in src/features/checkout/components/CheckoutForm.tsx likely calls stripe.confirmPayment() without awaiting elements.submit(). The error may be swallowed by the onError handler in src/lib/api/payments.ts, leaving checkoutSlice.status stuck in 'pending'.

🛠️ Proposed Fix

// src/features/checkout/hooks/usePaymentIntent.ts
const { mutateAsync } = useMutation({
  mutationFn: confirmPaymentIntent,
  onError: (err: StripeError) => {
    dispatch(checkoutSlice.actions.setError(err.code));
    Sentry.captureException(err);
    throw err;
  },
});

🧪 Testing Strategy

• Mock @stripe/react-stripe-js with jest.mock and simulate card_declined
• Add a Playwright E2E for the 3DS challenge path
• Verify idempotency keys on retried POST /v1/payment_intents

⚠️ Risks

Changing error propagation in the mutation layer may affect other consumers of usePaymentIntent, including the subscription upgrade flow, the BillingPortal retry banner and the legacy checkout-v1 fallback.

✔️ Acceptance Criteria

• ☐ Payment errors surface to the user
• ☐ No regression in 3DS flows
• ☐ Sentry breadcrumbs include paymentIntent.id

🐛 [P1] Payment Submission Failure in Checkout Flow: Potential Unhandled Promise Rejection in usePaymentIntent Leading to Silent Failure State

📋 Summary

Based on the reported behavior, the checkout payment flow appears to fail silently. This is most likely caused by an unhandled promise rejection in the payment confirmation pipeline, although it could also stem from a race condition between the PaymentElement mount lifecycle and the clientSecret fetch.

🔍 Root Cause Analysis (hypothesized)

The handleSubmit callback in src/features/checkout/components/CheckoutForm.tsx likely calls stripe.confirmPayment() without awaiting elements.submit(). The error may be swallowed by the onError handler in src/lib/api/payments.ts, leaving checkoutSlice.status stuck in 'pending'.

🛠️ Proposed Fix

// src/features/checkout/hooks/usePaymentIntent.ts
const { mutateAsync } = useMutation({
  mutationFn: confirmPaymentIntent,
  onError: (err: StripeError) => {
    dispatch(checkoutSlice.actions.setError(err.code));
    Sentry.captureException(err);
    throw err;
  },
});

🧪 Testing Strategy

• Mock @stripe/react-stripe-js with jest.mock and simulate card_declined
• Add a Playwright E2E for the 3DS challenge path
• Verify idempotency keys on retried POST /v1/payment_intents

⚠️ Risks

Changing error propagation in the mutation layer may affect other consumers of usePaymentIntent, including the subscription upgrade flow, the BillingPortal retry banner and the legacy checkout-v1 fallback.

✔️ Acceptance Criteria

• ☐ Payment errors surface to the user
• ☐ No regression in 3DS flows
• ☐ Sentry breadcrumbs include paymentIntent.id