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

# Ciclo usuario pagador

Este flujo describe el recorrido del usuario desde la consulta hasta el pago.

## Inicio pago

1. Cuando el cliente abre el enlace es redireccionado al ciclo de pago.

<div style={{ textAlign: "center", margin: "24px 0" }}>
  <img
    src="https://mintcdn.com/zonavirtualsa/r0wpj4_wB3vOCmRU/docs/imagenes/login_4.jpg?fit=max&auto=format&n=r0wpj4_wB3vOCmRU&q=85&s=519407128abda9ef9841469765b5791a"
    style={{ 
  width: "100%",
  maxWidth: "500px",
  borderRadius: "6px",
  boxShadow: "0 10px 30px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.1)"
}}
    width="1710"
    height="1051"
    data-path="docs/imagenes/login_4.jpg"
  />
</div>

2. Información cliente y detalle de la(s) factura(s)

<div style={{ textAlign: "center", margin: "24px 0" }}>
  <img
    src="https://mintcdn.com/zonavirtualsa/r0wpj4_wB3vOCmRU/docs/imagenes/selecci%C3%B3n_de_facturas.jpg?fit=max&auto=format&n=r0wpj4_wB3vOCmRU&q=85&s=55dd51ee587def70d490604310f9e21d"
    style={{ 
  width: "100%",
  maxWidth: "500px",
  borderRadius: "6px",
  boxShadow: "0 10px 30px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.1)"
}}
    width="1920"
    height="1080"
    data-path="docs/imagenes/selección_de_facturas.jpg"
  />
</div>

Cuando el usuario da clic en el botón “Pagar”, es redireccionado a la vista donde debe aceptar los términos y condiciones y seleccionar el medio de pago.

<div style={{ textAlign: "center", margin: "24px 0" }}>
  <img
    src="https://mintcdn.com/zonavirtualsa/r0wpj4_wB3vOCmRU/docs/imagenes/medios_de_pago_zonarecaudo.jpg?fit=max&auto=format&n=r0wpj4_wB3vOCmRU&q=85&s=dfb1e5de45a4f9a4c0a6a27ee030b3e6"
    style={{ 
  width: "100%",
  maxWidth: "500px",
  borderRadius: "6px",
  boxShadow: "0 10px 30px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.1)"
}}
    width="1920"
    height="1123"
    data-path="docs/imagenes/medios_de_pago_zonarecaudo.jpg"
  />
</div>

3. Cuando el usuario da clic en el botón “Pagar”, es redireccionado a la vista de PSE donde debe digitar el correo registrado en PSE para poder realizar el pago.

<div style={{ textAlign: "center", margin: "24px 0" }}>
  <img
    src="https://mintcdn.com/zonavirtualsa/r0wpj4_wB3vOCmRU/docs/imagenes/pago_pse.jpg?fit=max&auto=format&n=r0wpj4_wB3vOCmRU&q=85&s=c3017dea69bf4a9c9272ebbc5871fde9"
    style={{ 
  width: "100%",
  maxWidth: "500px",
  borderRadius: "6px",
  boxShadow: "0 10px 30px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.1)"
}}
    width="983"
    height="462"
    data-path="docs/imagenes/pago_pse.jpg"
  />
</div>

4. Resultado Final

5. El sistema muestra el comprobante de pago
   Estado transacción sea aprobado, rechazado o pendiente.

<div style={{ textAlign: "center", margin: "24px 0" }}>
  <img
    src="https://mintcdn.com/zonavirtualsa/r0wpj4_wB3vOCmRU/docs/imagenes/comprobante_de_pago_aprobado.jpg?fit=max&auto=format&n=r0wpj4_wB3vOCmRU&q=85&s=d5fbb9c98ddb93922e4a0c6fa870871b"
    style={{ 
  width: "100%",
  maxWidth: "500px",
  borderRadius: "6px",
  boxShadow: "0 10px 30px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.1)"
}}
    width="1920"
    height="1173"
    data-path="docs/imagenes/comprobante_de_pago_aprobado.jpg"
  />
</div>

***

## Acciones permitidas al usuario

Dependiendo de la configuración:

* Modificar correo
* Modificar celular
* Realizar abonos
* Ajustar valor de pago

<Callout type="success">
  La actualización del estado ocurre automáticamente al finalizar el pago.
</Callout>