Comment synchroniser Webflow avec un logiciel de comptabilité comme Debitoor ?

Webflow et les factures

Pour beaucoup d'entreprises, les ventes réalisées en ligne ne sont qu'une partie de leur activité. Typiquement, si vous réalisez également des prestations sur-mesure, de la vente, en direct...

Il n'est donc pas rare que les flux financiers viennent de différentes sources, et on peut avoir envie de regrouper l'ensemble de ses factures dans un même logiciel. C'est là que cela devient un peu compliqué lorsque l'on est indépendant et que l'on vend en ligne. 

D'une part, il n'existe pas tant de logiciels de comptabilité qui respectent les normes en vigueur et qui peuvent se connecter à tout type de plateformes (par exemple avec une API). Et cela, à un tarif raisonnable. 

D'autre part, le raisonnement est encore plus vrai lorsque l'on parle de Webflow. Ce dernier ne propose pas d'intégration native avec un outil comptable français, afin de générer facilement des factures pro-forma avec tout ce qu'il faut (mentions obligatoires, TVA, etc.). C'est donc rapidement un casse-tête et une perte de temps pour beaucoup d'entrepreneurs, qui doivent reprendre à la main leur comptabilité pour faire plaisir à leur comptable ! 

Debitoor, un logiciel de facturation efficace, abordable et qui dispose d'une API

Après plusieurs recherches et comparatifs, Debitoor apparaît comme le meilleur compromis entre :

• Efficacité
• Conformité
• Simplicité
• Coût abordable

En effet, ce dernier permet de créer des factures au bon format avec toutes les fonctionnalités qu'on attend d'un outil de facturation. A cela s'ajoute un tarif d'entrée de gamme compétitif (4€ / mois) et ... une véritable API. Autrement dit, une interface de programmation qui permet "d'injecter" à la volée de nouvelles factures issues d'un peu ce qu'on veut. Par exemple, une liste dans une Google Spreadsheet ou une nouvelle vente sur son site Webflow !

C'est donc extrêmement pratique, puisque Debitoor permet donc :

• d'ajouter librement des factures à la main, lorsqu'il y a une vente en direct par exemple, cela depuis l'interface du site Debitoor.
• d'ajouter des factures automatiquement, en brouillon ou directement validée, dans Debitoor, depuis une source extérieure ... comme Webflow !

Comment générer des factures automatiquement depuis Webflow vers Debitoor ? 

Il existe plusieurs manières de faire, mais je recommande de faire le travail en 2 temps. 

D'abord, de synchroniser les commandes Webflow avec une base, par exemple Google Spreadsheet. Cela permet d'y voir clair et de s'assurer qu'il n'y a pas de soucis lors de vos tests. Cela permet également de garder une trace exploitable de vos données. 

Par exemple, si vous souhaitez analyser en finesse votre chiffre d'affaires mensuel, par produit, ou pourquoi pas faire une carte de la localisation de vos clients !

Ensuite, il devient aisé de synchroniser le Google Spreadsheet avec Debitoor pour un rattrapage, ou de brancher Debitoor à un flux qui partira de Webflow et qui passera par Google Spreadsheet.

Etape 1 : Synchroniser les commandes entre Webflow et Google Spreadsheet avec Integromat.

Encore lui ! Ce fameux Integromat. Fidèle au poste. Il va nous permettre de construire le pont de notre choix entre Webflow et Google Spreadsheet. 

Dans notre cas, nous nous mettons dans la situation où l'on a déjà quelques ventes sur Webflow, et l'on veut les injecter dans Debitoor plutôt que de tout reprendre la main. Bien évidemment, une fois qu'on a fait cela, il devient également possible de demander à Integromat de le faire à la volée !

Récupérer les commandes

Après plusieurs tests, à l'heure où j'écris ces lignes, l'option "List Orders" d'Integromat ne m'a pas paru très fiable. Alors, pour m'assurer une bonne robustesse du scénario, le premier module est un module d'appel API avec Webflow. Avec ce module, j'ai la totale liberté avec l'API de Webflow, c'est bien pratique.

Ainsi, une fois que la connexion est réalisée entre Integromat et Webflow, je peux directement requêter l'API au niveau des Orders. Il me suffit ainsi d'appliquer la documentation :

GET /sites/:site_id/orders

Point d'attention : l'API est limitée à 100 commandes par appel. Pour éviter toute déconvenue, j'ajoute un paramètre "limit" dans la requête.‍

En exécutant le module, je récupère ainsi une collection (un Bundle) avec, à l'intérieur, un tableau contenant le détail des commandes. 

Lister les commandes

Ici, une compréhension du fonctionnement d'Integromat s'impose. Lorsqu'un module renvoie un "Bundle", il transmet l'ensemble du bundle au module suivant. Or, si toutes les informations sont dans cet unique Bundle, il faut les extraire. 

