Intégrer Stripe pour les paiements en ligne

Vous voulez accepter des paiements en ligne sur votre site web ou votre application. Stripe est la solution la plus utilisée par les développeurs dans le monde entier, et pour de bonnes raisons. Ce guide vous explique comment fonctionne Stripe, quelles sont les différentes options d’intégration, et ce qu’il faut savoir avant de se lancer.

Pourquoi Stripe ?

Stripe est une plateforme de paiement en ligne créée en 2010. Elle est utilisée par des millions d’entreprises, des startups aux géants comme Amazon, Google ou Shopify. Voici pourquoi c’est mon choix par défaut pour les projets de mes clients.

Une API exceptionnelle

L’API de Stripe est considérée comme la référence en matière de design d’API. Elle est documentée de manière exemplaire, cohérente, et facile à intégrer pour un développeur. Chaque endpoint est documenté avec des exemples de code dans une dizaine de langages.

La sécurité intégrée

Stripe gère la conformité PCI-DSS pour vous. Concrètement, les données de carte bancaire ne transitent jamais par votre serveur. Elles sont envoyées directement à Stripe depuis le navigateur de votre client. Vous n’avez donc pas à gérer la sécurité des données bancaires, ce qui est un avantage considérable.

Les tarifs transparents

En France, Stripe facture 1,5% + 0,25 euro par transaction pour les cartes européennes, et 2,5% + 0,25 euro pour les cartes non européennes. Pas de frais cachés, pas d’abonnement mensuel, pas de frais de mise en place. Vous ne payez que quand vous encaissez.

Un écosystème complet

Au-delà du simple paiement par carte, Stripe propose :

• Les virements SEPA
• Apple Pay et Google Pay
• Les abonnements récurrents
• La facturation automatique
• La gestion des remboursements
• La prévention de la fraude (Stripe Radar)
• La gestion de la TVA (Stripe Tax)
• Les paiements en plusieurs fois (via Klarna, Alma, etc.)

Les options d’intégration

Stripe propose plusieurs niveaux d’intégration, du plus simple au plus personnalisé.

Option 1 : Stripe Checkout (le plus simple)

Stripe Checkout est une page de paiement hébergée par Stripe. Vous redirigez votre client vers cette page, il paye, et il est redirigé vers votre site. Vous n’avez aucun formulaire de paiement à créer.

Avantages :

• Mise en place en quelques heures
• Interface de paiement optimisée par Stripe (taux de conversion élevé)
• Conforme PCI-DSS sans effort
• Support automatique de dizaines de moyens de paiement
• Gestion automatique des taxes et de la facturation

Inconvénients :

• Le client quitte votre site pour payer (redirection)
• Personnalisation visuelle limitée
• Moins de contrôle sur l’expérience utilisateur

Idéal pour :

• Les sites vitrines avec vente ponctuelle
• Les boutiques en ligne simples
• Les ventes de services ou de formations
• Les dons et contributions

Voici le flux typique avec Checkout :

Client clique sur "Payer"
    -> Votre serveur crée une session Checkout
    -> Client redirigé vers checkout.stripe.com
    -> Client paye
    -> Redirection vers votre page de confirmation
    -> Webhook Stripe confirme le paiement

Option 2 : Stripe Elements (le compromis)

Stripe Elements fournit des composants d’interface (champ de carte, champ IBAN, etc.) que vous intégrez directement dans votre site. Le client ne quitte jamais votre page.

Avantages :

• Le paiement reste sur votre site (pas de redirection)
• Personnalisation du design pour matcher votre charte graphique
• Support des Payment Intents pour les paiements 3D Secure
• Toujours conforme PCI-DSS (les données sensibles sont dans une iframe Stripe)

Inconvénients :

• Plus de travail d’intégration qu’avec Checkout
• Il faut gérer le formulaire et les états (chargement, erreur, succès)
• La personnalisation a ses limites (vous ne pouvez pas modifier l’intérieur des champs Stripe)

Idéal pour :

• Les sites e-commerce avec une expérience utilisateur soignée
• Les applications web avec un tunnel de paiement intégré
• Les projets qui nécessitent un contrôle fin sur le parcours d’achat

