Payments with Stripe Checkout

pnpm add stripe

// src/server/stripe.server.ts
import { env } from "lumiose";
import Stripe from "stripe";

let client: Stripe | undefined;

export function stripe(): Stripe {
  const key = env("STRIPE_SECRET_KEY");
  if (key === undefined) throw new Error("STRIPE_SECRET_KEY is not set.");
  return (client ??= new Stripe(key));
}

/** What the store sells: the form posts a plan name, never a price. */
export const PLANS = {
  starter: { name: "Starter", price: "price_starter_monthly" },
  team: { name: "Team", price: "price_team_monthly" },
} as const;

export type Plan = keyof typeof PLANS;

export function isPlan(value: unknown): value is Plan {
  return typeof value === "string" && Object.hasOwn(PLANS, value);
}

// src/routes/pricing/page.stsx
import { Title, actionData, fail, redirect, type ActionContext } from "lumiose";
import { PLANS, isPlan, stripe } from "../../server/stripe.server.ts";

export const mode = "server";

export const actions = {
  async checkout(ctx: ActionContext<"/pricing">) {
    const plan = (await ctx.formData()).get("plan");
    if (!isPlan(plan)) return fail(400, { error: "Pick a plan." });

    const session = await stripe().checkout.sessions.create({
      mode: "subscription",
      line_items: [{ price: PLANS[plan].price, quantity: 1 }],
      success_url: new URL("/checkout/success?session_id={CHECKOUT_SESSION_ID}", ctx.url).href,
      cancel_url: new URL("/pricing", ctx.url).href,
      // Ties the payment to your user in the webhook.
      client_reference_id: ctx.locals.userId ?? undefined,
      metadata: { plan },
    });
    if (session.url === null) return fail(502, { error: "Checkout is not available." });
    redirect(session.url, 303);
  },
};

export default function Pricing() {
  return (
    <main>
      <Title>Pricing</Title>
      <h1>Pricing</h1>
      <form method="post" action="?/checkout">
        {Object.entries(PLANS).map(([id, plan]) => (
          <button name="plan" value={id}>
            Subscribe to {plan.name}
          </button>
        ))}
      </form>
      <p class="error">{actionData<typeof actions>()?.error}</p>
    </main>
  );
}

// src/routes/checkout/success/page.tsx
import { Title, notFound, url } from "lumiose";
import { stripe } from "../../../server/stripe.server.ts";

export const mode = "server";

export default async function CheckoutSuccess() {
  const id = url().searchParams.get("session_id") ?? notFound();
  const session = await stripe().checkout.sessions.retrieve(id);
  const paid =
    session.payment_status === "paid" || session.payment_status === "no_payment_required";
  return (
    <main>
      <Title>{paid ? "Thank you" : "Payment pending"}</Title>
      <h1>{paid ? "Thank you!" : "Your payment is being processed"}</h1>
      <p>A receipt is on its way to {session.customer_details?.email ?? "your email"}.</p>
    </main>
  );
}

// src/routes/api/stripe/webhook/route.ts
import { env, type Endpoint } from "lumiose";
import type Stripe from "stripe";
import { stripe } from "../../../../server/stripe.server.ts";

export const mode = "server";

export const POST: Endpoint<"/api/stripe/webhook"> = async ({ request, platform }) => {
  const signature = request.headers.get("stripe-signature");
  const secret = env("STRIPE_WEBHOOK_SECRET");
  if (signature === null || secret === undefined) return new Response(null, { status: 400 });

  let event: Stripe.Event;
  try {
    event = await stripe().webhooks.constructEventAsync(await request.text(), signature, secret);
  } catch {
    return new Response("Invalid signature", { status: 400 });
  }

  switch (event.type) {
    case "checkout.session.completed":
    case "checkout.session.async_payment_succeeded": {
      const session = event.data.object;
      if (session.payment_status !== "unpaid") {
        // Slow work (emails, provisioning) may finish after the response.
        platform.waitUntil(fulfill(event.id, session));
      }
      break;
    }
    case "checkout.session.async_payment_failed":
      // Tell the customer the delayed payment failed.
      break;
  }
  return new Response(null, { status: 200 });
};

/** Grants what was bought, once per event id. */
async function fulfill(eventId: string, session: Stripe.Checkout.Session): Promise<void> {
  // if (await db.events.seen(eventId)) return;
  // await db.subscriptions.activate(session.client_reference_id, session.metadata?.plan);
  void [eventId, session];
}

stripe listen --forward-to localhost:5173/api/stripe/webhook
stripe trigger checkout.session.completed