Skip to content

[FE-01] Implement Stellar blockchain payment checkout flow #269

Description

@Leothosine

Problem

The platform markets cryptocurrency payments (XLM, USDC, BITE loyalty tokens) as a core feature, but there is zero checkout or payment implementation. frontend/app/(public)/cart/page.tsx is actually a workspace check-in page unrelated to restaurant ordering. The cartStore and AddToCartModal components exist but lead nowhere - orders are dispatched via a WhatsApp link generator, not a payment system. No PaymentMethod, Transaction, or LoyaltyToken types exist anywhere in the frontend.

Proposed Solution

Build a /checkout page with:

  1. Order summary (items, quantities, subtotal, tax, total)
  2. Payment method selector: card | xlm | usdc | whatsapp
  3. Stellar wallet connection using the Freighter browser extension API
  4. Transaction submission to Stellar testnet via @stellar/stellar-sdk
  5. Confirmation screen displaying the on-chain txHash linking to Stellar Expert Explorer

Add types: PaymentMethod, Transaction { id, amount, currency, txHash, status, createdAt }, LoyaltyToken { balance, symbol, earnRate }

Acceptance Criteria

  • User can connect a Freighter wallet and see their XLM/USDC balance
  • Selecting XLM or USDC and confirming creates a real Stellar testnet transaction
  • Confirmation page displays the txHash as a link to https://stellar.expert/explorer/testnet/tx/{hash}
  • WhatsApp fallback still works for non-crypto users
  • Cart clears after successful payment
  • Failed transaction shows an error with the Stellar error code

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions