> 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/es/get-started/overview/click-to-pay-ux-examples.md).

# Ejemplos de UX de Click to Pay

Esta página ofrece ejemplos de UX de Click to Pay para ayudarle a diseñar recorridos del emisor que integren correctamente la API D1 y las API del esquema Click to Pay.

Estos ejemplos no son exhaustivos. Destacan flujos comunes y recomendados que puede adaptar a su aplicación del emisor y a su sitio web de banca en línea.

Para obtener detalles técnicos, consulte [Implementar Click to Pay](/click-to-pay/es/implement-click-to-pay-issuers.md).

## Lista de verificación de diseño

Use esta lista de verificación al diseñar experiencias de Click to Pay en su aplicación del emisor o sitio web de banca en línea:

* **Deje claro el valor.** Explique cómo Click to Pay mejora el proceso de pago (por ejemplo, un pago más rápido y menos introducción de datos) antes de pedir al usuario final que se inscriba.
* **Ofrezca puntos de entrada coherentes.** Ofrezca puntos de entrada para la inscripción desde la incorporación de nuevas tarjetas, la gestión de tarjetas existentes y la configuración de la tarjeta, no solo desde banners de campaña.
* **Reutilice la autenticación existente.** Use sus métodos estándar de SCA e ID\&V y evite introducir nuevos mecanismos de autenticación solo para Click to Pay.
* **Mantenga flujos breves.** Minimice el número de pantallas y de campos obligatorios. Recopile solo los datos requeridos por Click to Pay y por su contexto regulatorio.
* **Gestione los datos faltantes de forma adecuada.** Si faltan datos, guíe al usuario final para completarlos en un único flujo bien estructurado antes de llamar a la API de inscripción.
* **Sea transparente sobre la exclusión.** Explique claramente cómo darse de baja y qué ocurre con los datos de Click to Pay, y ofrezca una forma sencilla de reinscribirse.
* **Adapte a la accesibilidad y la localización.** Use un lenguaje claro, contraste legible y texto localizado para todos los mensajes de Click to Pay y las pantallas de consentimiento.

## Cuándo usar cada flujo

Use los flujos de esta página en las siguientes situaciones:

* **Inscripción en Click to Pay durante la solicitud de una nueva tarjeta**: cuando el usuario final solicita o activa una nueva tarjeta y desea ofrecer Click to Pay como parte de la experiencia de incorporación.
* **Solicitar los datos faltantes del usuario final antes de la inscripción en Click to Pay**: cuando la tarjeta existente del usuario final es elegible para Click to Pay, pero faltan datos obligatorios (por ejemplo, la dirección de correo electrónico o el número de teléfono móvil) o están incompletos.
* **Actualizar detalles del perfil de Click to Pay**: cuando el usuario final quiere cambiar detalles que afectan a su perfil de Click to Pay, como los datos de contacto o la dirección de facturación, normalmente desde la configuración de la tarjeta o del perfil.
* **Exclusión de Click to Pay**: cuando el usuario final desea dejar de usar Click to Pay para una tarjeta o perfil concreto, o cuando debe proporcionar un mecanismo de exclusión por motivos de cumplimiento o soporte.

## Inscripción en Click to Pay durante la solicitud de una nueva tarjeta

Cuando un usuario final solicita una nueva tarjeta, es el momento ideal para recopilar los datos necesarios para inscribir la tarjeta en Click to Pay. Para obtener detalles de integración técnica, consulte [Inscribir tarjetas en Click to Pay](/click-to-pay/es/implement-click-to-pay-issuers/enroll-cards-in-click-to-pay.md).

{% stepper %}
{% step %}

#### Recopilar datos del usuario final y los términos y condiciones

* Muestre campos para recopilar todos los datos requeridos por Click to Pay durante el flujo de solicitud de una nueva tarjeta (por ejemplo, la dirección de correo electrónico y el número de teléfono móvil).
* Si falta algún dato, pida al usuario final que lo proporcione en la aplicación del emisor o en el sitio web de banca en línea.
* Muestre los últimos términos y condiciones, incluidos los términos específicos de Click to Pay, y capture la aceptación explícita.
  {% endstep %}

{% step %}

#### Autentique al usuario final

* Después de recopilar los datos requeridos y la aceptación de los términos y condiciones, autentique al usuario final (por ejemplo, usando SCA a través de su método habitual de ID\&V).
  {% endstep %}

{% step %}

#### Llame a la API de inscripción de Click to Pay

* Una vez recopilados los datos y autenticado el usuario final, llame a la [API de inscripción de Click to Pay](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md).
* A continuación, la red de pago crea la tarjeta digital de Click to Pay, y el usuario final puede usar la tarjeta en comercios que admitan Click to Pay.

**Notas**

* Si prefiere inscribir la tarjeta solo después de que se active la tarjeta física, llame a la API después de que el usuario final active la tarjeta.
  {% endstep %}
  {% endstepper %}

<figure><img src="https://3391342470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuKGiYHoxBTUoHkwRFlXH%2Fuploads%2F3liYHSHVk2mBnVBZQmrM%2FUX%20-%20Enroll%20to%20C2P.svg?alt=media&amp;token=e40eb79a-4e57-420a-8d44-8cb83eb9abdf" alt=""><figcaption></figcaption></figure>

