Chapitre 3 : Stripe Checkout vs Stripe Elements – Quel Choix pour Votre Projet React ?

Introduction

Vue d’ensemble

| Critère | Stripe Checkout | Stripe Elements |
|---------|-----------------|-----------------|
| Complexité | Simple | Modérée |
| Personnalisation | Limitée | Totale |
| Hébergement | Page Stripe | Votre site |
| Temps d'intégration | ~30 min | ~2-4 heures |
| Maintenance | Stripe gère | Vous gérez |

Stripe Checkout

Comment ça fonctionne

Votre site → Page Stripe → Retour vers votre site

Implémentation React

"`typescript"`

// Créer la session côté serveur
const session = await stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: [{
    price_data: {
      currency: 'eur',
      unit_amount: 5000, // 50€
      product_data: { name: 'Mon produit' },
    },
    quantity: 1,
  }],
  success_url: `${domain}/success?session_id={CHECKOUT_SESSION_ID}`,
  cancel_url: `${domain}/cancel`,
});

// Retourner l'URL au frontend
return { url: session.url };

"`tsx"`

// Côté React - Simple redirection
function CheckoutButton({ amount }: { amount: number }) {
  const handleCheckout = async () => {
    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      body: JSON.stringify({ amount }),
    });
    const { url } = await response.json();
    window.location.href = url; // Redirection vers Stripe
  };

  return <button onClick={handleCheckout}>Payer {amount}€</button>;
}

Avantages de Checkout

Stripe Elements

Tout se passe sur votre site (iframe sécurisé Stripe)

"`tsx"`

import { PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';

function PaymentForm({ clientSecret }: { clientSecret: string }) {
  const stripe = useStripe();
  const elements = useElements();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!stripe || !elements) return;

    setLoading(true);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/success`,
      },
    });

    if (error) {
      console.error(error.message);
    }

    setLoading(false);
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe || loading}>
        {loading ? 'Traitement...' : 'Payer'}
      </button>
    </form>
  );
}

Tableau de décision

Choisissez Stripe Elements si :

Comparaison des flux

1. Client clique "Payer"
2. → Redirection vers checkout.stripe.com
3. Client entre ses informations
4. Stripe traite le paiement
5. → Redirection vers success_url
6. Webhook confirme le paiement

1. Client clique "Payer"
2. Formulaire Elements s'affiche (sur votre site)
3. Client entre ses informations
4. confirmPayment() envoie à Stripe
5. Stripe traite le paiement
6. Résultat retourné + webhook

Performance et conversion

| Métrique | Checkout | Elements |
|----------|----------|----------|
| Taux d'abandon | ~15-20% | ~10-15% |
| Temps de paiement moyen | 45-60s | 30-45s |
| Support mobile | Excellent | Bon (selon implémentation) |

Approche hybride

"`typescript"`

// Checkout pour les achats simples
if (isSimplePurchase) {
  return <CheckoutButton />;
}

// Elements pour l'expérience premium
if (isPremiumExperience) {
  return <ElementsPaymentForm />;
}
"`

## Cas d'usage concrets

### E-commerce classique → Checkout

"`typescript
// Panier → Checkout → Confirmation
const session = await stripe.checkout.sessions.create({
  mode: 'payment',
  line_items: cart.items.map(item => ({
    price: item.stripePriceId,
    quantity: item.quantity,
  })),
});

"`tsx"`

// Onboarding fluide avec Elements
<OnboardingFlow>
  <Step1 component={<AccountInfo />} />
  <Step2 component={<PlanSelection />} />
  <Step3 component={<PaymentForm />} /> {/* Elements ici */}
  <Step4 component={<Confirmation />} />
</OnboardingFlow>

• Chapitre 1 : Configuration initiale Intégrer Stripe dans React/Next.js Premier formulaire de paiement et installation.

• Chapitre 2 : Automatisation (Précédent) Gérer les webhooks Stripe dans Node.js Recevoir et traiter les événements de paiement en temps réel.

• Chapitre 3 : Stratégie de Paiement (Vous êtes ici) Stripe Checkout vs Elements : Quel choix pour votre projet ? Comparatif complet pour choisir la meilleure UX.

• Chapitre 4 : Gestion après-vente (Suivant) Implémenter les remboursements Stripe Gérer les annulations, les remboursements et les litiges.

• Chapitre 5 : Concepts Avancés PaymentIntent et capture différée Autoriser les paiements et les capturer plus tard.