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.

PreviousAccount SettingsNextNFC Contact and Payment

Last updated