Gestion des paiements avec Stripe Checkout et React Router 7

1
import { Stripe } from "stripe";
2

3
if (!process.env.STRIPE_SECRET_KEY) {
4
  throw new Error("STRIPE_SECRET_KEY environment variable is required");
5
}
6

7
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
8
  apiVersion: "2025-07-30.basil",
9
});

1
export async function createStripeCheckoutSession({
2
  order,
3
  user,
4
  guestEmail,
5
  successUrl,
6
  cancelUrl,
7
}: {
8
  order: Awaited<ReturnType<typeof createOrder>>;
9
  user?: Awaited<ReturnType<typeof getOptionalUser>>;
10
  guestEmail?: string;
11
  successUrl: string;
12
  cancelUrl: string;
13
}) {
14
  // ① transformer chaque OrderItem en line_item Stripe
15
  const lineItems = await Promise.all(
16
    order.items.map(async (it) => {
17
      const product = await prisma.product.findUnique({
18
        where: { id: it.productId! },
19
        select: { stripePriceId: true },
20
      });
21
      if (!product?.stripePriceId) {
22
        throw new Error(`Product ${it.productName} missing stripePriceId`);
23
      }
24
      return { price: product.stripePriceId, quantity: it.quantity };
25
    }),
26
  );
27

28
  // ② créer la session
29
  const session = await stripe.checkout.sessions.create({
30
    payment_method_types: ["card"],
31
    line_items: lineItems,
32
    mode: "payment",
33
    success_url: successUrl,
34
    cancel_url: cancelUrl,
35
    billing_address_collection: "required",
36
    shipping_address_collection: {
37
      allowed_countries: ["FR", "BE", "LU", "CH", "IT", "ES", "DE", "NL"],
38
    },
39
    customer: user?.stripeCustomerId ?? undefined,
40
    customer_creation: user?.stripeCustomerId ? undefined : "always",
41
    customer_email: user?.stripeCustomerId ? undefined : user?.email || guestEmail,
42
    metadata: {
43
      orderId: order.id,
44
      userId: user?.id ?? "",
45
      isGuest: user ? "false" : "true",
46
    },
47
  });
48

49
  // ③ sauvegarder l’ID de session
50
  await prisma.order.update({
51
    where: { id: order.id },
52
    data: {
53
      stripeCheckoutSession: session.id,
54
      paymentStatus: "PENDING",
55
    },
56
  });
57

58
  return session;
59
}

1
const session = await createStripeCheckoutSession({
2
  order,
3
  user,
4
  guestEmail: submission.value.email,
5
  successUrl: `${request.url.replace(/\/cart.*/,"")}/orders/${order.id}?success=true`,
6
  cancelUrl: `${request.url.replace(/\/cart.*/,"")}/cart`,
7
});
8
return redirect(session.url!, { status: 303 });

1
const WEBHOOK_SECRET = process.env.STRIPE_WEBHOOK_SECRET;
2
…
3
case "checkout.session.completed":
4
  await handleCheckoutSessionCompleted(event.data.object);
5
  break;

1
async function handleCheckoutSessionCompleted(
2
  session: Stripe.Checkout.Session,
3
) {
4
  const { orderId, userId, isGuest } = session.metadata || {};
5
  if (!orderId) return;
6

7
  await prisma.order.update({
8
    where: { id: orderId },
9
    data: {
10
      orderStatus: "PAID",
11
      paymentStatus: "PAID",
12
      stripePaymentIntentId: session.payment_intent as string,
13
      billingAddress: session.customer_details
14
        ? {
15
            name: session.customer_details.name,
16
            email: session.customer_details.email,
17
            address: session.customer_details.address,
18
          }
19
        : null,
20
    },
21
  });
22

23
  if (session.customer) {
24
    await linkStripeCustomer({
25
      stripeCustomerId: session.customer as string,
26
      userId: isGuest === "false" ? userId : undefined,
27
      email: session.customer_details?.email ?? undefined,
28
      orderId,
29
    });
30
  }
31
}

1
model User {
2
  …
3
  stripeCustomerId String? @unique
4
}

1
STRIPE_SECRET_KEY=sk_test_…
2
STRIPE_WEBHOOK_SECRET=whsec_xxx

1
stripe listen --forward-to localhost:5173/api/stripe/webhooks

1
useEffect(() => {
2
  if (searchParams.get("success") === "true") {
3
    clearCart({ disableAuthenticatedClearCart: true });
4
  }
5
}, [searchParams, clearCart]);