Stripe

La plateforme de paiement en ligne complète et flexible qui permet d'intégrer facilement des solutions de paiement sécurisées dans vos applications.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que Stripe ?

Imaginez que vous souhaitiez vendre vos produits ou services en ligne. Pour recevoir les paiements de vos clients, vous avez besoin d'un système sécurisé qui traite les cartes bancaires, respecte les normes de sécurité et gère les transactions – tout en offrant une expérience simple à vos clients.

Stripe est ce système de paiement. C'est une infrastructure financière complète qui permet aux entreprises, des startups aux grandes entreprises, d'accepter des paiements en ligne et de gérer leurs opérations financières.

Pourquoi Stripe est si populaire ?

Sécurité

Stripe est certifié PCI Service Provider Level 1, le plus haut niveau de certification de sécurité dans l'industrie des paiements.

Simplicité

Intégration rapide avec des outils prêts à l'emploi et une API bien documentée, permettant de commencer à accepter des paiements en quelques minutes.

En résumé, Stripe permet aux entreprises de toutes tailles d'accepter des paiements en ligne de manière sécurisée et fiable, sans avoir à se préoccuper des complexités techniques ou réglementaires liées aux paiements électroniques.

Pour les développeurs

Fonctionnement technique

Stripe propose une API RESTful complète et des bibliothèques client pour de nombreux langages de programmation, ce qui facilite l'intégration des paiements dans vos applications web ou mobiles.

Les principaux composants

Stripe Checkout

Une solution de paiement clé en main qui permet d'ajouter rapidement un formulaire de paiement hébergé par Stripe, réduisant ainsi le besoin de manipuler directement les données de carte.

Exemple d'intégration de Stripe Checkout avec React

import { useEffect } from 'react';
import { loadStripe } from '@stripe/stripe-js';

// Chargement de Stripe (à faire une seule fois)
const stripePromise = loadStripe('pk_test_your_publishable_key');

function CheckoutButton({ priceId }) {
  const handleClick = async (event) => {
    // Empêcher la navigation par défaut
    event.preventDefault();
    
    // Récupérer l'instance Stripe
    const stripe = await stripePromise;
    
    // Appeler votre backend pour créer une session Checkout
    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        priceId: priceId,
      }),
    });
    
    const session = await response.json();
    
    // Rediriger vers Checkout
    const result = await stripe.redirectToCheckout({
      sessionId: session.id,
    });
    
    if (result.error) {
      // Gérer l'erreur
      console.error(result.error.message);
    }
  };
  
  return (
    <button 
      onClick={handleClick}
      className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
      Payer avec Stripe
    </button>
  );
}

Stripe Elements

Des composants d'interface utilisateur préfabriqués pour collecter les informations de paiement, que vous pouvez personnaliser pour qu'ils correspondent parfaitement au design de votre site.

Exemple d'intégration de Stripe Elements avec React

import { useState, useEffect } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import {
  CardElement,
  Elements,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js';

// Chargement de Stripe (à faire une seule fois)
const stripePromise = loadStripe('pk_test_your_publishable_key');

function CheckoutForm() {
  const [succeeded, setSucceeded] = useState(false);
  const [error, setError] = useState(null);
  const [processing, setProcessing] = useState('');
  const [disabled, setDisabled] = useState(true);
  const [clientSecret, setClientSecret] = useState('');
  
  const stripe = useStripe();
  const elements = useElements();
  
  useEffect(() => {
    // Créer une PaymentIntent dès le chargement du composant
    fetch('/api/create-payment-intent', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ amount: 1999 }) // 19.99 €
    })
    .then(res => res.json())
    .then(data => {
      setClientSecret(data.clientSecret);
    });
  }, []);
  
  const handleChange = async (event) => {
    // Écouter les changements dans CardElement
    setDisabled(event.empty);
    setError(event.error ? event.error.message : '');
  };
  
  const handleSubmit = async (event) => {
    event.preventDefault();
    setProcessing(true);
    
    const payload = await stripe.confirmCardPayment(clientSecret, {
      payment_method: {
        card: elements.getElement(CardElement),
        billing_details: {
          name: 'Jenny Rosen',
        },
      },
    });
    
    if (payload.error) {
      setError(`Paiement échoué: ${payload.error.message}`);
      setProcessing(false);
    } else {
      setError(null);
      setProcessing(false);
      setSucceeded(true);
    }
  };
  
  return (
    <form onSubmit={handleSubmit} className="stripe-form">
      <CardElement 
        onChange={handleChange}
        options={{
          style: {
            base: {
              fontSize: '16px',
              color: '#424770',
              '::placeholder': {
                color: '#aab7c4',
              },
            },
            invalid: {
              color: '#9e2146',
            },
          },
        }}
      />
      
      <button
        type="submit"
        disabled={processing || disabled || succeeded}
        className="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        {processing ? 'Traitement en cours...' : 'Payer'}
      </button>
      
      {error && <div className="text-red-500 mt-2">{error}</div>}
      {succeeded && <div className="text-green-500 mt-2">Paiement réussi !</div>}
    </form>
  );
}

