Puis-je tester l'API Call avant de l'utiliser dans mon app ?

Oui. Servez-vous de la fonction de test intégrée de FlutterFlow : une fois l'API Call configuré, cliquez sur « Test API Call » pour voir la réponse. Vous pouvez aussi tester directement dans l'onglet Preview de votre tableau de bord TemplateFox, avec des données JSON d'exemple.

Comment transmettre les données client de Firestore à la facture ?

Dans FlutterFlow, au moment de configurer le corps de l'API Call, cliquez sur l'icône de variable à côté de chaque champ. Vous y sélectionnez directement les champs d'un document Firestore. Par exemple, reliez customerDoc.name à client_name et customerDoc.address à client_address .

Puis-je ajouter plusieurs lignes à la facture ?

Oui. Le champ items accepte une liste. Dans FlutterFlow, transmettez une liste d'articles issue de l'état de votre app ou de Firestore. Le template génère automatiquement une ligne par article et peut calculer les totaux.

Que faire de l'URL du PDF après la génération ?

L'API renvoie une URL de PDF, utilisable de plusieurs façons : l'afficher dans un widget WebView, lancer un téléchargement avec l'action « Launch URL », la partager via la feuille de partage native ou l'enregistrer dans Firestore. Elle expire au bout de 24 h par défaut (7 jours au plus) : pour un historique durable, stockez les PDF dans votre bucket S3.

Est-ce que ça fonctionne hors ligne ?

La génération de PDF demande une connexion internet, puisqu'elle passe par l'API TemplateFox. Pour un usage hors ligne, générez les factures quand l'utilisateur est en ligne et enregistrez les PDF sur l'appareil : une URL mise en cache ne s'ouvre pas sans réseau, et elle finit par expirer.

Comment protéger ma clé API dans une app FlutterFlow ?

N'embarquez pas la clé API dans l'app. Faites passer la requête par une Cloud Function (prise en charge nativement par FlutterFlow) ou une fonction Firebase appelable, qui garde la clé côté serveur et transmet l'appel à TemplateFox. L'app mobile appelle votre fonction, jamais directement l'API TemplateFox.

Générer des factures PDF dans FlutterFlow

Vincent Ventalon

20 mars 2026 · Mis à jour le 21 octobre 2026

Présentation

Vous construisez une app de facturation mobile ? Vos utilisateurs veulent créer des factures professionnelles et les envoyer sur-le-champ. Ce tutoriel montre comment ajouter la génération de factures PDF à votre app FlutterFlow avec TemplateFox.

Nous utiliserons un template de facture professionnel, relié à votre app grâce à la fonction API Call de FlutterFlow. La même méthode fonctionne pour les reçus, les devis ou tout autre document.

Ce que vous allez construire : un bouton « Générer la facture » qui crée une facture PDF avec les coordonnées du client, les lignes et les totaux, puis permet de la télécharger ou de la partager.

Choisissez un template de facture

Commencez par choisir un template de facture. Nous utiliserons le template Modern Invoice with QR Code : pensé pour le paiement mobile, il inclut un QR code pour régler la facture immédiatement.

Ouvrez la page Templates de facture
Choisissez un template adapté à votre cas d'usage
Cliquez sur Use Template pour l'ajouter à votre tableau de bord

Autres options : Freelancer Invoice pour les consultants, EU Corporate Invoice pour les entreprises européennes, US Invoice with ACH pour les virements bancaires.

Vous pouvez aussi créer votre propre template dans notre éditeur en glisser-déposer. Ajoutez votre logo, ajustez les couleurs et prévoyez tous les champs dont vous avez besoin.

Récupérez votre clé API et l'ID du template

Il vous faut deux éléments de votre tableau de bord TemplateFox :

Clé API

Dans Dashboard → API

Commence par sk_

ID du template

Dans Dashboard → Templates

Identifiant de 12 caractères, comme a1B2c3D4e5F6

