> For the complete documentation index, see [llms.txt](https://docs.payments.thalescloud.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.payments.thalescloud.io/click-to-pay-merchants/use-cases/process-a-click-to-pay-transaction.md).

# Process a Click to Pay transaction

Process a Click to Pay transaction in three steps:

1. Initiate the checkout flow in the merchant application or website.
2. Retrieve payment data from Thales (backend-to-backend).
3. Send the final transaction result back to Thales backend.

## 1. Initiate payment with the Mastercard JavaScript SDK

The flow starts on the merchant checkout page. The end user selects Click to Pay as the payment method.

<figure><img src="/files/JBelyoFm5fW6fAiDDM6D" alt=""><figcaption><p>Click to Pay payment initiation flow.</p></figcaption></figure>

<table><thead><tr><th width="100">Step</th><th>Description</th></tr></thead><tbody><tr><td>1</td><td>The end user is ready to pay.</td></tr><tr><td>2</td><td>The merchant application or website calls the Mastercard JavaScript SDK to detect whether the end user is recognized.</td></tr><tr><td>3</td><td>The Mastercard JavaScript SDK checks the end user status with the payment network.</td></tr><tr><td>4</td><td>The merchant application or website renders the user experience for the detected flow.<br><br>The merchant application or website stays in control of the page. It can use UI components provided by the Mastercard JavaScript SDK.</td></tr><tr><td>5</td><td>The end user selects Click to Pay as the payment method.</td></tr><tr><td>6–7</td><td>The Mastercard JavaScript SDK runs the Click to Pay payment flow.</td></tr><tr><td>8–9</td><td>The merchant application or website receives <code>transactionId</code> and <code>flowId</code> and sends them to the merchant/PSP backend.</td></tr></tbody></table>

For the Mastercard JavaScript SDK integration, see the [Mastercard Click to Pay documentation](https://developer.mastercard.com/unified-checkout-solutions/documentation).

## 2. Retrieve payment data (backend-to-backend)

After the checkout flow completes, the merchant/PSP backend uses `transactionId` and `flowId` to retrieve payment data from Thales backend.

<figure><img src="/files/KNxvEW5VLCumYhJ8BErb" alt=""><figcaption><p>Payment data retrieval flow.</p></figcaption></figure>

<table><thead><tr><th width="100">Step</th><th>Description</th></tr></thead><tbody><tr><td>10</td><td>The merchant/PSP sends a backend-to-backend request to Thales to retrieve payment data.</td></tr><tr><td>11–12</td><td>Thales backend contacts Mastercard, which coordinates with other payment networks as needed.</td></tr><tr><td>13–15</td><td>Thales backend returns the payment data for authorization (for example, a token or PAN).</td></tr></tbody></table>

## 3. Send payment confirmation

After authorization completes, the merchant/PSP backend sends the final result to Thales backend.

<figure><img src="/files/BKLiaj7x0N5RPolFsCsS" alt=""><figcaption><p>Payment confirmation flow.</p></figcaption></figure>

<table><thead><tr><th width="100">Step</th><th>Description</th></tr></thead><tbody><tr><td>16–17</td><td>The merchant/PSP receives the authorization response and displays the result to the end user.</td></tr><tr><td>18–20</td><td>The merchant/PSP sends the transaction result to Thales backend, which shares it with the payment network.</td></tr></tbody></table>


---

# 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://docs.payments.thalescloud.io/click-to-pay-merchants/use-cases/process-a-click-to-pay-transaction.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.
