> For the complete documentation index, see [llms.txt](https://ftcoders.first-tech.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ftcoders.first-tech.com/first-tech-ttp-sdk/checkout-with-tap-to-pay.md).
# 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
{% hint style="success" %}
**Mandatory:**
All values must update dynamically as item quantities change.
{% endhint %}
{% hint style="info" %}
**Recommended:**
Use visual icons (e.g., bag, coin, discount) to enhance scannability.
{% endhint %}
***
## Selecting a Payment Method
### Payment method modal
Must display all available payment options with clear icons and labels:
* Tap to Pay
* Pix
* Payment link
{% hint style="success" %}
**Mandatory:**
“Tap to Pay” must be visible and accessible, appropriately highlighted based on usage.
{% endhint %}
{% hint style="info" %}
**Recommended:**
Allow the system to reorder options based on user’s recent activity.
{% endhint %}
***
## 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
{% hint style="success" %}
**Mandatory:**
The “Continue” button must only be enabled after payment type and (if applicable) installment plan are selected.
{% endhint %}
{% hint style="info" %}
**Recommended:**
Clearly indicate the selected option using color, shadow, or a check icon.
{% endhint %}
***
## 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
{% hint style="success" %}
**Mandatory:**
The system must await NFC detection with real-time feedback.
{% endhint %}
{% hint style="info" %}
**Recommended:**
Display appropriate visual/sound alerts for errors (“Card not detected”) and confirmations (“Payment approved”).
{% endhint %}
***
## 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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://ftcoders.first-tech.com/first-tech-ttp-sdk/checkout-with-tap-to-pay.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
