Polar checkout in Next.js

Use it in Next.js

app/pricing/page.tsx

"use client";
import PricingSwitch, { type Plan } from "qodesign-free/pricing-switch";

const plans: Plan[] = [
  { id: "starter", name: "Starter", description: "For side projects.", monthly: 9, yearly: 7, cta: "Start Starter", features: ["1 project", "Email support"] },
  { id: "pro", name: "Pro", description: "For a product with paying users.", monthly: 29, yearly: 23, cta: "Start Pro", features: ["10 projects", "Priority support"], featured: true },
];

// One Polar product per plan and billing period, made in your Polar dashboard (sandbox first).
const POLAR_PRODUCTS: Record<string, { monthly: string; yearly: string }> = {
  starter: { monthly: "POLAR_PRODUCT_ID_STARTER_MONTHLY", yearly: "POLAR_PRODUCT_ID_STARTER_YEARLY" },
  pro: { monthly: "POLAR_PRODUCT_ID_PRO_MONTHLY", yearly: "POLAR_PRODUCT_ID_PRO_YEARLY" },
};

export default function PricingPage() {
  return (
    <main className="mx-auto max-w-4xl px-4 py-16">
      <PricingSwitch
        plans={plans}
        header={<h1 className="text-3xl font-semibold">Pricing</h1>}
        yearlyBadge="2 months free"
        onSelect={(plan, yearly) => {
          const ids = POLAR_PRODUCTS[plan.id];
          if (!ids) return;
          window.location.assign(`/checkout?products=${yearly ? ids.yearly : ids.monthly}`);
        }}
      />
    </main>
  );
}

import { Checkout } from "@polar-sh/nextjs";

// GET /checkout?products=<id> creates a Polar checkout and redirects the browser to it.
export const GET = Checkout({
  accessToken: process.env.POLAR_ACCESS_TOKEN!,
  successUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/welcome`, // Polar appends checkout_id={CHECKOUT_ID}
  environment: process.env.NODE_ENV === "production" ? "production" : "sandbox",
});