Realizar constatación de comprobantes de ARCA en v0
Validá comprobantes usando Afip SDK API
Si todavía no viste cómo funciona la constatación mediante la API, te recomiendo leer el artículo introductorio:
Realizar constatación de comprobantes de ARCA via API
Con pocas líneas de código
En este tutorial vamos a pedirle a v0 que genere una app para constatar comprobantes de ARCA usando el web service wscdc y Afip SDK API.
Requisitos previos
Para poder seguir esta guía, primero necesitarás:
- Obtener un access_token de Afip SDK
- Tener acceso a v0 y un proyecto Next.js
- Los datos del comprobante a constatar: CUIT emisor, punto de venta, tipo, número, fecha, importe y CAE/CAI
- Configurar el token como variable privada o secret
Para usar los web services de ARCA se requiere un certificado digital. Con Afip SDK podés integrarte en modo desarrollo usando el CUIT 20409378472 sin obtener un certificado propio.
Cuando quieras usar tu CUIT, podés seguir la guía para usar tu propio certificado para desarrollo.
Crear el proyecto en v0
v0 suele trabajar muy bien con componentes React y proyectos Next.js. Para este caso, pedile que no haga la llamada desde el componente, sino desde un Route Handler privado. Creá un proyecto nuevo o abrí tu proyecto Next.js.
Prompt listo para pegar en v0
Pegá este prompt:
Quiero crear una app para constatar comprobantes de ARCA usando Afip SDK API.
Necesito que generes toda la implementación lista para usar.
Stack:
- Next.js App Router
- React
- TypeScript
- Route Handler privado en `/app/api/.../route.ts`
Objetivo:
- Validar si un comprobante fue autorizado por ARCA.
- Usar el web service `wscdc`.
- Ejecutar el método `ComprobanteConstatar`.
- Mostrar el resultado de la constatación en pantalla.
Reglas importantes:
- No llames a Afip SDK API desde componentes frontend.
- No expongas el access token en el navegador.
- Usar `process.env.AFIP_SDK_ACCESS_TOKEN` solo en el Route Handler.
- Usá ambiente de desarrollo: `dev`.
- Usá CUIT de desarrollo: `20409378472`.
Variables privadas que debo configurar:
- AFIP_SDK_ACCESS_TOKEN: mi access_token de Afip SDK.
- AFIP_TAX_ID: 20409378472.
- AFIP_ENVIRONMENT: dev.
Pantalla:
- Título: "Constatar comprobante de ARCA".
- Formulario con:
- Modo de comprobante, default CAE.
- CUIT emisor, default 20409378472.
- Punto de venta, default 1.
- Tipo de comprobante, default 11.
- Número de comprobante, default 3850.
- Fecha de comprobante, default 20250225.
- Importe total, default 100.
- Código de autorización, default 75082223003046.
- Tipo de documento receptor, default 80.
- Número de documento receptor, default 33693450239.
- Botón "Constatar comprobante".
- Resultado con estado Aprobado/Rechazado, fecha de proceso y detalle devuelto por ARCA.
Backend:
Crear un endpoint privado `/api/comprobantes/constatar`.
El endpoint debe hacer todo este flujo:
1. Obtener autorización:
POST https://app.afipsdk.com/api/v1/afip/auth
Headers:
Authorization: Bearer ${process.env.AFIP_SDK_ACCESS_TOKEN}
Content-Type: application/json
Body:
{
"environment": "dev",
"tax_id": "20409378472",
"wsid": "wscdc"
}
Guardar de la respuesta:
- token
- sign
2. Constatar el comprobante:
POST https://app.afipsdk.com/api/v1/afip/requests
Headers:
Authorization: Bearer ${process.env.AFIP_SDK_ACCESS_TOKEN}
Content-Type: application/json
Body:
{
"environment": "dev",
"method": "ComprobanteConstatar",
"wsid": "wscdc",
"params": {
"Auth": {
"Token": token,
"Sign": sign,
"Cuit": "20409378472"
},
"CmpReq": {
"CbteModo": cbteModo,
"CuitEmisor": cuitEmisor,
"PtoVta": puntoDeVenta,
"CbteTipo": tipoDeComprobante,
"CbteNro": numeroDeComprobante,
"CbteFch": fechaDeComprobante,
"ImpTotal": importeTotal,
"CodAutorizacion": codigoDeAutorizacion,
"DocTipoReceptor": docTipoReceptor,
"DocNroReceptor": docNroReceptor
}
}
}
3. Leer `ComprobanteConstatarResult` y devolver al frontend:
{
"success": true,
"result": Resultado,
"processDate": FchProceso,
"voucher": CmpResp,
"raw": respuestaCompleta
}
Manejo de errores:
- Si falta `AFIP_SDK_ACCESS_TOKEN`, mostrar "Falta configurar el access_token de Afip SDK".
- Si ARCA devuelve `Resultado: R`, mostrar que el comprobante fue rechazado y enseñar el detalle devuelto.
- Si ARCA devuelve un error, mostrar el mensaje recibido.
- Loguear detalles en consola del servidor, pero no mostrar secrets.
Agregá estados de carga, éxito y error. Dejá la app lista para probar con los valores iniciales en ambiente `dev`.
Configurar el token
Cuando exportes el proyecto, configurá AFIP_SDK_ACCESS_TOKEN como variable privada del entorno donde corra Next.js.
No uses variables públicas como NEXT_PUBLIC_AFIP_SDK_ACCESS_TOKEN. Todo lo que empieza con NEXT_PUBLIC_ puede quedar visible en el navegador.
Probar la constatación
Con los valores iniciales, v0 debería enviar la solicitud a wscdc y mostrar el resultado de la constatación.
Al finalizar, la pantalla debe mostrar:
- Resultado de ARCA
- Fecha de proceso
- Datos del comprobante constatado
Problemas comunes
Recordá que en ambiente de desarrollo solo podés constatar comprobantes emitidos en ese mismo entorno. Consultá la documentación del web service WSCDC para ver la lista completa de campos y valores permitidos. Lo único que queda es pasar a modo producción para poder realizar constatación de comprobantes reales.
Ante cualquier duda o pregunta, podés resolverla rápidamente en la Comunidad Afip SDK.
