> 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.

***

<figure><img src="/files/ut2ZsGj5PuFfJmSBVLM1" alt=""><figcaption></figcaption></figure>

## Order Review

### 01 - Item list&#x20;

Must display image, name, category, price, and quantity controls for each product.

### 02 - Price summary&#x20;

Must show: number of items, gross amount, discount applied, and total amount clearly highlighted.

### 03 - “Payment method” button&#x20;

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:**&#x20;

All values must update dynamically as item quantities change.
{% endhint %}

{% hint style="info" %}
**Recommended:**&#x20;

Use visual icons (e.g., bag, coin, discount) to enhance scannability.
{% endhint %}

***

## Selecting a Payment Method

### Payment method modal&#x20;

Must display all available payment options with clear icons and labels:

* Tap to Pay
* Pix
* Payment link&#x20;

{% hint style="success" %}
**Mandatory:**&#x20;

“Tap to Pay” must be visible and accessible, appropriately highlighted based on usage.
{% endhint %}

{% hint style="info" %}
**Recommended:**&#x20;

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&#x20;

{% hint style="success" %}
**Mandatory:**&#x20;

The “Continue” button must only be enabled after payment type and (if applicable) installment plan are selected.
{% endhint %}

{% hint style="info" %}
**Recommended:**&#x20;

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&#x20;

{% hint style="success" %}
**Mandatory:**&#x20;

The system must await NFC detection with real-time feedback.
{% endhint %}

{% hint style="info" %}
**Recommended:**&#x20;

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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://ftcoders.first-tech.com/first-tech-ttp-sdk/checkout-with-tap-to-pay.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.