131 Comprobante de Pago Sistema de Reserva de Citas Medicas con LARAVEL(PHP-MySql) FullStack Parte 2

Duración: 15 min
Módulo: 💵 Pagos, Impresión y Cierre Lección 9 de 11

Descripción

La Lección 131

Parte 2 de la implementación del Comprobante de Pago, se enfoca en añadir un elemento de seguridad al documento PDF mediante la integración de un Código QR con la información clave de la transacción.

⚙️ Implementación del Código QR de Seguridad

1. Instalación y Configuración [00:00]

El primer paso es incorporar la funcionalidad de generación de códigos QR a Laravel:

  • Dependencia: Se instala la librería andreo/laravel-qrcode (mediante Composer) para manejar la generación de códigos QR de forma sencilla [00:00].
  • Controlador: En el PagosController, se importan las clases de la librería (QrCode y Image) para poder utilizarlas en el método pdf [00:33].

2. Generación de Datos y Código QR [00:53]

Se define la información que estará contenida en el código de seguridad:

  • Payload ($data): Se construye una cadena de texto que incluye los detalles esenciales del pago para que puedan ser verificados al escanear el código. Esta información incluye [01:14]:
    • Una etiqueta de seguridad (e.g., "Código de seguridad del comprobante de pago").
    • El nombre completo del paciente ($pago->paciente->apellidos y $pago->paciente->nombres) [01:42].
    • La fecha de pago ($pago->fecha_pago) [02:35].
    • El monto cancelado ($pago->monto) [02:40].
  • Generación del QR: El código QR se genera a partir de la cadena $data y se codifica como una imagen PNG en formato base64 [03:04]. Este formato permite incrustar directamente la imagen en el HTML (del PDF) sin depender de archivos temporales.

3. Diseño y Posicionamiento en el PDF [03:29]

La parte más compleja es la correcta visualización del QR en el documento:

  • Inclusión en la Vista: En la vista pagos/pdf.blade.php, se inserta la imagen del QR directamente en la estructura de la tabla del recibo [03:51].
  • Ajustes de Tabla: Para que el código QR (que tiene una forma cuadrada y es voluminoso) se posicione junto a los datos del pago y la fecha, se utiliza el atributo rowspan en la celda del QR [06:24]. Esto permite que el QR ocupe el espacio vertical de varias celdas adyacentes, creando un diseño limpio.
  • Dimensiones: El tamaño del código QR se ajusta a 150 píxeles para que encaje de forma elegante en el diseño del comprobante [07:20].

4. Estructura Final del Comprobante [08:33]

Se finaliza el diseño visual del recibo:

  • Se identifica claramente la copia como "Comprobante de Pago Original" [08:42].
  • Se añade una línea divisoria (mediante guiones en una etiqueta <p>) que servirá para separar las copias del comprobante (Original y Copia) [09:06].
  • Se realizan ajustes finales de espaciado y se prepara un espacio en la parte inferior para las futuras firmas de las partes [10:35].

El resultado es un comprobante de pago que incluye todos los detalles de la transacción y un código QR funcional para fines de auditoría y seguridad.