Checkout Flow

The WhatsApp Flow templates that power the shopping and checkout experience for customers.

Overview

The commerce module uses WhatsApp Flows (multi-screen forms rendered inside WhatsApp) to provide an app-like shopping experience. There are 5 flow types:

Flow Screens Purpose
Catalogue Flow 6 Primary shopping flow — browse, select, cart, checkout, pay
Checkout Flow 3 Standalone checkout — delivery, payment, confirmation
Cart Flow 3 View and manage cart
Order Status Flow 2 View single order details
Order History Flow 2 Browse all past orders

Catalogue Flow (Primary Shopping Flow)

File: app/Modules/Commerce/Templates/CatalogueFlowTemplate.php

This is the main flow customers use to browse products, add to cart, and check out — all in one experience.

Screens (6)

  1. PRODUCT_LIST — Search bar, product radio list, pagination, cart footer with checkout button
  2. PRODUCT_DETAIL — Product image, name, description, price, variant dropdown, quantity input, "Add to Cart" footer
  3. CHECKOUT_CART — Checkbox list of cart items for partial checkout, "Proceed" footer
  4. DELIVERY_DETAILS — Delivery method radio group, name/phone/address/city/state inputs
  5. ORDER_SUMMARY — Items, delivery info, subtotal, delivery fee, total, "Complete Order" footer
  6. ORDER_SUCCESS — Confirmation message, "Done" footer

Routing Model

PRODUCT_LIST → PRODUCT_DETAIL, CHECKOUT_CART
PRODUCT_DETAIL → []
CHECKOUT_CART → DELIVERY_DETAILS
DELIVERY_DETAILS → ORDER_SUMMARY
ORDER_SUMMARY → ORDER_SUCCESS
ORDER_SUCCESS → []

CheckoutFlowTemplate

File: app/Modules/Commerce/Templates/CheckoutFlowTemplate.php

A standalone checkout flow used separately from the catalogue (e.g., triggered by "checkout" text command).

Flow Structure

The checkout flow has three screens:

  1. DELIVERY_INFO — Collects delivery details

    • Full Name (required)
    • Phone Number (required)
    • Delivery Address (required)
    • City (optional)
    • State (optional)
    • Shows order summary and total

  2. ORDER_CONFIRM — Payment selection and review

    • Payment method dropdown (Cash on Delivery / Card Payment)
    • Order summary display
    • Delivery summary display
    • Total display
    • Error display mechanism for validation

  3. ORDER_SUCCESS — Confirmation

    • Success message with order ID
    • Instructions to track order
    • "Done" button to complete

Routing Model

DELIVERY_INFO → ORDER_CONFIRM → ORDER_SUCCESS (terminal)

Dynamic Data

  • Uses real product data from the company when available
  • Falls back to hardcoded example products when no company ID is provided
  • Currency symbol comes from commerce.defaults.currency_symbol config
  • All labels support customization via companySettings('shop.flows.*')

Customization

Store owners can customize the checkout flow through Shop Settings:

  • Screen titles (delivery info, confirm order, order placed)
  • Field labels (full name, phone, address, etc.)
  • Button labels (review order, confirm order)
  • Confirmation messages

See Also

Keywords

checkout, flow, whatsapp flow, delivery, payment method, order confirmation, commerce template