Option 3 : L’API Payment Intents (le plus flexible)

Pour les intégrations complexes, vous pouvez utiliser directement l’API Payment Intents. C’est le niveau le plus bas d’intégration, qui vous donne un contrôle total sur le flux de paiement.

Avantages :

• Contrôle total sur chaque étape du paiement
• Gestion fine des cas complexes (paiement en plusieurs étapes, pré-autorisation, capture différée)
• Possibilité de combiner plusieurs moyens de paiement

Inconvénients :

• Complexité d’intégration plus élevée
• Plus de code à maintenir
• Nécessite une bonne compréhension de l’API Stripe

Idéal pour :

• Les marketplaces avec split payment
• Les plateformes SaaS complexes
• Les systèmes de réservation avec acompte

L’architecture technique

Le flux de paiement sécurisé

Un paiement Stripe suit toujours le même principe fondamental : les données sensibles (numéro de carte) ne passent jamais par votre serveur. Voici le flux détaillé :

1. Côté client (navigateur) : l’utilisateur saisit ses informations de paiement dans un composant Stripe (Elements ou Checkout)
2. Stripe : tokenise les données de carte et retourne un token ou un PaymentMethod
3. Votre serveur : crée un PaymentIntent avec le montant et la devise
4. Stripe : traite le paiement, gère le 3D Secure si nécessaire
5. Webhook : Stripe envoie une notification à votre serveur pour confirmer le résultat

Les webhooks : la clé d’une intégration robuste

Les webhooks sont des notifications HTTP que Stripe envoie à votre serveur quand un événement se produit (paiement réussi, remboursement, abonnement annulé, etc.).

Pourquoi les webhooks sont essentiels :

• Le client peut fermer son navigateur pendant le paiement 3D Secure
• La connexion internet du client peut être instable
• Certains moyens de paiement sont asynchrones (virement SEPA, prélèvement)

Ne vous fiez jamais uniquement à la redirection côté client pour confirmer un paiement. Le webhook est la source de vérité.

Les événements à écouter en priorité :

• payment_intent.succeeded : le paiement a été validé
• payment_intent.payment_failed : le paiement a échoué
• customer.subscription.created : un abonnement a démarré
• customer.subscription.deleted : un abonnement a été annulé
• invoice.payment_failed : un paiement d’abonnement a échoué

Vérifier la signature des webhooks

Chaque webhook Stripe est signé avec une clé secrète. Vous devez vérifier cette signature pour vous assurer que la requête vient bien de Stripe et non d’un attaquant.

const event = stripe.webhooks.constructEvent(
  requestBody,
  signature,
  webhookSecret
);

Ne sautez jamais cette étape. Un webhook non vérifié est une faille de sécurité.

Les abonnements avec Stripe Billing

Pour les modèles SaaS ou les services récurrents, Stripe Billing gère les abonnements de bout en bout.

Le fonctionnement

1. Vous créez des Products et des Prices dans le dashboard Stripe (ou via l’API)
2. L’utilisateur choisit un plan et s’abonne via Checkout ou Elements
3. Stripe crée automatiquement les factures et prélève le paiement chaque mois/an
4. En cas d’échec de paiement, Stripe relance automatiquement (dunning)
5. Vous recevez des webhooks pour chaque événement du cycle de vie de l’abonnement

Les modèles de pricing supportés

• Prix fixe : 29 euros/mois
• Prix par paliers : 0-100 utilisateurs = 29 euros, 101-500 = 79 euros
• Prix à l’usage : 0,01 euro par requête API
• Essai gratuit : 14 jours gratuits puis facturation
• Prix personnalisé : devis sur mesure pour les grands comptes

La gestion du portail client

Stripe fournit un portail client hébergé où vos abonnés peuvent :

• Consulter leurs factures
• Mettre à jour leur moyen de paiement
• Changer de plan
• Annuler leur abonnement

Ce portail est personnalisable et vous évite de développer ces fonctionnalités vous-même.

Stripe Connect : les paiements pour les marketplaces

Si votre projet est une marketplace ou une plateforme de mise en relation, Stripe Connect permet de gérer les paiements entre acheteurs et vendeurs.

