Skip to main content

Cart & Checkout

Route: /cart
File: ayts-fe/app/cart/page.tsx
Auth required: Yes (redirects to /login if not authenticated)

Purpose​

Shopping cart and checkout flow. Customers review cart items, select a payment method, add a delivery address, and place their order.

Sections​

Cart Items​

  • Line items grouped by store
  • Quantity adjuster (+ / –) per item
  • Remove item button
  • Item subtotal (price × quantity)
  • Store subtotal per group

Order Summary​

  • Items subtotal
  • Delivery fee (per store)
  • Commission note (3% platform fee included in prices)
  • Total

Delivery Address​

  • Address input form
  • Uses saved address from profile if available
  • Required for all orders

Payment Method​

  • Cash on Delivery (COD) — available immediately ✅
  • GCash — API ready, FE selector pending ⚠️
  • Maya — API ready, FE selector pending ⚠️

Place Order Flow​

1. Customer fills address + selects payment method
2. POST /api/orders  → creates order + order_items
3. POST /api/payments/initiate  → { orderId, paymentMethod }
   COD:  → order status set to "confirmed" immediately
   GCash/Maya: → returns { checkoutUrl } → redirect to PayMongo
4. On success → navigate to /orders/{orderId}

Data Fetching​

// Create order
POST /api/orders
{
  items: [{ productId, storeId, quantity, price }],
  deliveryAddress: string,
  paymentMethod: 'cash_on_delivery' | 'gcash' | 'maya'
}

// Initiate payment
POST /api/payments/initiate
{ orderId: string, paymentMethod: string }
// Returns: { success, orderId, paymentMethod, checkoutUrl? }

Empty Cart State​

When cart is empty, shows:

  • Illustration
  • "Your cart is empty" message
  • "Browse Stores" button → /stores

Known Issues / Status​

ItemStatus
COD end-to-end✅ Working
GCash/Maya selector UI❌ Missing — hardcoded to COD
Payment redirect (GCash/Maya)❌ Missing — needs checkoutUrl redirect
Cart item persistence✅ Cart stored in Supabase
Order items saved correctly✅ Fixed (HTTP 500 on failure)
Delivery address required✅ Validated

Build the payment method selector in cart/page.tsx:

<RadioGroup value={paymentMethod} onValueChange={setPaymentMethod}>
  <RadioGroupItem value="cash_on_delivery" label="Cash on Delivery" />
  <RadioGroupItem value="gcash" label="GCash" />
  <RadioGroupItem value="maya" label="Maya" />
</RadioGroup>

After POST /api/payments/initiate, if checkoutUrl is returned:

if (result.checkoutUrl) {
  window.location.href = result.checkoutUrl; // PayMongo redirect
}