> 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 proporciona ejemplos de UX de Click to Pay para ayudarle a diseñar recorridos del emisor que integren correctamente la API D1 y las APIs 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:
* **Haga que el valor quede claro.** Explique cómo Click to Pay mejora el proceso de pago (por ejemplo, una compra más rápida y menos introducción de datos) antes de pedir al usuario final que se registre.
* **Ofrezca puntos de entrada coherentes.** Proporcione puntos de entrada para el registro desde la activación de una nueva tarjeta, 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.** Utilice sus métodos estándar de SCA e ID\&V y evite introducir nuevos mecanismos de autenticación solo para Click to Pay.
* **Mantenga los 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 normativo.
* **Gestione los datos faltantes con fluidez.** 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 voluntaria.** Explique claramente cómo darse de baja y qué ocurre con los datos de Click to Pay, y ofrezca una forma sencilla de volver a inscribirse.
* **Apoye la accesibilidad y la localización.** Utilice un lenguaje claro, un contraste legible y textos localizados para todos los mensajes y pantallas de consentimiento de Click to Pay.
## 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 está solicitando o activando una nueva tarjeta y usted quiere 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 apta 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 los datos del perfil de Click to Pay**: cuando el usuario final quiere cambiar datos que afectan a su perfil de Click to Pay, como la información de contacto o la dirección de facturación, normalmente desde la configuración de la tarjeta o del perfil.
* **Exclusión voluntaria de Click to Pay**: cuando el usuario final quiere dejar de usar Click to Pay para una tarjeta o perfil determinado, o cuando usted 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 un momento ideal para recopilar los datos necesarios para inscribir la tarjeta en Click to Pay. Para obtener detalles técnicos de integració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 %}
#### Recopilar los datos del usuario final y los T\&C
* Muestre campos para recopilar todos los datos requeridos por Click to Pay durante el flujo de solicitud de nueva tarjeta (por ejemplo, dirección de correo electrónico y número de teléfono móvil).
* Si falta algún dato, exija al usuario final que lo proporcione en la aplicación del emisor o en el sitio web de banca en línea.
* Muestre los términos y condiciones más recientes, incluidos los 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 obligatorios y la aceptación de los T\&C, autentique al usuario final (por ejemplo, usando SCA mediante 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 pagos 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 activar la tarjeta física, llame a la API después de que el usuario final active la tarjeta.
{% endstep %}
{% endstepper %}
## Solicitar los datos faltantes del usuario final antes de la inscripción en Click to Pay
Para las tarjetas existentes, puede llamar a la API de inscripción de Click to Pay en cuanto estén disponibles todos los datos obligatorios del usuario final. Si faltan algunos datos, recopílelos 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 faltantes requeridos por Click to Pay.
{% endstep %}
{% step %}
#### Autenticar e inscribir
* Después de que el usuario final confirme los datos 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 %}
## Actualizar los datos del perfil de Click to Pay
Es posible que los usuarios finales necesiten actualizar los datos vinculados a su perfil de Click to Pay. No es necesario almacenar todos los datos localmente: puede usar la API de visualización de perfiles de Click to Pay para recuperar los datos completos que conserva la red de pagos. Para conocer 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 consumidor 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 datos relevantes en la aplicación del emisor o en el sitio web de banca en línea.
{% endstep %}
{% step %}
#### Permitir que el usuario final edite los datos
* 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 pertinentes.
APIs que se deben usar:
* Actualización de consumidor de Click to Pay ([Resumen de la API](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md))
* 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 %}
## Exclusión voluntaria 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 voluntaria 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 voluntaria
* Proporcione una opción clara de exclusión voluntaria 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 %}
#### Autenticar y llamar a la API de exclusión voluntaria
* Después de la confirmación y de una autenticación correcta, llame a la [API de exclusión voluntaria de Click to Pay](/click-to-pay/es/integrate-the-d1-api/d1-api-summary.md) para enviar la solicitud a la red de pagos.
{% endstep %}
{% step %}
#### Defina la experiencia posterior a la exclusión voluntaria
* Después de darse de baja, aún puede mostrar los datos de Click to Pay proporcionados anteriormente en modo de solo lectura.
* Opcionalmente, ofrezca una forma sencilla para que el usuario final vuelva a optar e inscriba de nuevo la tarjeta en Click to Pay.
{% endstep %}
{% endstepper %}
---
# 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=&goal=
```
`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.