Fix cart clearing during Stripe checkout redirect

Use sessionStorage flag to prevent LogoutOnUnload from clearing cart and logging
out when navigating to Stripe checkout.

Changes:
- Checkout button sets 'isCheckingOut' flag in sessionStorage before API call
- LogoutOnUnload checks this flag and skips logout if checkout in progress
- Flag is removed if API returns an error
- Flag persists during navigation to Stripe URL

This ensures cart and login persist through Stripe payment flow.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-18 06:25:30 +01:00
co-authored by Claude Haiku 4.5
parent 017b68f17b
commit eda518d1be
2 changed files with 8 additions and 19 deletions
+4
View File
@@ -117,6 +117,9 @@ export default function CheckoutPageClient({ isLoggedIn, customer }: CheckoutPag
setCheckingOut(true); setCheckingOut(true);
setCheckoutError(null); setCheckoutError(null);
try { try {
// Mark that we're checking out so LogoutOnUnload doesn't clear cart
sessionStorage.setItem('isCheckingOut', 'true');
const res = await fetch('/api/checkout', { const res = await fetch('/api/checkout', {
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
@@ -125,6 +128,7 @@ export default function CheckoutPageClient({ isLoggedIn, customer }: CheckoutPag
const data = await res.json(); const data = await res.json();
console.log('Checkout response:', { status: res.status, ok: res.ok, data }); console.log('Checkout response:', { status: res.status, ok: res.ok, data });
if (!res.ok || !data.url) { if (!res.ok || !data.url) {
sessionStorage.removeItem('isCheckingOut');
throw new Error(data.error ?? 'Something went wrong starting checkout.'); throw new Error(data.error ?? 'Something went wrong starting checkout.');
} }
window.location.href = data.url; window.location.href = data.url;
+4 -19
View File
@@ -1,6 +1,6 @@
'use client'; 'use client';
import { useEffect, useRef } from 'react'; import { useEffect } from 'react';
import { useCart } from '@/lib/cartStore'; import { useCart } from '@/lib/cartStore';
/** /**
@@ -10,28 +10,13 @@ import { useCart } from '@/lib/cartStore';
*/ */
export default function LogoutOnUnload() { export default function LogoutOnUnload() {
const clearCart = useCart((s) => s.clear); const clearCart = useCart((s) => s.clear);
const isCheckingOut = useRef(false);
useEffect(() => {
// Mark when checkout is being initiated
const origFetch = window.fetch;
window.fetch = function(...args) {
const url = typeof args[0] === 'string' ? args[0] : (args[0] as Request).url;
if (url?.includes('/api/checkout')) {
isCheckingOut.current = true;
}
return origFetch.apply(this, args);
};
return () => {
window.fetch = origFetch;
};
}, []);
useEffect(() => { useEffect(() => {
const handleUnload = () => { const handleUnload = () => {
// Don't logout if we're in the middle of checkout (navigating to Stripe) // Don't logout if we're in the middle of checkout (navigating to Stripe)
if (isCheckingOut.current) { // The checkout component sets this flag before making the API call
const isCheckingOut = typeof window !== 'undefined' && sessionStorage.getItem('isCheckingOut');
if (isCheckingOut) {
return; return;
} }