Gérer les commandes et intégrer Stripe pour le paiement

1
import Stripe from "stripe";
2

3
export const stripe = new Stripe(
4
  process.env.STRIPE_SECRET_KEY!, // ^? clé secrète stockée en env
5
  { apiVersion: "2022-11-15" }
6
);

1
import type { ActionFunction } from "@remix-run/node";
2
import { redirect } from "@remix-run/node";
3
import { stripe } from "~/utils/stripe.server";
4
import { createOrder } from "~/models/order.server";
5

6
export const action: ActionFunction = async ({ request }) => {
7
  const { products, email } = await request.json();
8

9
  // 1. Création de la commande dans Strapi
10
  const { id: orderId } = await createOrder({ products, email });
11

12
  // 2. Construction des line_items Stripe
13
  const line_items = products.map((p) => ({
14
    price_data: {
15
      currency: "usd",
16
      unit_amount: p.price * 100,
17
      product_data: { name: p.name },
18
    },
19
    quantity: p.quantity,
20
  }));
21

22
  // 3. Création de la session Stripe
23
  const session = await stripe.checkout.sessions.create({
24
    payment_method_types: ["card"],
25
    line_items,
26
    mode: "payment",
27
    success_url: `${request.headers.get("origin")}/order/${orderId}` +
28
                 "?session_id={CHECKOUT_SESSION_ID}",
29
    cancel_url: `${request.headers.get("origin")}/cart`,
30
    metadata: { orderId: String(orderId) }, // pour le webhook
31
  });
32

33
  return redirect(session.url!, 303);
34
};

1
import { json } from "@remix-run/node";
2
import { stripe } from "~/utils/stripe.server";
3
import { updateOrderStatus } from "~/models/order.server";
4

5
export const loader = async ({ request }) => {
6
  const payload = await request.text();
7
  const sig = request.headers.get("stripe-signature")!;
8

9
  let event: Stripe.Event;
10
  try {
11
    event = stripe.webhooks.constructEvent(
12
      payload,
13
      sig,
14
      process.env.STRIPE_WEBHOOK_SECRET!
15
    );
16
  } catch {
17
    return json({ error: "Invalid signature" }, { status: 400 });
18
  }
19

20
  if (event.type === "checkout.session.completed") {
21
    const session = event.data.object as Stripe.Checkout.Session;
22
    const orderId = session.metadata?.orderId!;
23
    await updateOrderStatus(orderId, "paid");
24
  }
25

26
  return json({ received: true });
27
};

1
import { LoaderFunction, useLoaderData } from "@remix-run/node";
2
import { getOrderById } from "~/models/order.server";
3

4
export const loader: LoaderFunction = async ({ params }) => {
5
  const order = await getOrderById({ id: params.orderId! });
6
  return { order };
7
};
8

9
export default function OrderDetail() {
10
  const { order } = useLoaderData<typeof loader>();
11
  return (
12
    <main>
13
      <h2>Merci pour ta commande ! 🎉</h2>
14
      <p>Statut : {order.orderStatus}</p>
15
      <ul>
16
        {order.lines.map((line) => (
17
          <li key={line.produit.id}>
18
            {line.quantity}× {line.produit.name} – ${(line.price / 100).toFixed(2)}
19
          </li>
20
        ))}
21
      </ul>
22
      <p>Total : ${(order.totalPrice / 100).toFixed(2)}</p>
23
    </main>
24
  );
25
}