Intégration Stripe : prélèvement en ligne pour Carrés Solidaires

Sommaire

Je souhaite être accompagné(e) pour intégrer Stripe sur mon site Webflow.

Le contexte

Carrés Solidaires est une plateforme qui met en relation des associations et des bailleurs. L'idée est simple à raconter, plus subtile à exécuter : quand une asso et un bailleur se mettent d'accord sur un local, trois flux financiers se déclenchent en même temps.

L'asso est prélevée de trois choses : des frais de captation (qui restent à Carrés Solidaires), du dépôt de garantie (reversé au bailleur), et du loyer au prorata du mois en cours (reversé au bailleur). Ensuite, chaque mois, le loyer est prélevé sur l'IBAN de l'asso et reversé au bailleur sur son compte Stripe, sans nouvelle intervention.

Tout cela passe en SEPA Direct Debit (mandat IBAN), avec un seul moment de saisie : la création du compte. C'est cet enchaînement (un mandat, plusieurs flux, plusieurs destinataires) qui rend le sujet intéressant.

L'architecture

Quatre briques travaillent ensemble :

Webflow sert l'interface (formulaire d'inscription, espace asso, espace bailleur).
Wized ajoute la couche logique côté front : état des formulaires, appels API, conditions d'affichage.
Xano héberge la base de données, expose les endpoints REST consommés par Wized, et orchestre les appels vers Stripe.
Stripe gère le paiement, la conformité PCI, le mandat SEPA, le KYC des bailleurs (via Stripe Connect), et les webhooks.

Cette répartition est volontaire. Webflow et Wized restent en surface (UI et état). Xano est la source de vérité métier (qui paie qui, combien, quand). Stripe est la source de vérité financière. Personne ne marche sur les plates-bandes du voisin.

Étape 1, l'IBAN saisi via Stripe Elements

Au moment de l'inscription, l'asso renseigne son IBAN. Cet IBAN ne passe jamais par Webflow, ni par Wized, ni par Xano. C'est une règle, pas une option.

On utilise le composant iban de Stripe Elements, qui injecte un iframe sécurisé directement dans la page Webflow. L'asso tape son IBAN dedans, le navigateur envoie le contenu directement à Stripe, et Stripe renvoie un identifiant opaque (un PaymentMethod au format pm_…).

const iban = elements.create('iban', { supportedCountries: ['SEPA'] });
iban.mount('#iban-element');

const { paymentMethod } = await stripe.createPaymentMethod({
  type: 'sepa_debit',
  sepa_debit: iban,
  billing_details: { name, email },
});
// paymentMethod.id ressemble à "pm_1NyZ..."

C'est cet identifiant pm_… qu'on transmet à Xano. Si la base Xano est compromise un jour, aucun IBAN n'y figure. Stripe est le seul à connaître la vraie donnée bancaire. Côté conformité PCI / DSP2, on est aligné par défaut, sans audit lourd.

Étape 2, la création du Customer côté Xano

Wized envoie à Xano un payload simple : le pm_id, les infos de l'asso, et le bailleur avec lequel elle s'engage. Xano fait alors trois appels Stripe en cascade :

POST /v1/customers pour créer un Customer Stripe rattaché à l'asso, avec le bailleur dans la metadata.
POST /v1/payment_methods/:id/attach pour rattacher le PaymentMethod au Customer.
POST /v1/setup_intents qui confirme le mandat SEPA. C'est cette étape qui matérialise la signature légale du mandat de prélèvement.

Seul l'identifiant du Customer (cus_…) est stocké dans Xano, le reste est uniquement dans Stripe. À partir de là, Xano peut prélever l'asso à volonté sans avoir à redemander quoi que ce soit. C'est tout l'intérêt du modèle SEPA : une signature, des prélèvements illimités tant que le mandat est valide.

Capture du Function Stack Xano de l'endpoint create_customer, avec l'appel API fait à Stripe

Étape 3, le premier prélèvement (le multi-destinataire)

Quand le contrat asso / bailleur est signé, Xano déclenche un PaymentIntent qui couvre les trois lignes en une seule opération SEPA :

Frais de captation, qui restent sur le compte Stripe de Carrés Solidaires.
Dépôt de garantie, reversé au bailleur.
Loyer au prorata, reversé au bailleur.

Pour le reversement, on utilise Stripe Connect en mode destination charge. Le bailleur a son propre compte Stripe Connect (créé en amont via un onboarding hosted Stripe), et on précise la destination directement dans l'appel :

stripe.paymentIntents.create({
  amount: total_centimes,
  currency: 'eur',
  customer: 'cus_...',
  payment_method: 'pm_...',
  payment_method_types: ['sepa_debit'],
  off_session: true,
  confirm: true,
  application_fee_amount: frais_captation_centimes,
  transfer_data: { destination: 'acct_bailleur_...' },
});

