Intégrer Xano + Stripe
Xano et Stripe forment une combinaison puissante dans l'écosystème no-code. App Studio a configuré cette intégration pour des dizaines de clients, voici notre guide complet pour la mettre en place rapidement et correctement.
Pourquoi Xano + Stripe ?
Le function stack de Xano peut appeler directement l'API REST de Stripe via le module External API Request, sans SDK nécessaire. Vous pouvez construire un backend de paiement complet dans Xano : créer des clients, créer des sessions de checkout, récupérer le statut d'abonnement, et mettre à jour des enregistrements à l'arrivée des webhooks Stripe. Comme les endpoints de Xano sont du REST standard, n'importe quel frontend (WeWeb, FlutterFlow, ou une application sur mesure) peut les déclencher sans modification.
Configurer l'intégration
Stockez votre clé secrète Stripe dans les variables d'environnement de Xano. Créez un endpoint API Xano /payments/create-session qui prend un price_id et un user_id, recherche ou crée un client Stripe (via l'External API Request de Xano pour un POST vers https://api.stripe.com/v1/customers), crée une session Checkout, et renvoie l'URL de session. Votre frontend appelle cet endpoint et redirige vers la page de checkout hébergée par Stripe. Après le paiement, Stripe redirige vers votre URL de succès. Créez un endpoint Xano public /webhooks/stripe qui accepte les requêtes POST. Enregistrez cette URL dans les réglages de webhook de Stripe. Dans le function stack de Xano, utilisez le champ type du webhook pour brancher : sur checkout.session.completed, mettez à jour le plan de l'utilisateur dans la base ; sur customer.subscription.deleted, rétrogradez l'utilisateur. Utilisez l'étape de vérification de signature de Xano (avec le secret de webhook de Stripe) pour authentifier que les événements viennent bien de Stripe.
Cas d'usage concrets
Xano + Stripe propulse des backends de facturation SaaS pour des plateformes construites sur WeWeb, FlutterFlow, React, et Vue. Le schéma standard chez App Studio : Xano gère l'état de l'abonnement, Stripe gère l'infrastructure de paiement, et le frontend affiche simplement le statut de plan actuel récupéré depuis Xano. Les URL de portail client (générées depuis Xano en appelant l'API Stripe Customer Portal) sont servies comme un simple endpoint Xano vers lequel le frontend redirige.
Bonnes pratiques
Vérifiez toujours les signatures de webhook Stripe dans Xano, ne traitez jamais d'événements sans validation. Le module External API Request de Xano renvoie des réponses brutes, ajoutez toujours une gestion d'erreur pour les codes de statut différents de 200 renvoyés par Stripe. Gardez les IDs client Stripe dans une colonne dédiée de votre table users dans Xano pour des recherches rapides pendant le traitement des webhooks. Testez chaque type d'événement webhook avec le Stripe CLI (stripe trigger checkout.session.completed) avant la mise en production.
- SaaS billing
- Subscription management
- One-time payments
- Customer portal
- Usage billing
Besoin d'aide pour cette intégration ?
App Studio configure ces intégrations pour vous. Devis gratuit sous 48h.