Concrètement, le module ne renvoie pas un Bundle par commande, mais un Bundle complet avec l'ensemble des commandes, sous le noeud Body. Il faut donc extraire le contenu du Bundle afin qu'il puisse être correctement injecté dans un autre module.

C'est là que le module Iterator intervient. Ce module permet de transformer les valeurs d'un Array (ci-dessus Body) en différents Bundles, que nous pourrons injecter dans Google Spreadsheet.

En créant l'itération sur le tableau Body, nous allons donc pouvoir ajouter autant de lignes dans notre feuille Excel qu'il y a d'éléments dans le tableau. Il nous reste donc à créer notre tableau Spreadsheet pour stocker l'information.

Ajouter les commandes

Nous allons maintenant injecter les données dans une feuille de Google Spreadsheet. Cela va nous permettre :

- de vérifier que les data sont bonnes (pas de doublon ...)

- qu'il ne manque rien

- que le format des données est correct.

Nous allons utiliser la fonction Add a Row du module Google Sheet d'Integromat pour réaliser l'exercice. Pour un bon fonctionnement avec Debitoor, vous aurez besoin des champs suivants :

1. Date de l'achat
2. Nom du client
3. Email
4. Adresse postale
5. Code postal
6. Ville
7. Pays (important!)
8. Nom du produit
9. Montant du produit
10. Nom de l'extra 1(ex : livraison)
11. Montant de l'extra 1
12. Nom de l'extra 2 (ex : remise)
13. Montant de l'extra 2
14. Total payé

Quelques remarques sur cette liste :

-> Comme nous le verrons plus loin, le pays est important car Debitoor attend dans l'API des informations différentes en fonction de l'origine du paiement.

--> Par souci de simplicité pédagogique, je prévois d'emblée 1 ligne produit et 2 lignes "extra" pour prévoir les cas de frais de livraison ou de codes promotionnels à indiquer sur la facture. Cependant, il peut être opportun de prévoir plus de colonnes pour d'autres produits par exemple.

Autre point important : Webflow remonte les montants en centimes. Il convient donc de les transformer en euro. Il faut également s'assurer qu'il n'y a pas d'anomalies lorsque les valeurs sont vides (par exemple, pas d'extra à indiquer dans la facturation).

Etape 2 : Générer les factures des commandes Webflow dans Debitoor

Dans cette seconde étape, nous allons créer un nouveau scénario qui va analyser les commandes présentes dans le Google Sheets afin de générer des factures en Draft (brouillon) sur Debitoor. 

Récupérer le token Debitoor

Tout d'abord, nous devons pouvoir brancher Integromat avec Debitoor. Il faut donc récupérer son "token" Debitoor, en se rendant directement ici. Une fois le token récupéré, on peut démarrer le scénario Integromat. 

Créer le scénario Integromat

Le premier module est le module "Search Rows" de Google Sheet. Il suffit de sélectionner les colonnes que le module va analyser dans le ficher que nous avons créé pour stocker toutes les ventes réalisées par Webflow. Chaque ligne non vide va générer directement un Bundle. Pratique, car il n'est donc pas utile d'utiliser un Iterator, comme dans le scénario précédent.

Le second module est le module HTTP, qui permet de réaliser des requêtes à une API. En effet, il n'existe pas encore d'intégration native de Debitoor avec Integromat, donc nous requêterons directement l'API de Debitoor avec le module de requêtes d'API. 

C'est ici que les choses deviennent légèrement plus techniques. Rien de bien compliqué, mais les éléments suivants devraient faire gagner du temps à celles et ceux qui voudraient mettre en place des requêtes avec Debitoor. 

Le module doit être paramétré comme suit, avec votre propre token d'accès généré par Debitoor.

Le point important ici, c'est  :

• Le body type : Il faut choisir "Raw"
• Le content type : Il faut choisir JSON

Il reste ensuite le Request Content, qui doit être composé d'un fichier JSON, sur le modèle que l'on trouve dans la documentation de l'API de Debitoor. 

C'est dans de flux que l'on peut injecter les éléments du module précédent. D'après la documentation, un certain nombre d'items ne sont pas obligatoires ou peuvent être vides. 

C'est aussi grâce à ce flux que l'on peut gérer des conditions, en fonction du contenu de la commande. Par exemple, si la valeur des extras est vide dans votre Spreadsheet, vous pouvez conditionner l'information dans le flux JSON, un peu comme ci-dessous :

Et le tour est joué !

Conclusion

Pour conclure, la génération de factures pro format issue de Webflow n'est pas très complexe. L'étape qui suit est celle de la génération "à la volée". Il suffit d'utiliser un module "Watch" avec Webflow, afin que les nouvelles commandes s'ajoutent automatiquement sur Google Sheet, puis en Draft dans Debitoor. Et si cela fonctionne bien, les factures peuvent être directement validées à la volée ensuite.

La partie API peut être un peu technique. N'hésitez pas à me contacter si vous voulez que je vous envoie un template fonctionnel du module Debitoor. 

Maintenant, à vous de jouer !