Lovable

Aprendé cómo usar Afip SDK con Lovable para integrar web services de ARCA.

Requisitos previos

Para poder seguir esta guía, primero necesitarás:

• Obtener un access_token de Afip SDK

• Tener un proyecto en Lovable

• Definir el CUIT que vas a usar

• Elegir el Web Service ID, por ejemplo wsfe para factura electrónica

1. Configuración

Lovable puede generar la pantalla y el backend desde un prompt, pero el access token de Afip SDK tiene que quedar guardado como secret del proyecto.

Agregá estas variables en la configuración de Lovable:

Secrets

AFIPSDK_ACCESS_TOKEN=TU_ACCESS_TOKEN
AFIPSDK_TAX_ID=20409378472
AFIPSDK_WSID=wsfe

No uses el access token en componentes frontend, variables públicas, HTML o código visible desde el navegador.

2. Crear la integración en Lovable

Pedile a Lovable que cree una pantalla y una función backend para llamar a Afip SDK. La pantalla solo debe enviar los datos de la consulta a tu backend; el backend es el único lugar donde se lee AFIPSDK_ACCESS_TOKEN.

Prompt

Integrá un web service de ARCA usando Afip SDK en esta app de Lovable.

Quiero una pantalla llamada "ARCA Web Service" con:
- Un formulario para ingresar CUIT sin guiones.
- Un selector de ambiente: dev o prod.
- Un campo para Web Service ID, por ejemplo wsfe.
- Un textarea para cargar el payload JSON del método del web service.
- Un botón para ejecutar la consulta.
- Estados visibles de loading, success y error.
- Un panel para mostrar el resultado JSON.

Backend:
- Creá una función backend o endpoint propio para toda la lógica de Afip SDK.
- Leé el token desde un secret llamado AFIPSDK_ACCESS_TOKEN.
- Si falta AFIPSDK_ACCESS_TOKEN, devolvé un error claro de configuración.
- Primero obtené el Ticket de Acceso llamando a POST https://app.afipsdk.com/api/v1/afip/auth.
- Enviá Authorization: Bearer TU_ACCESS_TOKEN.
- Enviá body JSON con environment, tax_id y wsid.
- Usá token y sign devueltos por Afip SDK para llamar al método del web service elegido.
- Devolvé al frontend solo el resultado final y errores claros.

Reglas:
- No hardcodees tokens, certificados ni keys.
- No uses secrets en componentes frontend.
- No inventes endpoints, campos ni estructuras de respuesta.
- Usá solo esta documentación:
  - https://docs.afipsdk.com/integracion/api
  - https://docs.afipsdk.com/siguientes-pasos/web-services/
  - https://docs.afipsdk.com/siguientes-pasos/web-services/otro-web-service
  - https://afipsdk.com/docs/api-reference/introduction/

Si falta información del método del web service, dejá un TODO claro indicando qué dato hay que completar según la documentación.

3. Llamar al método del Web Service que necesites

Con el backend creado ya podés realizar llamadas a los Web Services que necesites.

Web services

Si el Web Service que necesitás no se encuentra en la lista de la documentación, podés llamarlo siguiendo esta guía:

Otro web service

Podés usar la referencia de la API para obtener ejemplos de cómo usar los métodos de todos los web services de ARCA.

Referencia de APIafipsdk.com

También podés usar las guías del blog de Afip SDK para Lovable:

Lovable | Blogafipsdk.com

---

Usar tu propio certificado ^_(Opcional)

Primero, obtenemos el certificado siguiendo esta guía.

Obtener el certificado para conectar tu sistema con los web services de ARCAafipsdk.com

Y luego pedile a Lovable que agregue cert y key solo en la función backend.

Prompt adicional

Actualizá la función backend de Afip SDK para permitir usar certificado propio.

Reglas:
- El certificado y la key deben leerse desde secrets privados.
- Usá los nombres AFIPSDK_CERT y AFIPSDK_KEY.
- Nunca envíes cert, key ni AFIPSDK_ACCESS_TOKEN al frontend.
- Al llamar a POST /api/v1/afip/auth, agregá cert y key en el body junto con environment, tax_id y wsid.