Floralé uses WhatsApp as its entire checkout channel — there is no payment gateway, no server-side order database, and no email confirmation. When a customer is ready to buy, the app composes a formatted order message and opens WhatsApp via aDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/dlampatricio/florale/llms.txt
Use this file to discover all available pages before exploring further.
wa.me deep-link so the shop owner receives a structured summary directly in their chat. This page documents how that flow works, where the relevant code lives, and what you need to change when deploying the shop for a different business.
How the flow works
- The customer adds products to their cart (managed by
useCartStore). - They navigate to
/carritoor open the cart drawer from any page. - They fill in any required details and click Enviar pedido por WhatsApp.
generateWhatsAppMessagecomposes a plain-text message from the cart contents.- The app opens
https://wa.me/{number}?text={encodedMessage}in a new tab. - WhatsApp pre-fills the message in a new chat with the shop number — the customer just taps Send.
- The shop owner receives the order, confirms availability, and requests a 50 % deposit to hold the items.
Floralé intentionally skips a traditional payment gateway. Orders are confirmed manually by the shop owner over WhatsApp, who then requests a 50 % deposit via bank transfer or cash before preparing the arrangement. This keeps the setup simple and personal — a deliberate choice for an artisanal gift shop.
Entry point 1 — Cart page (/carrito)
The cart page at app/(app)/carrito/page.tsx is the full checkout experience. Before the customer can send their order, they must complete four delivery-detail fields:
| Field | Label | Description |
|---|---|---|
sender | De (tu nombre) | Name of the person placing the order |
recipient | Para (quien recibe) | Name of the gift recipient |
deliveryDate | Date picker | Requested delivery date |
deliveryMethod | Toggle | "Envío" (home delivery) or "Retiro" (store pickup) |
addToast('Completa todos los datos del pedido') fires and the WhatsApp redirect is blocked.
Checkout handler
delivery argument is provided, generateWhatsAppMessage includes the full Datos del pedido block in the message (see Message format below).
Entry point 2 — Cart drawer (WhatsAppButton)
The WhatsAppButton component (in components/whatsapp-button.tsx) is used inside the cart drawer — the slide-in panel accessible from the navigation bar. This is a quick checkout path: no delivery fields, just the item list and total.
items.length === 0). Unlike the cart page, this path skips delivery details entirely — the shop owner follows up over chat to confirm specifics.
wa.me URL format
WhatsApp’s click-to-chat service accepts a pre-filled message via a simple URL scheme:
| Part | Example | Notes |
|---|---|---|
{number} | 59893705133 | Full international number, no + or spaces |
{message} | Raw multi-line string | Must be passed through encodeURIComponent |
window.open(url, '_blank'), which launches WhatsApp Web in a new browser tab on desktop or the WhatsApp app on mobile.
Message format
generateWhatsAppMessage from lib/utils.ts produces a structured plain-text message. WhatsApp renders *text* as bold and the ━━━ box-drawing characters as visual dividers.
Full message — with delivery details
This is what the shop owner receives when the customer checks out via/carrito:
Quick message — without delivery details
This is what the shop owner receives when the customer sends from the cart drawer:Per-item notes
Every cart item can carry an optional free-text note, editable inline on the cart page. Notes appear beneath the relevant product line in the WhatsApp message, indented and prefixed with ✏️:useCartStore via updateNote(productId, value) and mapped onto the note field of each item before being passed to generateWhatsAppMessage. The cart drawer’s WhatsAppButton does not pass notes (items are resolved without the note field), so notes only appear in messages sent from the full cart page.
Delivery method options
The delivery method toggle on the cart page offers exactly two values:| Value | Meaning |
|---|---|
"Envío" | Home delivery — the shop ships or delivers to the recipient’s address |
"Retiro" | Store pickup — the customer collects the order from the shop |
delivery.method and appears as *Modalidad:* in the message. No further routing logic depends on this value in the frontend — it is purely informational for the shop owner.