In-Chat Payment Flow

What It Is

The in-chat payment box lets landlords pay for on-demand service tasks (like cleaning or maintenance) directly within the conversation — no navigation required. It creates a transparent and auditable payment experience inside the same thread where the service was requested.

When It Appears

After a one-time service request is priced by Operations, an Ops agent manually sends a payment message from the admin dashboard. That message appears in the related chat thread as a compact “Pay” box inside the timeline.

Note: Until Operations sets a price and sends the payment message, the in-chat Pay box will not appear.

What the Box Shows

• Date/time the message was created

• Service name (e.g., Cleaning, Maintenance, Linen Change)

• Property details (thumbnail + title)

• Short description and “Full report here” link → opens the detailed task report page

• Total price (formatted in currency)

• Primary button:

  • “Pay” — visible when unpaid

  • “Paid ✅” — once payment is completed or the purchase is already marked ACTIVE

Behavior

• Clicking “Pay” opens the Task Payment modal (inline dialog).

• After successful payment:

  • The button switches to “Paid”

  • A “Payment processed” message automatically appears in the same chat thread

• If the purchase is already ACTIVE, the Pay button is disabled and displays “Paid.”

Task Payment Modal (From Chat)

Purpose

Allows landlords to pay for a single task using a saved card or by adding a new payment method—without leaving the chat.

What It Shows

Header

• Compact task reference: date and task ID

Summary

• Property and Service details

• Link: “View Report” → navigates to the task’s full payment/report page

Pricing

• “Total (GBP)” — total amount due for the task

Payment Method Section

• Displays the default saved card (brand + last four digits)

• Expand to manage cards:

  • View and select other cards

  • Add a new card

  • Delete or set a default

Actions

Action	Description
Pay	Submits payment for the task using the selected card
Add Payment Method	Opens nested “Add New Card” form; card becomes selectable immediately

Success Flow

1. Payment is processed via the task payment API.

2. The system posts a “Payment processed” message to the same chat thread.

3. The modal closes, and the in-chat Pay box updates to “Paid.”

Error Handling

• Errors (e.g., failed card charge) are displayed as toasts.

• The modal remains open so users can retry, switch cards, or add a new one.

“Payment Processed” Message (Chat)

What It Is

A confirmation message automatically added to the chat once payment succeeds—providing a clear, auditable confirmation of the completed transaction.

What It Shows

• Date/time of payment confirmation

• Message text: “Payment was successfully processed.”

• “View Receipt” button → opens the task’s detailed payment/receipt page

Purpose

Ensures the landlord sees proof of payment directly in the conversation and can quickly open the receipt for records.

🔄 End-to-End Flow Summary

Step	Actor	Action	Result
1	Landlord	Requests a one-time service via Service Purchase modal	Task created, awaits pricing
2	Operations	Sets price and sends payment message from admin panel	Chat thread displays Pay box
3	Landlord	Clicks Pay → completes Task Payment modal	Payment processed
4	System	Posts “Payment processed” confirmation message	Chat reflects updated state
5	Landlord	Clicks “View Receipt” or “Full report here”	Opens detailed payment/receipt page

🧪 QA Checklist

In-Chat Payment Box

• Appears only when Operations sends the payment message.

• Shows correct service, property, and total.

• Pay button opens modal and switches to Paid after success.

Task Payment Modal

• Default card preselected; card management works inline.

• Payment successfully posts a confirmation message to chat.

• Errors display and allow retry without closing modal.

“Payment Processed” Message

• Appears instantly after payment completion.

• “View Receipt” links to correct Payments Page.

Payments Page

• Displays correct task ID, status, property, and amount.

• Accessible from both chat entry points.

• Matches accounting records and timestamps.