Stripe encaisse l'asso, prélève les frais de captation pour Carrés Solidaires et reverse le solde au bailleur. Tout en une opération comptable, sans virement manuel ni écriture comptable à reconstituer.

Étape 4, le prélèvement mensuel automatisé

Chaque mois, un background task Xano se réveille, lit la liste des contrats actifs, et déclenche un PaymentIntent par contrat. Mêmes paramètres que le premier prélèvement, sans la partie captation et dépôt de garantie cette fois : juste le loyer.

Le mode off_session: true est central. Il indique à Stripe que l'asso n'est pas devant son écran. Stripe utilise alors le mandat SEPA déjà signé pour autoriser le prélèvement, sans authentification supplémentaire.

Côté Xano, chaque tentative est enregistrée avec un idempotency_key unique (par exemple loyer_<contrat_id>_<YYYY-MM>). Si le job se relance pour une raison ou une autre, Stripe reconnaît la clé et n'effectue pas un second prélèvement. C'est la garantie qu'aucun bailleur ne sera payé deux fois et qu'aucune asso ne sera prélevée deux fois.

Étape 5, les webhooks, le vrai juge de paix

En SEPA, le PaymentIntent ne réussit pas immédiatement. Il faut compter en moyenne cinq jours ouvrés avant que la banque confirme (ou rejette). Pendant ce temps, le statut est processing. Impossible de se fier à la réponse synchrone de l'API Stripe pour savoir si l'argent est arrivé.

Le seul juge de paix, ce sont les webhooks. Xano expose un endpoint /webhooks/stripe qui écoute trois événements clés :

payment_intent.succeeded : on marque le loyer comme encaissé, on notifie le bailleur.
payment_intent.payment_failed : on notifie l'asso, on planifie une nouvelle tentative.
balance.available : si la balance change on update le statut des paiements dans Xano

À chaque webhook reçu, Xano vérifie la signature Stripe-Signature avec la clé secrète du webhook. C'est cette vérification qui empêche un attaquant d'envoyer un faux payment_intent.succeeded sur le endpoint pour faire passer un loyer pour payé.

Étape 6 : Wized comme glue côté front

Wized joue un rôle qu'on ne soupçonne pas en regardant la page : il transforme un site Webflow statique en application dynamique sans une ligne de framework JS classique.

Concrètement, sur le formulaire d'inscription, Wized :

Charge le SDK Stripe.js et init le composant Elements pour l'IBAN.
Gère les états (vide, en cours de saisie, en cours de validation, succès, erreur) en toggle de classes Webflow.
Appelle l'endpoint Xano avec le pm_id une fois la saisie validée.
Redirige vers l'espace asso après succès.

Pour le designer Webflow, tout reste manipulable sans toucher au code. Les états ont chacun leur classe (par exemple is-loading, is-error), les messages d'erreur sont des éléments Webflow normaux dont la visibilité est pilotée par Wized. Le développeur intervient uniquement sur la logique, jamais sur le design.

Pourquoi pas autre chose ?

HelloAsso ou Lyf, ces outils sont calibrés pour des dons ponctuels, pas pour des prélèvements de loyer multi-destinataires avec dépôt de garantie. Le modèle économique de Carrés Solidaires n'y entre pas.
GoCardless, c'est l'autre acteur SEPA. Mais l'absence d'équivalent à Stripe Connect, et un écosystème de webhooks moins riche, rendent l'orchestration plus lourde côté Xano.
Tout coder en interne sur l'API SEPA d'une banque française, c'est plusieurs mois de développement, une certification PCI à monter, et une gestion des rejets bancaires à reconstituer manuellement. Stripe Connect fait le boulot pour nous.
Embarquer le formulaire de paiement Stripe Checkout, c'est rapide à mettre en place, mais on perd la main sur le design, sur la captation des metadata métier, et sur l'enchaînement multi-étapes du parcours d'inscription.

Stripe Elements + Connect + Xano donne le bon équilibre : design 100 % Webflow, conformité PCI déléguée, reversements automatisés, et toute la logique métier centralisée côté Xano.

Le résultat

Une asso renseigne son IBAN une seule fois, à la création de son compte. Le jour où elle signe avec un bailleur, les trois flux (captation, dépôt, prorata) sont prélevés en une opération et répartis automatiquement entre Carrés Solidaires et le bailleur. Chaque mois suivant, le loyer est prélevé en arrière-plan sans intervention humaine. Les webhooks tiennent la base Xano à jour, et personne ne fait de virement manuel dans un tableur.

Le code Xano fait la moitié du travail, Stripe fait l'autre. Webflow et Wized donnent à tout cela une interface qui ne ressemble pas à un dashboard SaaS générique, mais à la marque Carrés Solidaires.