Cómo añadir firmas electrónicas a tu aplicación Wasp

Wasp es un framework full-stack para React, Node.js y Prisma que te permite definir autenticación, acciones del servidor y entidades de la base de datos en un archivo de configuración declarativo. Su plantilla Open SaaS incluye autenticación, pagos y una base de datos de manera integrada, y es una de las plantillas SaaS más populares en GitHub con más de 10.000 estrellas. Si estás creando un producto SaaS con Wasp, añadir firmas electrónicas es el siguiente paso natural para cualquier sector legal, de recursos humanos, consultoría o inmobiliario.

Firma.dev se integra directamente con las acciones del servidor de Wasp y los modelos de Prisma. Defines una acción de Wasp, llamas a la API de Firma.dev desde el código del lado del servidor y realizas el seguimiento de todo en tu base de datos existente. Sin infraestructura externa ni nuevos servicios que administrar.

Cómo funciona (versión corta)

La arquitectura de Wasp hace que esto sea limpio. Declaras una acción del servidor en tu archivo de configuración .wasp, la implementas en TypeScript y la llamas desde cualquier componente de React. La acción se ejecuta en el lado del servidor (por lo que tu clave de API nunca llega al navegador), crea una solicitud de firma a través de la API de Firma.dev y almacena el resultado en tu base de datos Prisma. El firmante recibe el documento por correo electrónico o a través de un iframe incrustado en tu aplicación.

Cuando se firma el documento, Firma.dev envía un webhook a una ruta de la API de Wasp que actualiza el estado de la solicitud de firma en tu base de datos. Tu frontend detecta el cambio automáticamente a través de las consultas reactivas de Wasp.

Si ya estás ejecutando Open SaaS, tienes la autenticación, una base de datos y las acciones del servidor listas para usar. La integración de Firma.dev añade unas 100 líneas de código en dos archivos.

Bajo el capó

Para los desarrolladores que desean entender la arquitectura antes de profundizar en la documentación:

La integración consta de cuatro partes. Primero, una entidad de Prisma SigningRequest que realiza el seguimiento de cada solicitud de firma con su ID de Firma.dev, plantilla, correo electrónico del firmante y estado. Segundo, una acción de Wasp sendSigningRequest que lee tu clave de API desde .env.server, llama al endpoint create-and-send de Firma.dev y escribe el resultado en tu base de datos. Wasp gestiona el RPC cliente-servidor automáticamente, por lo que tu componente de React simplemente llama a la acción como una función asíncrona normal.

Tercero, un controlador de webhook declarado como una ruta api de Wasp (con auth: false, ya que los webhooks no contienen tokens de sesión) que escucha eventos como signing_request.completed y actualiza tus registros de Prisma. Cuarto, un componente de firma incrustado opcional: un iframe que apunta a https://app.firma.dev/signing/{id} que permite a los firmantes completar los documentos sin salir de tu aplicación.

Todo funciona con la seguridad tipográfica de Wasp. Defines los tipos de entrada y salida de tu acción, y Wasp infiere automáticamente los tipos en el frontend.

También puedes conectar el servidor MCP de Docs de Firma.dev a Cursor o Claude mientras programas, para que tu asistente de IA pueda consultar toda la documentación de la API mientras genera el código de integración.

Qué obtienes

Una vez conectada, tu aplicación Wasp puede enviar documentos para firmar desde cualquier plantilla de Firma.dev, realizar un seguimiento de las actualizaciones de estado en tiempo real mediante webhooks y Prisma, incrustar la firma directamente en tu interfaz de usuario y activar flujos de trabajo posteriores cuando se completen los documentos.

Cada firma es legalmente vinculante según la ley ESIGN, UETA y eIDAS (SES y AdES). Todos los datos de los documentos se almacenan en la UE en la infraestructura de AWS en París y Estocolmo.

Si estás creando un SaaS multi-inquilino, los Espacios de Trabajo de Clientes de Firma.dev ofrecen a cada uno de tus clientes su propio entorno de firma aislado con plantillas y seguimiento de uso independientes. Esto combina perfectamente con los patrones de multi-inquilinato de Wasp.

Precios adaptados para creadores de SaaS

Open SaaS existe porque pagar entre $300 y $2.000 por código de plantilla parecía poco razonable. La misma lógica se aplica a las firmas electrónicas. La mayoría de los proveedores cobran entre $25 y $50 por usuario al mes, lo que se acumula rápidamente cuando la firma es solo una función más de tu producto.

Firma.dev cobra €0,049 (aproximadamente 5 centavos de USD) por sobre. Sin cuotas mensuales, sin cargos por usuario, sin contratos. Publicas la función y solo pagas cuando se envían los sobres. Para un SaaS en etapa inicial sobre Open SaaS, esto significa que puedes lanzar con firmas electrónicas desde el primer día sin añadir un gasto de $300 al mes a tu presupuesto.

Primeros pasos

La guía completa de integración de Wasp en docs.firma.dev detalla cada paso: definir la entidad de Prisma, crear la acción del servidor, configurar los webhooks e integrar la experiencia de firma. Si ya has creado una acción de Wasp antes, tendrás las solicitudes de firma funcionando en menos de una hora.

Comienza a usar Firma.dev gratis, sin necesidad de tarjeta de crédito.