Intégration Stripe Checkout avec React/Next.js

npm install @stripe/stripe-js stripe

import { NextResponse } from "next/server";
import Stripe from "stripe";

// Initialisation de Stripe avec la clé secrète
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export async function POST() {
  try {
    // Création d'une session Checkout
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      
      // Ce mode de paiement peut être "subscription" dans le cas d'un abonnement
      mode: "payment",
      
      line_items: [
        {
          price_data: {
            currency: "eur",
            product_data: { 
              name: "Produit",
              description: "Page de paiement",
            },
            unit_amount: 2000, // Prix en centimes
          },
          quantity: 1, // Quantité
        },
      ],
      
      // URL de redirection après paiement réussi
      success_url: "http://localhost:3000/success",
      
      // URL de redirection si l'utilisateur annule
      cancel_url: "http://localhost:3000/cancel",
    });

    // Retourne l'ID de session au client
    return NextResponse.json({ id: session.id });
  } catch (err) {
    // Gestion des erreurs
    console.error("Erreur Stripe:", err);
    return NextResponse.json({ error: err.message }, { status: 500 });
  }
}

"use client";

import { loadStripe } from "@stripe/stripe-js";
import { useState } from "react";


const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

export default function StripeButton() {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    
    try {
      const res = await fetch("/api/checkout", { 
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
      });

      const data = await res.json();

      if (data.error) {
        console.error("Erreur:", data.error);
        alert("Erreur lors de la création du paiement");
        setLoading(false);
        return;
      }
      
      const stripe = await stripePromise;
      
      const { error } = await stripe.redirectToCheckout({ 
        sessionId: data.id 
      });

      if (error) {
        console.error("Erreur Stripe:", error);
        alert(error.message);
      }
    } catch (err) {
      console.error("Erreur:", err);
      alert("Une erreur est survenue");
    } finally {
      setLoading(false);
    }
  };

  return (
    <button
      onClick={handleClick}
      disabled={loading}
      className="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 
                 disabled:bg-gray-500 disabled:cursor-not-allowed transition"
    >
      {loading ? "Chargement..." : "Payer avec Stripe"}
    </button>
  );
}

import StripeButton from "@/components/StripeButton";

export default function CheckoutPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen 
    bg-gradient-to-br from-gray-900 to-black text-white p-6">
      <div className="max-w-md w-full bg-gray-800 rounded-2xl shadow-2xl p-8">
        <h1 className="text-3xl font-bold mb-2 text-center">
          Finaliser votre achat
        </h1>
        <p className="text-gray-400 text-center mb-8">
          Paiement sécurisé via Stripe
        </p>

        <div className="bg-gray-700 rounded-lg p-6 mb-6">
          <div className="flex justify-between items-center mb-4">
            <span className="text-lg font-semibold">Produit</span>
            <span className="text-2xl font-bold text-green-400">20,00 €</span>
          </div>
          <p className="text-gray-400 text-sm">
            Formation complète React avec certificat
          </p>
        </div>

        <div className="flex items-center gap-2 text-sm text-gray-400 mb-6">
          <svg className="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 
            01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
          </svg>
          <span>Paiement 100% sécurisé par Stripe</span>
        </div>

        <StripeButton />

        <p className="text-xs text-gray-500 text-center mt-6">
          En poursuivant, vous acceptez nos conditions générales de vente.
        </p>
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import StripeButton from "@/components/StripeButton";

export default function CartPage() {
  const [cartItems] = useState([
    { id: 1, name: "Formation React", price: 99, quantity: 1 },
    { id: 2, name: "Ebook JavaScript", price: 15, quantity: 2 },
  ]);

  const total = cartItems.reduce((sum, item) => 
    sum + (item.price * item.quantity), 0
  );

  return (
    <div className="min-h-screen bg-gray-900 text-white p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-4xl font-bold mb-8">Votre panier</h1>

        <div className="bg-gray-800 rounded-lg p-6 mb-6">
          {cartItems.map((item) => (
            <div key={item.id} className="flex justify-between items-center py-4 border-b border-gray-700 last:border-0">
              <div>
                <h3 className="font-semibold text-lg">{item.name}</h3>
                <p className="text-gray-400 text-sm">Quantité: {item.quantity}</p>
              </div>
              <div className="text-right">
                <p className="text-xl font-bold">{item.price * item.quantity} €</p>
                <p className="text-gray-400 text-sm">{item.price} € x {item.quantity}</p>
              </div>
            </div>
          ))}

          <div className="flex justify-between items-center pt-6 border-t-2 border-indigo-600 mt-6">
            <span className="text-2xl font-bold">Total</span>
            <span className="text-3xl font-bold text-green-400">{total} €</span>
          </div>
        </div>

        <StripeButton />
      </div>
    </div>
  );
}

import Link from "next/link";

export default function SuccessPage() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white p-6">
      <div className="max-w-md w-full bg-gray-800 rounded-2xl shadow-2xl p-8 text-center">
        <div className="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
          <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
          </svg>
        </div>

        <h1 className="text-3xl font-bold mb-4 text-green-400">
          Paiement réussi !
        </h1>
        <p className="text-gray-300 mb-8">
          Merci pour votre achat. Un email de confirmation vous a été envoyé.
        </p>

        <Link 
          href="/"
          className="inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg transition"
        >
          Retour à l'accueil
        </Link>
      </div>
    </div>
  );
}

import { NextResponse } from "next/server";
import Stripe from "stripe";

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

export async function POST(req) {
  const body = await req.text();
  const signature = req.headers.get("stripe-signature");

  let event;

  try {
    event = stripe.webhooks.constructEvent(body, signature, webhookSecret);
  } catch (err) {
    console.error("Webhook signature verification failed:", err.message);
    return NextResponse.json({ error: "Invalid signature" }, { status: 400 });
  }

  switch (event.type) {
    case "checkout.session.completed":
      const session = event.data.object;
      console.log("Paiement réussi:", session.id);
      
      // TODO: Enregistrer la commande dans ta base de données
      // TODO: Envoyer un email de confirmation
      // TODO: Débloquer l'accès au produit
      
      break;

    case "payment_intent.payment_failed":
      const paymentIntent = event.data.object;
      console.log("Paiement échoué:", paymentIntent.id);
      
      // TODO: Notifier l'utilisateur de l'échec
      
      break;

    default:
      console.log(`Événement non géré: ${event.type}`);
  }

  return NextResponse.json({ received: true });
}