For the complete documentation index, see llms.txt. This page is also available as Markdown.
Checkout with Tap to Pay
Objective
Define the minimum requirements for completing a sale using Tap to Pay during the checkout process, ensuring clear order visualization, flexible payment options, and secure NFC-based payment interaction.
Insights
This flow must be optimized for environments with poor connectivity (supporting order caching).
Compatibility with NFC readers (Android/iOS) must be tested according to the hardware in use.
The time between confirming and reading via NFC must not exceed 5 seconds to ensure a smooth experience.
Order Review
01 - Item list
Must display image, name, category, price, and quantity controls for each product.
02 - Price summary
Must show: number of items, gross amount, discount applied, and total amount clearly highlighted.
03 - “Payment method” button
Must be prominently displayed as the main call-to-action and enabled once at least one item is in the cart
Mandatory:
All values must update dynamically as item quantities change.
Recommended:
Use visual icons (e.g., bag, coin, discount) to enhance scannability.
Selecting a Payment Method
Payment method modal
Must display all available payment options with clear icons and labels:
Tap to Pay
Pix
Payment link
Mandatory:
“Tap to Pay” must be visible and accessible, appropriately highlighted based on usage.
Recommended:
Allow the system to reorder options based on user’s recent activity.
Tap to Pay Definition
Payment options
User must select Credit or Debit. If Credit is selected, installment options must be displayed showing:
Number of installments
Amount per installment
Total amount
Mandatory:
The “Continue” button must only be enabled after payment type and (if applicable) installment plan are selected.
Recommended:
Clearly indicate the selected option using color, shadow, or a check icon.
NFC Payment Screen
NFC instruction screen must include:
Highlighted final amount
Payment type (e.g., credit – one-time)
Illustration showing card or phone proximity gesture
Animated NFC scan indicator or icon
Mandatory:
The system must await NFC detection with real-time feedback.
Recommended:
Display appropriate visual/sound alerts for errors (“Card not detected”) and confirmations (“Payment approved”).
Mandatory Messages
When no payment method is selected:
Please select a payment method to continue.
When NFC fails:
Could not detect the card. Please adjust the position and try again.
Expected Behaviors
The item list must remain editable until a payment method is selected.
The “Payment method” button must remain visible/fixed, even when scrolling.
The total amount must be locked once the NFC phase starts.
The transaction must be cancelable anytime before confirmation.
