Paddle checkout in Next.js

Use it in Next.js

app/pricing/page.tsx

"use client";
import { useEffect, useState } from "react";
import { initializePaddle, type Paddle } from "@paddle/paddle-js";
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 Paddle price per plan and billing period (Catalog > Products in the Paddle dashboard).
const PRICES: Record<string, { monthly: string; yearly: string }> = {
  starter: { monthly: "pri_starter_monthly", yearly: "pri_starter_yearly" },
  pro: { monthly: "pri_pro_monthly", yearly: "pri_pro_yearly" },
};

export default function PricingPage() {
  const [paddle, setPaddle] = useState<Paddle>();

  useEffect(() => {
    initializePaddle({
      environment: process.env.NODE_ENV === "production" ? "production" : "sandbox",
      token: process.env.NEXT_PUBLIC_PADDLE_CLIENT_TOKEN!,
    }).then(setPaddle);
  }, []);

  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 = PRICES[plan.id];
          if (!paddle || !ids) return;
          paddle.Checkout.open({
            items: [{ priceId: yearly ? ids.yearly : ids.monthly, quantity: 1 }],
            customData: { plan: plan.id }, // comes back on the transaction and in webhooks
          });
        }}
      />
    </main>
  );
}