Inicio › Blog › Personaliza la plantilla de factura de Zite con ShipPDF
Personaliza la plantilla de factura de Zite con ShipPDF
Aprende a personalizar una plantilla de factura PDF de Zite con ShipPDF, dar formato a fechas y monedas, calcular totales y guardar el PDF en tu base de datos.
Puedes personalizar una plantilla de factura PDF de Zite pidiendo a su IA que cambie el diseño. Si también quieres ajustar la distribución manualmente, puedes crear la plantilla en ShipPDF y hacer que Zite le envíe los datos de la factura. ShipPDF genera el PDF y Zite guarda el documento en el registro de la factura.
Zite ya admite la generación de PDF, incluida entre sus funciones de flujos de trabajo. Puedes generar una factura y personalizar su plantilla. Añadir ShipPDF te da más control sobre el documento: usa IA para crear o cambiar la plantilla, haz ajustes precisos en el editor visual y mantén el formato y los cálculos dentro de la plantilla.
En este tutorial crearemos una app de facturas en Zite, la conectaremos a ShipPDF y diseñaremos una plantilla de factura PDF personalizada. Después publicaremos la app y enviaremos una factura para comprobar que el documento llega a su campo PDF.
En esta guía
- Por qué usar ShipPDF para personalizar una plantilla de factura de Zite
- Crear la app de facturas en Zite
- Pedir a Zite que se conecte a ShipPDF
- Guardar el archivo PDF
- Crear la plantilla en ShipPDF
- Publicar y probar el flujo
- Resolver problemas
Por qué usar ShipPDF para personalizar una plantilla de factura de Zite
La edición de plantillas de Zite es un buen punto de partida. Puedes describir un cambio a su IA, pero los pequeños ajustes manuales son menos cómodos. A veces es más fácil seleccionar un elemento y cambiar su espaciado, alineación o tamaño que escribir otra instrucción.
ShipPDF te permite trabajar de ambas formas. Pide a un asistente de IA que cree o revise la plantilla y después ábrela en el editor visual para ajustar la distribución. Por ejemplo, puedes pedirle que añada tu identidad de marca y luego ampliar manualmente la columna de descripción o ajustar el espacio sobre el total.
También resuelve dos tareas habituales dentro de la plantilla:
- Formato de fechas y monedas. Envía una fecha o un número como dato y elige su configuración regional y formato en ShipPDF. Puedes usar un patrón de fecha personalizado y definir el código de moneda y los decimales para los importes.
- Fórmulas. Calcula los importes de cada línea, el subtotal, los impuestos y el total a partir de los datos de la factura. No necesitas columnas separadas en Zite para cada cálculo que quieras mostrar en el PDF.
Zite sigue siendo el lugar donde ingresas y administras las facturas. ShipPDF controla cómo aparecen en los documentos.
Cómo funciona la integración de Zite y ShipPDF
ZiteEl último paso es importante. ShipPDF devuelve una URL de descarga firmada que caduca. La URL permite recuperar el archivo, pero guardar solo ese enlace no te da un archivo adjunto permanente.
1. Crea la tabla y el formulario de facturas en Zite
Empieza pidiendo a Zite que cree una app de facturas. Puedes usar esta instrucción:
Crea una app de facturas con una lista y un formulario para crear
y editar facturas.
Cada factura necesita un ID, fecha de emisión, destinatario,
dirección del destinatario y tasa de impuesto como porcentaje.
Cada factura tiene líneas con descripción, precio unitario y cantidad.
Permite añadir y eliminar líneas. Muestra el subtotal, el impuesto
y el total después de impuestos mientras completo el formulario.
Guarda las facturas y sus líneas relacionadas en la base de datos.En este ejemplo, Zite creó las tablas Invoices y Line Items, además de un formulario con los datos de la factura y una lista editable de líneas.
El formulario puede mostrar los totales mientras ingresas una factura. Las fórmulas de ShipPDF calcularán los valores del documento con los mismos datos. Usa las mismas reglas de impuestos y redondeo en ambos lugares.
2. Pide a Zite que llame a la API de ShipPDF
Ahora pide a Zite que genere un PDF al guardar una factura nueva. Incluye un enlace a la referencia de la API de ShipPDF en tu instrucción. Así Zite tendrá los esquemas de solicitudes y respuestas, la autenticación y el comportamiento de los webhooks que debe seguir.
Pega esto en Zite:
Conecta esta app de facturas a ShipPDF para generar PDF.
Usa la referencia de la API de ShipPDF:
https://shippdf.com/docs/api/
Cuando se guarde una factura nueva, llama a
POST https://api.shippdf.com/v1/documents desde un flujo de backend
con el ID de mi plantilla publicada y los datos del formulario.
Guarda el token de API como secreto y usa autenticación Bearer.
Envía el ID, la fecha de emisión, el destinatario, su dirección
y las líneas. Cada línea debe incluir description, unit_price,
quantity y tax_rate. Copia el porcentaje de impuesto de la factura
en el tax_rate de cada línea para calcular los impuestos por fila.
Te daré el ID de la plantilla y el esquema de datos final después
de configurar ShipPDF.
Crea un endpoint HTTPS para el webhook y dame su URL para registrarlo
en la configuración de Webhooks de ShipPDF para esta plantilla.
Usa ese webhook guardado para las notificaciones de generación.
Incluye el ID del registro de la factura de Zite en metadata
para relacionar la notificación con la factura correcta.
Guarda el ID del documento de ShipPDF en la factura. Muestra estados
Generando, Listo o Fallido y un mensaje cuando la generación falle.
Añade una acción para generar, volver a generar o reintentar el PDF.
Antes de aceptar una respuesta, autentícala con la verificación
documentada del webhook o verifica el ID del documento guardado
y su resultado con el endpoint GET autenticado de ShipPDF.La generación es asíncrona. La respuesta inicial devuelve un ID de documento mientras el PDF está en cola. El webhook entrega el resultado cuando la generación termina o falla. Zite no debe esperar un PDF en la respuesta inicial.
Una prueba exitosa del webhook confirma que el endpoint puede recibir un evento. Aún necesitas enviar una factura real para comprobar la generación y el almacenamiento del archivo juntos.
3. Pide a Zite que descargue y guarde el archivo PDF
Aclara cómo debe guardarse el archivo con esta instrucción adicional:
Usa la referencia de la API de ShipPDF:
https://shippdf.com/docs/api/
El pdf_url de ShipPDF es una URL firmada que caduca.
Descarga el PDF de esa URL y sube el archivo al campo de archivo PDF
de la factura. No guardes solo la URL de descarga de ShipPDF.
Guarda el archivo automáticamente después de verificar la respuesta
del webhook, sin que nadie tenga que abrir la factura, si el flujo
de backend permite descargar y subir archivos.
Conserva el ID del documento de ShipPDF. Si la URL ha caducado,
consulta el mismo documento con GET /v1/documents/{document_ref}
para obtener una URL nueva. No generes otro PDF solo para renovar la URL.
Muestra los errores al guardar y permite reintentar la descarga y subida.
Muestra la factura como Lista solo cuando se haya guardado su archivo PDF.En la versión de la captura, Zite cambió la app para descargar y subir el archivo cuando alguien abre la factura. Si la generación terminó pero el campo PDF está vacío, abrir la factura inicia el guardado.
Si tu versión funciona así, incluye abrir la factura en la prueba. Para guardar archivos sin intervención, pide a Zite que haga la descarga y subida en el flujo de backend al completar la generación. Comprueba que el campo PDF se llena incluso cuando nadie visita la página de la factura.
4. Crea tu plantilla de factura personalizada en ShipPDF
Ahora configura el documento que ShipPDF generará. Crea tu cuenta de ShipPDF, crea un proyecto y una plantilla de factura.
Puedes crearla en el editor o conectar ShipPDF a tu asistente de IA mediante MCP y pedirle que diseñe la distribución. MCP le da herramientas para crear y editar plantillas directamente en tu espacio de trabajo de ShipPDF.
Empieza con una imagen de factura de referencia
Si tienes un diseño que te gusta, añade una imagen de esa factura a la conversación. Pide al asistente que la use como referencia visual y cree la plantilla en ShipPDF. Puede crear la distribución y los campos de datos, crear recursos visuales como formas decorativas, subirlos a ShipPDF y armar la plantilla mediante MCP.
No necesitas describir cada detalle de espaciado y diseño. La imagen le da un punto de partida y después puedes hacer ajustes manuales. En nuestro ejemplo, pedimos rediseñar la factura con un título grande, datos de remitente y destinatario uno al lado del otro, un encabezado gris en la tabla y formas de ondas al pie.
Con ShipPDF conectado y la imagen adjunta, usa una instrucción como esta:
Usa la imagen de factura adjunta como referencia y crea la plantilla
editable completa en ShipPDF mediante MCP.
Crea los recursos visuales necesarios y súbelos a ShipPDF.
Incluye un encabezado de empresa, ID, fecha de emisión, nombre
y dirección del destinatario y tabla de líneas. Usa valores dinámicos
y conserva una distribución editable para ajustarla manualmente después.
Usa invoice.items como colección de la tabla. Incluye descripción,
cantidad, precio unitario y una columna de importe calculado.
Añade fórmulas de resumen para subtotal, impuestos y total con impuestos.
Usa formato de moneda para los importes y una fecha fácil de leer.
Deja una columna ancha para la descripción y alinea los números a la derecha.
Muéstrame el borrador y su esquema de datos antes de publicar.Abre el resultado en el editor de ShipPDF y ajusta lo que sea más fácil cambiar a mano, como el ancho de las columnas, la alineación o el espacio entre secciones. La plantilla creada con IA usa el mismo editor y la misma API que una plantilla creada manualmente.
Define los datos de la factura
Configura el esquema de datos de la plantilla para que coincida con lo que envía Zite. Usa campos String para el ID, el destinatario, su dirección y la descripción, un campo Date para la fecha y campos Number para la cantidad, el precio y la tasa de impuesto. Define invoice como Object e invoice.items como Collection.
Añade este ejemplo a los datos predeterminados para previsualizar la plantilla:
{
"invoice": {
"id": "INV-1042",
"issuance_date": "2026-10-13",
"recipient": "Northstar Studio",
"recipient_address": "12 Market Street\nKuching, Sarawak",
"items": [
{
"description": "Website design",
"unit_price": 500,
"quantity": 2,
"tax_rate": 6
},
{
"description": "Monthly maintenance",
"unit_price": 150,
"quantity": 1,
"tax_rate": 6
}
]
}
}Aquí, tax_rate: 6 significa 6%. Zite copia la tasa de la factura a cada línea para las fórmulas siguientes. Envía fechas y números como datos sin formato y deja que la plantilla les dé formato. Consulta Esquema de datos y datos predeterminados.
Vincula los campos y da formato a fechas y monedas
Vincula el ID, la fecha, el destinatario y la dirección a elementos de texto. Elige invoice.items como fuente de la tabla y vincula sus columnas a los campos de cada línea.
Selecciona la etiqueta del campo de fecha, elige Date como formato y define la configuración regional. Para un formato personalizado, selecciona Custom pattern en Date pattern y escribe el patrón. En la captura, en-US con dd MMMM, yyyy muestra la fecha de ejemplo como 20 September, 2026. El mismo patrón muestra nuestra fecha, 2026-10-13, como 13 October, 2026.
Para precios e importes calculados, elige formato de moneda con una configuración regional, código de moneda y decimales. Por ejemplo, en-US, USD y dos decimales muestra 1150 como $1,150.00. Usa la moneda que necesites. El formato cambia la presentación, pero no convierte el importe a otra moneda.
La configuración se aplica a cada campo vinculado. Las cantidades pueden seguir como números mientras los precios se muestran como moneda. Consulta Vinculación de campos de datos y formato.
Calcula los importes con fórmulas
Configura la columna de importe de la tabla con esta fórmula:
{{invoice.items.quantity}} * {{invoice.items.unit_price}}Después añade fórmulas de resumen para Subtotal, Impuestos y Total:
Subtotal
SUM({{invoice.items.quantity}} * {{invoice.items.unit_price}})
Impuestos
SUM({{invoice.items.quantity}} * {{invoice.items.unit_price}} * {{invoice.items.tax_rate}} / 100)
Total
SUM({{invoice.items.quantity}} * {{invoice.items.unit_price}} * (1 + {{invoice.items.tax_rate}} / 100))Usa estas fórmulas en los controles de fórmula de la tabla. Las funciones de agregación como SUM() se usan en los resúmenes de tabla. Aplica formato de moneda a sus resultados.
Con los datos del ejemplo, el subtotal es $1,150.00, el impuesto es $69.00 y el total es $1,219.00. La solicitud no necesita valores amount, subtotal ni total. ShipPDF los calcula a partir de los datos. Este ejemplo usa una tasa de impuesto sin descuentos ni gastos de envío.
Las capturas usan nombres de campo como invoice.issuedOn y unitPrice, mientras que el JSON anterior usa issuance_date y unit_price. Configura Zite con los nombres exactos del esquema de tu plantilla. Pide al asistente que te dé ese esquema junto con el ID de la plantilla para asignar correctamente los campos del formulario.
Previsualiza, publica y termina la configuración de Zite
Usa Preview PDF para revisar la distribución, el formato y los cálculos. Prueba también una dirección larga y suficientes líneas para ocupar varias páginas. Cuando la plantilla esté lista, publícala y copia su ID.
Crea una clave de API para Zite
En tu espacio de trabajo de ShipPDF, abre API keys y elige Create API key. Ponle el nombre Zite y selecciona Create documents (documents:create) y Read documents (documents:read). Permiten generar la factura y consultar su estado y URL de descarga.
Elige un acceso a recursos que incluya la plantilla y una fecha de vencimiento adecuada para la integración. La captura muestra Entire workspace y 90 days. Puedes elegir Restricted para limitar la clave a los recursos que Zite necesita. Consulta la guía de autenticación para más detalles.
Registra el webhook de Zite en ShipPDF
Abre Webhooks en tu espacio de trabajo y crea un webhook con la URL del endpoint que te dio Zite. Configúralo como se muestra:
- Webhook name: un nombre reconocible, como Zite Demo.
- Payload URL: el endpoint HTTPS de Zite.
- Enabled: activado.
- Scope: Template y tu plantilla de factura. En este ejemplo es Demo / Invoice.
- Events: Completed and failed PDFs, para recibir ambos resultados.
- Signing secret: Inherit workspace secret, como en la captura. Configura Zite para verificar la firma con ese secreto o consultar el documento guardado mediante la API autenticada, como indica la instrucción anterior.
Guarda el webhook. ShipPDF enviará los eventos de generación correspondientes al endpoint cada vez que se use la plantilla. Es la configuración más sencilla para este tutorial: guardas el destino una vez en ShipPDF y las solicitudes de Zite solo necesitan la plantilla, los datos y los metadatos del registro.
ShipPDF también admite una respuesta por solicitud mediante webhook_url. En ese caso, Zite debe incluir la URL en cada solicitud de generación. Aquí usamos el webhook guardado de la plantilla. Omite ese campo para evitar enviar el mismo evento dos veces al endpoint.
Vuelve a Zite y añade el ID de la plantilla publicada, su esquema de datos exacto y el token mediante la configuración de secretos. Pide a Zite que termine la asignación de campos usando la referencia de la API. Confirma que registraste el webhook en ShipPDF. La solicitud debe contener template_id, data y metadata.
5. Publica Zite y prueba una factura completa
Publica la app de Zite y abre su URL publicada. Completa los datos de la factura y añade sus líneas. Para esta prueba ingresamos la factura INV-186303, con fecha 14 de octubre de 2026, para Acme Studio. Sus tres líneas suman un subtotal de 3,940.00.
Haz clic en Save invoice. Zite guarda el registro y abre la página de la factura. Mientras se genera el PDF, la acción de descarga muestra Generating PDF…. En esta versión, Zite muestra el subtotal y la plantilla PDF calcula los impuestos y el total final.
En ShipPDF, abre Requests y selecciona la solicitud de API de la factura. La solicitud siguiente muestra Succeeded y la factura generada aparece en Preview. El panel Webhook muestra Success y HTTP 200, lo que confirma que el endpoint de Zite recibió y confirmó la notificación. Puedes revisar las pestañas Request, Response y Logs al resolver problemas.
Comprueba el resto del flujo:
- Zite guarda la factura y sus líneas.
- La generación aparece en Requests de ShipPDF con el estado Succeeded.
- Zite recibe el webhook y lo relaciona con la factura correcta.
- El PDF se descarga y sube al campo PDF. Si usas la versión de nuestra captura, abre la factura para iniciar este paso.
- El campo PDF contiene un documento y el botón PDF permite descargarlo. Revisa el destinatario, la fecha, los importes, el subtotal, los impuestos y el total con los datos del formulario.
Cuando el documento está listo, Generating PDF… se convierte en un botón verde PDF. Haz clic en PDF para descargar la factura generada. La página también incluye la acción Regenerate PDF.
En la tabla Invoices de Zite, el mismo registro ya tiene un archivo en el campo PDF y el estado Ready. Esto confirma que Zite guardó el documento como archivo adjunto.
El PDF descargado usa la plantilla que diseñamos con IA y ajustamos en ShipPDF. Muestra la fecha y los importes con formato, además del subtotal, los impuestos y el total calculados. En esta factura, el subtotal es $3,940.00, el impuesto de 8% es $315.20 y el total es $4,255.20. La plantilla calcula los impuestos y el total aunque esas columnas estén vacías en la captura de la base de datos de Zite.
Si configuraste el guardado automático, repite la prueba sin abrir la factura. Confirma que el flujo de backend llena el campo PDF por sí solo.
Solución de problemas con el PDF de factura en Zite
ShipPDF generó el PDF, pero el campo PDF de Zite está vacío
Revisa la descarga y subida. Una generación completada no garantiza que Zite haya guardado el archivo. En la versión de la captura, el guardado empieza al abrir la factura. Comprueba también si la URL caducó o falló la subida y pide a Zite que muestre los errores al guardar.
El enlace de descarga caducó
Consulta el documento existente con su ID guardado de ShipPDF para obtener una URL nueva. Luego reintenta la descarga y subida. No necesitas volver a generar la factura solo para renovar la URL.
Las fechas o monedas se muestran mal
Revisa los tipos de campo y sus formatos en ShipPDF. Envía 500 como número en lugar de "$500.00" y una fecha como "2026-10-13". Elige la configuración regional, moneda, decimales y patrón de fecha en la plantilla.
Los totales no coinciden con el formulario de Zite
Comprueba que ambos lados usen las mismas cantidades, precios, convención de impuestos y reglas de redondeo. Estas fórmulas esperan 6 para una tasa de 6% y la dividen entre 100. Confirma que Zite incluya la tasa en cada línea.
Preguntas frecuentes sobre plantillas de factura de Zite
¿Puedo personalizar una plantilla PDF de Zite sin ShipPDF?
Sí. Zite admite la generación de PDF y puedes pedir a su IA que personalice la plantilla. ShipPDF es útil cuando quieres un editor visual dedicado además de la edición con IA, con ajustes de formato y fórmulas reutilizables.
¿Esto cambia mi formulario de factura en Zite?
El formulario sigue en Zite. Personalizas el diseño del PDF en ShipPDF y configuras Zite para enviar los datos a esa plantilla.
¿Necesito columnas de base de datos para subtotal y total?
No necesitas enviar subtotal y total calculados solo para mostrarlos en el documento de ShipPDF. Conserva columnas calculadas en Zite si también las necesitas para vistas de la app, informes u otros flujos.
¿Debo darle a Zite la referencia de la API de ShipPDF?
Sí. Incluye https://shippdf.com/docs/api/ en la instrucción para que Zite siga los endpoints, la autenticación, los campos y el comportamiento de los webhooks documentados.
¿Debo guardar la URL del PDF de ShipPDF en Zite?
Guarda el archivo descargado en el campo de archivo de la factura. Conserva el ID del documento para consultas y reintentos. La URL firmada caduca y sirve para recuperar el archivo, no como archivo adjunto permanente.
Personaliza tu próxima factura de Zite
Empieza con el formulario en Zite y crea el documento en ShipPDF. Usa IA para la plantilla inicial, ajusta la distribución en el editor y configura fechas, monedas y fórmulas para tus próximas facturas.
Crea tu cuenta de ShipPDF y usa la referencia de la API al pedir a Zite que conecte tu app.
← Volver al blog