diff --git a/app/about/Pricing.tsx b/app/about/Pricing.tsx
index 097340b3..40a2ca35 100644
--- a/app/about/Pricing.tsx
+++ b/app/about/Pricing.tsx
@@ -2,6 +2,7 @@
 
 import { ButtonPrimary } from "components/Buttons";
 import { ToggleGroup } from "components/ToggleGroup";
+import Link from "next/link";
 import { useState } from "react";
 
 export const Pricing = () => {
@@ -84,12 +85,17 @@ export const Pricing = () => {
             <p className="text-[1rem]! text-center text-tertiary text-snug pb-3">
               Serious publishers, serious tools
             </p>
-            <ButtonPrimary
-              fullWidth
-              className=" bg-[#57822B]! border-[#57822B]! hover:outline-[#57822B]! text-white! text-[1rem] sm:text-[1.25rem]!"
+            <Link
+              href={`/checkout/pro?cadence=${cadence === "yearly" ? "year" : "month"}`}
+              className="no-underline!"
             >
-              Get Pro
-            </ButtonPrimary>
+              <ButtonPrimary
+                fullWidth
+                className=" bg-[#57822B]! border-[#57822B]! hover:outline-[#57822B]! text-white! text-[1rem] sm:text-[1.25rem]!"
+              >
+                Get Pro
+              </ButtonPrimary>
+            </Link>
 
             <hr className="border-border-light" />
 
diff --git a/app/checkout/pro/ProCheckoutLogin.tsx b/app/checkout/pro/ProCheckoutLogin.tsx
new file mode 100644
index 00000000..2bda0aef
--- /dev/null
+++ b/app/checkout/pro/ProCheckoutLogin.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+import { LoginContent } from "components/LoginButton";
+
+export function ProCheckoutLogin({ redirectRoute }: { redirectRoute: string }) {
+  return (
+    <LoginContent
+      pageView
+      redirectRoute={redirectRoute}
+      onSuccess={() => {
+        window.location.href = redirectRoute;
+      }}
+    />
+  );
+}
diff --git a/app/checkout/pro/ProCheckoutTrigger.tsx b/app/checkout/pro/ProCheckoutTrigger.tsx
new file mode 100644
index 00000000..3ca19157
--- /dev/null
+++ b/app/checkout/pro/ProCheckoutTrigger.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createCheckoutSession } from "actions/createCheckoutSession";
+import { DotLoader } from "components/utils/DotLoader";
+
+export function ProCheckoutTrigger({
+  cadence,
+}: {
+  cadence: "month" | "year";
+}) {
+  const [error, setError] = useState<string | null>(null);
+  const started = useRef(false);
+
+  useEffect(() => {
+    if (started.current) return;
+    started.current = true;
+    (async () => {
+      const result = await createCheckoutSession(cadence, "/home");
+      if (result.ok) {
+        window.location.href = result.value.url;
+      } else {
+        setError(result.error);
+      }
+    })();
+  }, [cadence]);
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 text-center max-w-sm w-full mx-auto">
+      {error ? (
+        <>
+          <h3>We couldn't start checkout</h3>
+          <div className="text-secondary leading-snug">{error}</div>
+        </>
+      ) : (
+        <>
+          <DotLoader />
+          <div className="text-secondary leading-snug">
+            Redirecting you to Stripe checkout…
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/app/checkout/pro/page.tsx b/app/checkout/pro/page.tsx
new file mode 100644
index 00000000..272c7be8
--- /dev/null
+++ b/app/checkout/pro/page.tsx
@@ -0,0 +1,41 @@
+import { redirect } from "next/navigation";
+import { getIdentityData } from "actions/getIdentityData";
+import { ProCheckoutLogin } from "./ProCheckoutLogin";
+import { ProCheckoutTrigger } from "./ProCheckoutTrigger";
+
+export const metadata = {
+  title: "Get Leaflet Pro",
+};
+
+export default async function ProCheckoutPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ cadence?: string }>;
+}) {
+  const { cadence: rawCadence } = await searchParams;
+  const cadence: "month" | "year" = rawCadence === "month" ? "month" : "year";
+
+  const identity = await getIdentityData();
+
+  if (identity?.entitlements?.publication_analytics) {
+    redirect("/home?upgrade=already-pro");
+  }
+
+  const redirectRoute = `/checkout/pro?cadence=${cadence}`;
+
+  return (
+    <div className="proCheckoutPage relative w-full min-h-[100dvh] flex items-center justify-center bg-bg-leaflet p-4">
+      {!identity ? (
+        <div className="flex flex-col items-center gap-3 max-w-sm w-full text-center">
+          <h2>Log in to get Leaflet Pro</h2>
+          <div className="text-secondary leading-snug">
+            You'll be redirected to checkout after you sign in.
+          </div>
+          <ProCheckoutLogin redirectRoute={redirectRoute} />
+        </div>
+      ) : (
+        <ProCheckoutTrigger cadence={cadence} />
+      )}
+    </div>
+  );
+}