Resolución N° 5.616/2024. Más información

Crear Factura Electrónica de ARCA en v0

Con prompt listo para pegar


Crear Factura Electrónica de ARCA en v0

Si es tu primera vez conectándote con la facturación electrónica de ARCA, te recomiendo leer esta guía básica sobre su funcionamiento general.

Conectar tu sistema con la facturación electrónica de ARCA

Conectar tu sistema con la facturación electrónica de ARCA

Guía paso a paso

El primer paso para crear una factura electrónica de ARCA es obtener el Código de Autorización Electrónico (CAE).

En este tutorial vamos a pedirle a v0 que genere una app Next.js con una pantalla para cargar los datos de la factura y una API Route para llamar al web service de factura electrónica (wsfe) usando Afip SDK API.

Requisitos previos

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

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 factura electrónica, 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 Next.js para emitir Factura Electrónica de ARCA usando Afip SDK API.

Generá todo lo necesario: pantalla, formulario, API Route, manejo de errores y visualización del resultado.

Stack:
- Next.js App Router
- React
- TypeScript
- Route Handler en `/app/api/facturas/emitir/route.ts`

Objetivo:
- Crear una Factura B de ARCA en ambiente de desarrollo.
- Usar el web service `wsfe`.
- Obtener el CAE.
- Mostrar número de comprobante, CAE y vencimiento del CAE.

Reglas importantes:
- No llamar a Afip SDK API desde el componente React.
- No exponer `AFIP_SDK_ACCESS_TOKEN` al cliente.
- Usar `process.env.AFIP_SDK_ACCESS_TOKEN` solo en la API Route.
- La app debe limitarse a emitir la factura y mostrar el CAE.

Variables de entorno privadas:
- AFIP_SDK_ACCESS_TOKEN
- AFIP_TAX_ID=20409378472
- AFIP_ENVIRONMENT=dev

Crear una pantalla con:
- Título: "Emitir Factura Electrónica de ARCA".
- Explicación corta: "Completá los datos y el sistema solicitará el CAE a ARCA".
- Formulario con:
  - Punto de venta, default 1.
  - Tipo de comprobante, default 6.
  - Concepto, default 1.
  - Tipo de documento, default 99.
  - Número de documento, default 0.
  - Importe neto gravado, default 100.
  - IVA, default 21.
  - Condición IVA receptor, default 5.
- Botón "Emitir factura".
- Estado de carga.
- Resultado con:
  - Número de comprobante.
  - CAE.
  - Vencimiento del CAE.
- Mensaje de error claro.

La API Route `/api/facturas/emitir` debe:

1. Recibir los datos del formulario.
2. Validar que existan `importeNeto` e `importeIVA`.
3. 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": "wsfe"
}

4. Obtener el último comprobante autorizado:
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": "FECompUltimoAutorizado",
  "wsid": "wsfe",
  "params": {
    "Auth": {
      "Token": token,
      "Sign": sign,
      "Cuit": "20409378472"
    },
    "PtoVta": puntoDeVenta,
    "CbteTipo": tipoDeComprobante
  }
}

5. Calcular `nextVoucherNumber = CbteNro + 1`.

6. Crear la factura con `FECAESolicitar`:
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": "FECAESolicitar",
  "wsid": "wsfe",
  "params": {
    "Auth": {
      "Token": token,
      "Sign": sign,
      "Cuit": "20409378472"
    },
    "FeCAEReq": {
      "FeCabReq": {
        "CantReg": 1,
        "PtoVta": puntoDeVenta,
        "CbteTipo": tipoDeComprobante
      },
      "FeDetReq": {
        "FECAEDetRequest": {
          "Concepto": concepto,
          "DocTipo": docTipo,
          "DocNro": docNro,
          "CbteDesde": nextVoucherNumber,
          "CbteHasta": nextVoucherNumber,
          "CbteFch": fechaActualYYYYMMDD,
          "ImpTotal": importeNeto + importeIVA,
          "ImpTotConc": 0,
          "ImpNeto": importeNeto,
          "ImpOpEx": 0,
          "ImpIVA": importeIVA,
          "ImpTrib": 0,
          "MonId": "PES",
          "MonCotiz": 1,
          "CondicionIVAReceptorId": condicionIVAReceptorId,
          "Iva": {
            "AlicIva": [
              {
                "Id": 5,
                "BaseImp": importeNeto,
                "Importe": importeIVA
              }
            ]
          }
        }
      }
    }
  }
}

7. Extraer el detalle de la respuesta:
- `FECAESolicitarResult.FeDetResp.FECAEDetResponse[0].CAE`
- `FECAESolicitarResult.FeDetResp.FECAEDetResponse[0].CAEFchVto`
- `FECAESolicitarResult.FeDetResp.FECAEDetResponse[0].CbteDesde`

8. Devolver JSON al componente:
{
  "success": true,
  "voucherNumber": "...",
  "cae": "...",
  "caeExpiration": "..."
}

Manejo de errores:
- Si falta el access token, mostrar "Falta configurar AFIP_SDK_ACCESS_TOKEN".
- Si ARCA devuelve error, mostrar el mensaje de ARCA.
- Si aparece error 10016, mostrar "El número de comprobante no es el próximo a autorizar. Reintentá la emisión".
- Si aparece error 10242, mostrar "Falta completar la condición IVA receptor".

Dejá valores iniciales cargados para probar rápido en ambiente `dev`.

Configurar variables de entorno

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 emisión

Con los valores iniciales, la pantalla debería emitir una Factura B de prueba por $121 en ambiente dev.

Al finalizar, deberías ver:

  • Número de comprobante
  • CAE
  • Vencimiento del CAE

Ejemplos de otros tipos de comprobantes

Problemas comunes

Si estás teniendo el error (10016) El número o fecha del comprobante no se corresponde con el próximo a autorizar, te recomiendo leer este artículo.

Error (10016) El numero o fecha del comprobante no se corresponde con el proximo a autorizar

Error (10016) El numero o fecha del comprobante no se corresponde con el proximo a autorizar

Pasos para resolver este error

Si estás teniendo el error (10242) El campo Condición IVA receptor es obligatorio. Consultar método FEParamGetCondicionIvaReceptor, te recomiendo leer este artículo.

Error (10242) El campo Condicion IVA receptor no es un valor valido/es obligatorio

Error (10242) El campo Condicion IVA receptor no es un valor valido/es obligatorio

Pasos para resolver este error

Luego, lo único que queda es pasar a modo producción. Podés seguir la guía para pasar a producción con Afip SDK.


Ante cualquier duda o pregunta, podés resolverla rápidamente en la Comunidad Afip SDK.

Conéctate a ARCA hoy mismo

Evitá la complejidad de ARCA. Con Afip SDK integrás tu sistema en minutos y te enfocás en hacer crecer tu negocio.