## Solicitar los datos faltantes del usuario final antes de la inscripción en Click to Pay

Para tarjetas existentes, puede llamar a la API de inscripción de Click to Pay en cuanto estén disponibles todos los datos requeridos del usuario final. Si faltan algunos datos, recójalos en la aplicación del emisor o en el sitio web de banca en línea antes de inscribir la tarjeta. Para ver opciones de implementación, consulte [Inscribir tarjetas en Click to Pay](/click-to-pay/es/implement-click-to-pay-issuers/enroll-cards-in-click-to-pay.md).

{% stepper %}
{% step %}

#### Notificar al usuario final y solicitar los datos faltantes

* Notifique al usuario final (por ejemplo, con una notificación push o un banner en la aplicación) e indíquele que proporcione los datos requeridos por Click to Pay que faltan.
  {% endstep %}

{% step %}

#### Autenticar e inscribir

* Después de que el usuario final confirme los detalles y se autentique correctamente, llame a la [API de inscripción de Click to Pay](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md).
  {% endstep %}

{% step %}

#### Gestionar términos y condiciones

* Si se requieren términos y condiciones actualizados, muéstrelos y capture la aceptación en el mismo flujo, inmediatamente después de recopilar los datos faltantes.
  {% endstep %}
  {% endstepper %}

<figure><img src="https://3391342470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuKGiYHoxBTUoHkwRFlXH%2Fuploads%2F3pLNorUM6FjbZfDq8Dcm%2FUX%20-%20Edit%20C2P%20Details-1.svg?alt=media&amp;token=f6af9de8-623e-4c17-980e-ffd1890ef830" alt=""><figcaption></figcaption></figure>

## Actualizar detalles del perfil de Click to Pay

Es posible que los usuarios finales deban actualizar detalles vinculados a su perfil de Click to Pay. No necesita almacenar todos los detalles localmente: puede usar la API de ver perfiles de Click to Pay para recuperar todos los datos almacenados por la red de pago. Para ver los flujos completos de la API, consulte [Recuperar perfiles de Click to Pay](/click-to-pay/es/implement-click-to-pay-issuers/retrieve-click-to-pay-profiles.md) y [Actualizar perfiles de Click to Pay](/click-to-pay/es/implement-click-to-pay-issuers/update-click-to-pay-profiles.md).

{% stepper %}
{% step %}

#### Recuperar el perfil existente

* Use la [API de obtención de perfiles de consumidores de Click to Pay](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md) para recuperar el perfil completo del usuario final y mostrar los detalles relevantes en la aplicación del emisor o en el sitio web de banca en línea.
  {% endstep %}

{% step %}

#### Permita que el usuario final edite los detalles

* Permita que el usuario final actualice los campos necesarios en su experiencia (por ejemplo, la dirección de correo electrónico o la dirección de facturación).
* Después de que el usuario final apruebe los cambios y se autentique correctamente, llame a las API de actualización correspondientes.

API a usar:

* API de actualización de consumidor de Click to Pay ([Resumen de la API](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md))
* API de actualización de tarjeta de Click to Pay ([Resumen de la API](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md))
  {% endstep %}
  {% endstepper %}

<figure><img src="https://3391342470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuKGiYHoxBTUoHkwRFlXH%2Fuploads%2FhhyMm1ycueWCYbAq00zb%2FUX%20-%20Edit%20C2P%20Details.svg?alt=media&amp;token=f47915da-24ad-43c8-875c-65c283fda7ed" alt=""><figcaption></figcaption></figure>

## Exclusión de Click to Pay

Los usuarios finales deben poder darse de baja de Click to Pay en cualquier momento a través de la aplicación del emisor o del sitio web de banca en línea. Para obtener detalles técnicos, consulte [API de exclusión de Click to Pay](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md).

{% stepper %}
{% step %}

#### Ofrezca una opción de exclusión

* Proporcione una opción de exclusión clara en la aplicación del emisor o en el sitio web de banca en línea, y pida al usuario final que confirme la acción.
  {% endstep %}

{% step %}

#### Autentique y llame a la API de exclusión

* Después de la confirmación y una autenticación correcta, llame a la [API de exclusión de Click to Pay](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md) para enviar la solicitud a la red de pago.
  {% endstep %}

{% step %}

#### Defina la experiencia posterior a la exclusión

* Después de la exclusión, aún puede mostrar los datos de Click to Pay proporcionados anteriormente en modo de solo lectura.
* Opcionalmente, ofrezca una forma sencilla de que el usuario final vuelva a optar por participar y reinscriba la tarjeta en Click to Pay.
  {% endstep %}
  {% endstepper %}

<figure><img src="https://3391342470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuKGiYHoxBTUoHkwRFlXH%2Fuploads%2Fq9kkDJiXMKMo662EB58c%2FUX%20-%20Opt%20out%20C2P.svg?alt=media&amp;token=7449859c-521f-4e03-9966-0f545252f18c" alt=""><figcaption></figcaption></figure>


---

# 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/es/get-started/overview/click-to-pay-ux-examples.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.