Stripe Payment
This commit is contained in:
augmentedpotato
356
web/app/cart/page.js
Normal file
356
web/app/cart/page.js
Normal file
@@ -0,0 +1,356 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useCart } from "@/context/CartContext";
|
||||
import { loadStripe } from "@stripe/stripe-js";
|
||||
import {
|
||||
Elements,
|
||||
PaymentElement,
|
||||
useStripe,
|
||||
useElements,
|
||||
} from "@stripe/react-stripe-js";
|
||||
|
||||
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || "");
|
||||
|
||||
function PaymentForm({ clientSecret, totalAmount, onSuccess, onCancel }) {
|
||||
const stripe = useStripe();
|
||||
const elements = useElements();
|
||||
const [paying, setPaying] = useState(false);
|
||||
const [payError, setPayError] = useState(null);
|
||||
|
||||
async function handlePay(e) {
|
||||
e.preventDefault();
|
||||
if (!stripe || !elements) return;
|
||||
setPaying(true);
|
||||
setPayError(null);
|
||||
const { error } = await stripe.confirmPayment({
|
||||
elements,
|
||||
confirmParams: { return_url: window.location.origin + "/cart/confirmation" },
|
||||
redirect: "if_required",
|
||||
});
|
||||
|
||||
if (error) {
|
||||
setPayError(error.message);
|
||||
setPaying(false);
|
||||
}
|
||||
|
||||
else {
|
||||
onSuccess();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="cart-payment-form">
|
||||
<h3 className="cart-payment-title">Payment Details</h3>
|
||||
<p className="cart-payment-total">
|
||||
Total to pay: <strong>${parseFloat(totalAmount).toFixed(2)}</strong>
|
||||
</p>
|
||||
<PaymentElement />
|
||||
{payError && <p className="cart-error-msg">{payError}</p>}
|
||||
<div className="cart-payment-actions">
|
||||
<button
|
||||
className="cart-pay-btn"
|
||||
type="button"
|
||||
onClick={handlePay}
|
||||
disabled={paying || !stripe}
|
||||
>
|
||||
{paying ? "Processing…" : `Pay $${parseFloat(totalAmount).toFixed(2)}`}
|
||||
</button>
|
||||
<button className="cart-cancel-btn" type="button" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CartPage() {
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const {
|
||||
cart,
|
||||
cartLoading,
|
||||
cartError,
|
||||
selectedStoreId,
|
||||
updateItem,
|
||||
removeItem,
|
||||
clearCart,
|
||||
applyCoupon,
|
||||
checkout,
|
||||
} = useCart();
|
||||
const router = useRouter();
|
||||
|
||||
const [couponInput, setCouponInput] = useState("");
|
||||
const [couponError, setCouponError] = useState(null);
|
||||
const [couponLoading, setCouponLoading] = useState(false);
|
||||
|
||||
const [checkoutLoading, setCheckoutLoading] = useState(false);
|
||||
const [checkoutError, setCheckoutError] = useState(null);
|
||||
const [clientSecret, setClientSecret] = useState(null);
|
||||
const [checkoutTotal, setCheckoutTotal] = useState(null);
|
||||
const [confirmed, setConfirmed] = useState(false);
|
||||
|
||||
const [localQuantities, setLocalQuantities] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !user) {
|
||||
router.push("/login");
|
||||
}
|
||||
}, [authLoading, user, router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (cart?.items) {
|
||||
const map = {};
|
||||
cart.items.forEach((i) => (map[i.cartItemId] = i.quantity));
|
||||
setLocalQuantities(map);
|
||||
}
|
||||
}, [cart]);
|
||||
|
||||
async function handleQuantityChange(cartItemId, newQty) {
|
||||
if (newQty < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLocalQuantities((prev) => ({ ...prev, [cartItemId]: newQty }));
|
||||
try {
|
||||
await updateItem(cartItemId, newQty);
|
||||
}
|
||||
|
||||
catch {
|
||||
if (cart?.items) {
|
||||
const original = cart.items.find((i) => i.cartItemId === cartItemId);
|
||||
if (original) {
|
||||
setLocalQuantities((prev) => ({ ...prev, [cartItemId]: original.quantity }));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemove(cartItemId) {
|
||||
try {
|
||||
await removeItem(cartItemId);
|
||||
}
|
||||
|
||||
catch {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleApplyCoupon() {
|
||||
if (!couponInput.trim()) return;
|
||||
setCouponLoading(true);
|
||||
setCouponError(null);
|
||||
try {
|
||||
await applyCoupon(couponInput.trim());
|
||||
setCouponInput("");
|
||||
}
|
||||
|
||||
catch (err) {
|
||||
setCouponError(err.message);
|
||||
}
|
||||
|
||||
finally {
|
||||
setCouponLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCheckout() {
|
||||
if (!cart?.items?.length) return;
|
||||
setCheckoutLoading(true);
|
||||
setCheckoutError(null);
|
||||
try {
|
||||
const result = await checkout("pm_card_visa");
|
||||
if (result?.clientSecret) {
|
||||
setClientSecret(result.clientSecret);
|
||||
setCheckoutTotal(result.totalAmount);
|
||||
}
|
||||
|
||||
else if (result?.status === "succeeded") {
|
||||
setConfirmed(true);
|
||||
}
|
||||
}
|
||||
|
||||
catch (err) {
|
||||
setCheckoutError(err.message);
|
||||
}
|
||||
|
||||
finally {
|
||||
setCheckoutLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (authLoading || cartLoading) {
|
||||
return <main className="cart-page"><p className="cart-status-msg">Loading…</p></main>;
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
if (confirmed) {
|
||||
return (
|
||||
<main className="cart-page">
|
||||
<div className="cart-confirmation">
|
||||
<div className="cart-confirmation-icon">✅</div>
|
||||
<h2 className="cart-confirmation-title">Order Confirmed!</h2>
|
||||
<p className="cart-confirmation-body">
|
||||
Thank you for your purchase. Your order has been placed successfully.
|
||||
</p>
|
||||
<button className="cart-continue-btn" type="button" onClick={() => router.push("/products")}>
|
||||
Continue Shopping
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!selectedStoreId) {
|
||||
return (
|
||||
<main className="cart-page">
|
||||
<p className="cart-status-msg">Please select a store from the navigation bar to view your cart.</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const items = cart?.items ?? [];
|
||||
|
||||
return (
|
||||
<main className="cart-page">
|
||||
<h1 className="cart-title">Your Cart</h1>
|
||||
|
||||
{cartError && <p className="cart-error-msg">{cartError}</p>}
|
||||
|
||||
{items.length === 0 && !cartError && (
|
||||
<div className="cart-empty">
|
||||
<p className="cart-empty-msg">Your cart is empty.</p>
|
||||
<button className="cart-continue-btn" type="button" onClick={() => router.push("/products")}>
|
||||
Browse Products
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{items.length > 0 && (
|
||||
<div className="cart-layout">
|
||||
<div className="cart-items-section">
|
||||
{items.map((item) => (
|
||||
<div key={item.cartItemId} className="cart-item-row">
|
||||
<img
|
||||
src={item.imageUrl || "/images/pet-placeholder.png"}
|
||||
alt={item.prodName}
|
||||
className="cart-item-img"
|
||||
onError={(e) => {
|
||||
e.currentTarget.onerror = null;
|
||||
e.currentTarget.src = "/images/pet-placeholder.png";
|
||||
}}
|
||||
/>
|
||||
<div className="cart-item-details">
|
||||
<p className="cart-item-name">{item.prodName}</p>
|
||||
<p className="cart-item-unit-price">${parseFloat(item.unitPrice).toFixed(2)} each</p>
|
||||
</div>
|
||||
<div className="cart-item-qty-controls">
|
||||
<button
|
||||
className="cart-qty-btn"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleQuantityChange(item.cartItemId, (localQuantities[item.cartItemId] ?? item.quantity) - 1)
|
||||
}
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<span className="cart-qty-val">{localQuantities[item.cartItemId] ?? item.quantity}</span>
|
||||
<button
|
||||
className="cart-qty-btn"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleQuantityChange(item.cartItemId, (localQuantities[item.cartItemId] ?? item.quantity) + 1)
|
||||
}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<p className="cart-item-line-total">
|
||||
${(parseFloat(item.unitPrice) * (localQuantities[item.cartItemId] ?? item.quantity)).toFixed(2)}
|
||||
</p>
|
||||
<button
|
||||
className="cart-item-remove-btn"
|
||||
type="button"
|
||||
onClick={() => handleRemove(item.cartItemId)}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button className="cart-clear-btn" type="button" onClick={clearCart}>
|
||||
Clear Cart
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<aside className="cart-summary">
|
||||
<h2 className="cart-summary-title">Order Summary</h2>
|
||||
|
||||
<div className="cart-summary-row">
|
||||
<span>Subtotal</span>
|
||||
<span>${parseFloat(cart.subtotalAmount ?? 0).toFixed(2)}</span>
|
||||
</div>
|
||||
{parseFloat(cart.discountAmount ?? 0) > 0 && (
|
||||
<div className="cart-summary-row cart-summary-discount">
|
||||
<span>Discount {cart.couponCode && `(${cart.couponCode})`}</span>
|
||||
<span>−${parseFloat(cart.discountAmount).toFixed(2)}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="cart-summary-row cart-summary-total">
|
||||
<span>Total</span>
|
||||
<span>${parseFloat(cart.totalAmount ?? 0).toFixed(2)}</span>
|
||||
</div>
|
||||
|
||||
<div className="cart-coupon-section">
|
||||
<input
|
||||
className="cart-coupon-input"
|
||||
type="text"
|
||||
placeholder="Coupon code"
|
||||
value={couponInput}
|
||||
onChange={(e) => setCouponInput(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleApplyCoupon()}
|
||||
/>
|
||||
<button
|
||||
className="cart-coupon-btn"
|
||||
type="button"
|
||||
onClick={handleApplyCoupon}
|
||||
disabled={couponLoading}
|
||||
>
|
||||
{couponLoading ? "…" : "Apply"}
|
||||
</button>
|
||||
{couponError && <p className="cart-coupon-error">{couponError}</p>}
|
||||
</div>
|
||||
|
||||
{checkoutError && <p className="cart-error-msg">{checkoutError}</p>}
|
||||
|
||||
{!clientSecret && (
|
||||
<button
|
||||
className="cart-checkout-btn"
|
||||
type="button"
|
||||
onClick={handleCheckout}
|
||||
disabled={checkoutLoading || items.length === 0}
|
||||
>
|
||||
{checkoutLoading ? "Processing…" : "Checkout"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{clientSecret && (
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<PaymentForm
|
||||
clientSecret={clientSecret}
|
||||
totalAmount={checkoutTotal ?? cart.totalAmount}
|
||||
onSuccess={() => {
|
||||
setClientSecret(null);
|
||||
setConfirmed(true);
|
||||
}}
|
||||
onCancel={() => setClientSecret(null)}
|
||||
/>
|
||||
</Elements>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user