Sécurité : en production, n'inscrivez pas votre clé API en dur dans l'app. Stockez-la dans les variables d'environnement de FlutterFlow, ou récupérez-la depuis votre backend (Firebase Functions, Supabase Edge Functions).

Créez l'API Call dans FlutterFlow

Configurez maintenant l'API Call qui générera vos factures.

3.1 — Créer un API Call

Dans FlutterFlow, ouvrez API Calls dans la barre latérale gauche
Cliquez sur + Add API Call
Nommez-le generateInvoice

3.2 — Configurer la requête

Méthode : POST

URL : https://api.templatefox.com/v1/pdf/create

En-têtes :

Content-Type: application/json

X-API-Key: your-api-key

3.3 — Préparer le corps de la requête

Le corps contient l'ID de votre template et les données de la facture. Voici sa structure :

{

"template_id": "your-invoice-template-id",

"data": {

// Infos de votre entreprise (en dur)

"company_name": "Your Business Name",

"company_address": "123 Main St, City",

"company_email": "billing@yourbusiness.com",

// Infos client (depuis votre app)

"client_name": "John Doe",

"client_email": "john@example.com",

"client_address": "456 Oak Ave, Town",

// Détails de la facture

"invoice_number": "INV-2026-001",

"invoice_date": "March 20, 2026",

"due_date": "April 20, 2026",

// Lignes de facture (liste)

"items": [

{

"description": "Web Development",

"quantity": 10,

"unit_price": 150,

"amount": 1500

{

"description": "UI Design",

"quantity": 5,

"unit_price": 200,

"amount": 1000

}

// Totaux

"subtotal": 2500,

"tax": 500,

"total": 3000

}

3.4 — Relier les variables FlutterFlow

Dans l'onglet Body, cliquez sur l'icône +Variable à côté des champs dynamiques. Reliez-les aux données de votre app :

En dur (statique)

• template_id
• company_name
• company_address
• company_email

Depuis l'app (dynamique)

• client_name → document client
• items → liste des lignes
• total → montant calculé
• invoice_number → ID généré

Astuce : servez-vous des Custom Functions de FlutterFlow pour formater les dates, calculer les totaux ou générer les numéros de facture avant de les envoyer à l'API.

Déclenchez l'appel et traitez la réponse

Ajouter un bouton « Générer la facture »

Ajoutez un widget Button à votre page de facture
Donnez-lui le texte « Générer la facture » ou « Télécharger le PDF »
Ajoutez une Action → API Call
Sélectionnez votre API Call generateInvoice

Traiter la réponse

L'API renvoie l'URL du PDF :

{

"url": "https://cdn.templatefox.com/generated/abc123.pdf",

"filename": "invoice-001.pdf",

"credits_remaining": 99,

"expires_in": 86400

}

Ajoutez des actions pour que vos utilisateurs consultent ou partagent la facture :

Télécharger / ouvrir dans le navigateur

Ajoutez l'action Launch URL avec le champ url de la réponse. Le PDF s'ouvre, prêt à être consulté ou téléchargé.

Partager via la feuille de partage native

Ajoutez l'action Share. Vos utilisateurs envoient la facture par WhatsApp, par e-mail ou depuis toute autre app.

Enregistrer dans Firestore

Ajoutez un Backend Call pour enregistrer l'URL du PDF dans votre collection de factures. L'URL signée expire (24 h par défaut, 7 jours au plus) : pour un historique durable, stockez plutôt les PDF dans votre propre bucket S3.

C'est tout ! Votre app FlutterFlow génère maintenant des factures PDF professionnelles. Vos utilisateurs touchent un bouton, la facture se génère, et ils la téléchargent ou la partagent aussitôt.

Pour aller plus loin

Parcourir les templates de facture

Professionnel, freelance, entreprise et bien d'autres styles.

Référence de l'API

Toutes les options de l'API : format de sortie, webhooks, envoi vers S3, et plus encore.

Intégration S3

Enregistrez vos factures directement dans votre propre bucket S3, pour les conserver durablement.

Générer des factures dans FlutterFlow