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:
co-authored by
Claude Haiku 4.5
parent
017b68f17b
commit
eda518d1be
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user