Les trois modèles Connect

1. Standard : chaque vendeur a son propre compte Stripe. Le plus simple mais le moins personnalisable.
2. Express : Stripe fournit un formulaire d’inscription simplifié pour les vendeurs. Bon compromis.
3. Custom : vous gérez entièrement l’expérience d’inscription des vendeurs. Le plus flexible mais le plus complexe.

Le split payment

Stripe Connect gère automatiquement la répartition des paiements :

• Le client paye 100 euros
• Le vendeur reçoit 85 euros
• La plateforme (vous) touche 15 euros de commission
• Stripe prélève ses frais

Tout est automatisé, y compris la gestion de la TVA et les virements aux vendeurs.

Les bonnes pratiques d’intégration

1. Utilisez le mode test

Stripe fournit un environnement de test complet avec des numéros de carte fictifs. Testez tous les scénarios avant de passer en production :

• Paiement réussi (carte 4242 4242 4242 4242)
• Paiement refusé (carte 4000 0000 0000 0002)
• Authentification 3D Secure requise (carte 4000 0025 0000 3155)
• Fonds insuffisants (carte 4000 0000 0000 9995)

2. Gérez les erreurs proprement

Chaque appel à l’API Stripe peut échouer. Gérez chaque type d’erreur :

• Erreur de carte (CardError) : informez l’utilisateur clairement
• Erreur de réseau : proposez de réessayer
• Erreur serveur Stripe : informez l’utilisateur que le paiement sera traité plus tard

3. Gardez les clés API en sécurité

Votre clé secrète Stripe ne doit jamais apparaître dans le code frontend. Elle doit être stockée dans des variables d’environnement côté serveur. La clé publique peut être exposée côté client, c’est prévu pour.

4. Respectez la réglementation

En Europe, la directive PSD2 impose l’authentification forte (3D Secure) pour les paiements en ligne. Stripe gère cette contrainte automatiquement avec les Payment Intents. Assurez-vous d’utiliser cette API et non l’ancienne API Charges qui ne supporte pas le 3D Secure natif.

5. Mettez en place des idempotency keys

Pour éviter les doublons de paiement (en cas de double-clic ou de problème réseau), utilisez des clés d’idempotence sur vos appels API. Stripe garantit qu’un appel avec la même clé ne sera exécuté qu’une fois.

Stripe et les frameworks modernes

Next.js et React

L’intégration de Stripe avec Next.js est fluide. Les API Routes (ou les Server Actions en App Router) servent de backend pour créer les sessions Checkout ou les Payment Intents. Côté client, la bibliothèque @stripe/react-stripe-js fournit les composants Elements prêts à l’emploi.

Flutter

Pour les applications mobiles Flutter, Stripe fournit un SDK natif (flutter_stripe) qui intègre les moyens de paiement natifs (Apple Pay, Google Pay) et les Payment Sheets.

Astro

Pour un site statique avec Astro, Stripe Checkout est l’option la plus adaptée. L’API est appelée depuis un endpoint serverless (Netlify Functions, Vercel Functions) et le client est redirigé vers la page Checkout hébergée.

Les alternatives à Stripe

Stripe n’est pas la seule option. Voici les principales alternatives :

Pour la majorité des projets de mes clients (TPE, PME, startups), Stripe reste le meilleur choix en termes de rapport fonctionnalités/simplicité/coût.

Combien coûte l’intégration de Stripe ?

Le coût d’intégration dépend de la complexité :

Ces budgets incluent le développement, les tests et la mise en production. Ils s’ajoutent au coût de développement du site ou de l’application elle-même. Pour un apercu des coûts globaux, consultez mon article sur le prix d’un site web à Rennes.

Prêt à accepter les paiements en ligne ?

L’intégration de Stripe est un projet technique qui nécessite de l’expérience. Une mauvaise intégration peut entraîner des paiements perdus, des problèmes de sécurité ou une mauvaise expérience utilisateur. Si vous avez besoin d’intégrer des paiements en ligne dans votre site web ou votre application, contactez-moi. Je vous guide vers la solution la plus adaptée à votre projet et votre budget.