> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alignet.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 5. Pruebas y producción

> Revisa seguridad, pruebas funcionales y criterios para pasar a producción.

<div className="ao-guide-rail not-prose"><a href="/pagos-virtuales/checkout-web/introduccion">← Portada de Checkout Web</a><span>PASO 05 / 05</span></div>

Completa el flujo en sandbox antes de solicitar la validación para producción. Comprueba que la respuesta del navegador, el backend y el estado del pedido sean consistentes.

Aplica estas recomendaciones cuando integres **Checkout Web** con Alignet One Flex.

## Responsabilidades del flujo

<CardGroup cols={2}>
  <Card title="Backend" icon="server">
    Genera tokens, solicita el `nonce`, valida estados finales y actualiza pedidos.
  </Card>

  <Card title="Frontend" icon="table-layout">
    Inicializa Flex, muestra el checkout y captura callbacks para mejorar la experiencia del usuario.
  </Card>
</CardGroup>

<Warning>
  No cierres una orden solo con la respuesta visual del navegador. Confirma el estado final desde backend, especialmente en métodos asíncronos.
</Warning>

## Seguridad

<AccordionGroup>
  <Accordion title="Nonce y tokens" icon="shield-check" defaultOpen>
    * Genera el `Access Token` y el `nonce` desde backend.
    * No expongas credenciales ni tokens en JavaScript, HTML, logs o analítica.
    * Renueva credenciales temporales cuando expiren.
  </Accordion>

  <Accordion title="Callbacks" icon="bolt">
    * Usa `responseCallback` para experiencia de usuario.
    * Usa `trackingCallback` para trazabilidad del flujo.
    * Usa `onErrorCallback` para mensajes controlados y soporte.
  </Accordion>

  <Accordion title="Métodos asíncronos" icon="clock">
    * Para QR, transferencia, Cuotéalo o PagoEfectivo, confirma por consulta o notificación.
    * Maneja estados pendientes, expirados y denegados.
    * Evita duplicar órdenes ante reintentos del usuario.
  </Accordion>
</AccordionGroup>

## UX recomendada

* Muestra mensajes claros para pago aprobado, rechazado, pendiente o cancelado.
* Conserva el número de operación para soporte.
* Valida Flex en desktop y mobile.
* Prueba idioma, botón de cierre y métodos visibles antes de producción.

## Checklist base

<AccordionGroup>
  <Accordion title="1. Preparación" icon="key" defaultOpen>
    * Requisitos de negocio y técnicos revisados.
    * Credenciales y ambiente de pruebas disponibles.
    * Dominio, páginas de retorno y callbacks definidos.
    * Flujo de Checkout Web confirmado para el comercio.
  </Accordion>

  <Accordion title="2. Configuración técnica" icon="gear">
    * Autenticación operativa para generar `token` o `nonce`.
    * Librerías o componentes frontend cargados correctamente.
    * Parámetros obligatorios enviados con formato correcto.
    * Estilos y experiencia visual revisados dentro del checkout.
  </Accordion>

  <Accordion title="3. Validación del flujo" icon="cart-shopping">
    * Transacción aprobada completada correctamente.
    * Transacción rechazada validada con manejo de errores.
    * Respuesta de autorización procesada en frontend.
    * Métodos asíncronos probados si están habilitados.
  </Accordion>

  <Accordion title="4. Confirmación y consistencia" icon="database">
    * Estado final confirmado desde backend o mediante consulta.
    * Duplicados y reintentos manejados de forma segura.
    * Orden o pago actualizado correctamente en tu sistema.
    * Logs mínimos disponibles para soporte y diagnóstico.
  </Accordion>

  <Accordion title="5. Producción" icon="rocket">
    * Sandbox completado con evidencia mínima de pruebas.
    * Configuración productiva revisada por ambiente.
    * Flujos críticos probados con el equipo de integraciones.
    * Integración lista para salida a vivo.
  </Accordion>
</AccordionGroup>

## Criterio mínimo de aprobación

<CardGroup cols={3}>
  <Card title="Compra aprobada" icon="check">
    Al menos un flujo aprobado validado de extremo a extremo.
  </Card>

  <Card title="Compra rechazada" icon="x">
    Validación completa del manejo de rechazo y mensaje para el usuario.
  </Card>

  <Card title="Resultado consistente" icon="shield-check">
    Confirmación entre frontend, backend y estado final del pago antes de salir a producción.
  </Card>
</CardGroup>