function StripePaymentForm() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
}

Intégration Backend

Pour sécuriser vos paiements, vous devez effectuer certaines opérations côté serveur, comme créer des sessions Checkout ou des PaymentIntents.

Création d'une session Checkout côté serveur avec Next.js

// Exemple avec Next.js API route
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      // Créer une session Checkout
      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: [
          {
            price: req.body.priceId,
            quantity: 1,
          },
        ],
        mode: 'payment',
        success_url: `${req.headers.origin}/success?session_id={CHECKOUT_SESSION_ID}`,
        cancel_url: `${req.headers.origin}/canceled`,
      });
      
      res.status(200).json({ id: session.id });
    } catch (err) {
      res.status(500).json({ statusCode: 500, message: err.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Webhooks

Les webhooks permettent à Stripe d'envoyer des notifications à votre application lorsque des événements se produisent, comme un paiement réussi ou un échec de paiement.

Gestion des webhooks Stripe avec Next.js

// Exemple avec Next.js API route
import Stripe from 'stripe';
import { buffer } from 'micro';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

// Désactiver le parsing du body car nous avons besoin du raw body
export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const buf = await buffer(req);
    const sig = req.headers['stripe-signature'];
    
    let event;
    
    try {
      // Vérifier que l'événement provient bien de Stripe
      event = stripe.webhooks.constructEvent(
        buf,
        sig,
        process.env.STRIPE_WEBHOOK_SECRET
      );
    } catch (err) {
      console.log(`Erreur de webhook: ${err.message}`);
      return res.status(400).send(`Webhook Error: ${err.message}`);
    }
    
    // Gérer l'événement
    switch (event.type) {
      case 'payment_intent.succeeded':
        const paymentIntent = event.data.object;
        console.log(`PaymentIntent ${paymentIntent.id} a été payé`);
        // Mettre à jour la base de données, envoyer un email, etc.
        break;
      case 'checkout.session.completed':
        const session = event.data.object;
        console.log(`Session Checkout ${session.id} complétée`);
        // Traiter la commande
        break;
      default:
        console.log(`Événement non géré: ${event.type}`);
    }
    
    res.status(200).json({ received: true });
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Fonctionnalités principales

Paiements par carte - Acceptez toutes les principales cartes de crédit et de débit
Méthodes de paiement locales - Intégrez des modes de paiement spécifiques à certains pays (SEPA, Giropay, iDEAL, etc.)
Paiements récurrents - Gérez des abonnements avec facturation automatique
Connect - Créez une plateforme de marketplace avec paiements entre utilisateurs
Radar - Détection et prévention des fraudes
Billing - Gestion complète de la facturation et des abonnements
Atlas - Service pour créer et enregistrer facilement une entreprise aux États-Unis

Outils et intégrations

Dashboard - Interface web complète pour gérer les paiements, les remboursements, les abonnements
CLI - Outil en ligne de commande pour tester les webhooks localement
Plugins CMS - Extensions pour WordPress, Shopify, Magento et autres plateformes
Bibliothèques - SDKs pour JavaScript, PHP, Python, Ruby, Go, Java, .NET et plus
Composants React - Bibliothèque @stripe/react-stripe-js pour React

Applications concrètes

Cas d'usage

E-commerce

Acceptez des paiements uniques pour des produits physiques ou numériques, avec gestion des stocks et des expéditions intégrée.

Abonnements et SaaS

Créez et gérez des plans d'abonnement récurrents avec facturation automatique, essais gratuits et formules différentes.

Marketplaces

Construisez des plateformes de type marketplace où Stripe Connect gère les paiements entre acheteurs et vendeurs, en prélevant automatiquement une commission.

Fintech

Développez des produits financiers complexes comme des portefeuilles, des cartes virtuelles, des prêts ou des produits d'investissement avec Stripe Treasury.