Traditional PG:  Customer → [PG mediates] → Seller (you) → Handle taxes, refunds, invoices yourself
Paddle:          Customer → [Paddle sells] → Settlement to you → Paddle handles taxes/refunds/invoices

Building global payments yourself:
├── Payment gateway fees:        2.5-3.5%
├── Accountant/Tax advisor:      $400-1500/month
├── Overseas entity setup/maint: $3500+/year
├── Country-by-country VAT filing: $200-700 per country
├── Refund/chargeback staff:     Personnel costs
└── Total: Much more expensive than it seems

With Paddle:
├── Fees:                        5% + $0.50
└── Done. Paddle handles the rest.

[Frontend]                    [Backend]                      [Paddle]
     │                            │                              │
     │── Payment Request ─────────→│                              │
     │                            │── Create Transaction ───────→│
     │                            │←─ Return transactionId ─────│
     │←─ Pass transactionId ──────│                              │
     │                            │                              │
     │── Checkout.open() ────────────────────────────────────────→│
     │←─ Display Payment UI ─────────────────────────────────────│
     │                            │                              │
     │   [Customer completes]      │←─ Webhook: Payment Success ─│
     │                            │── Update DB, Grant Access    │
     │←─ Show Success Screen ─────│                              │

"use client";

import { useEffect } from "react";

const PADDLE_CLIENT_TOKEN = process.env.NEXT_PUBLIC_PADDLE_CLIENT_TOKEN!;

const usePaddleInit = () => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.paddle.com/paddle/v2/paddle.js";
    script.async = true;
    script.onload = () => {
      window.Paddle.Environment.set("sandbox");
      window.Paddle.Initialize({
        token: PADDLE_CLIENT_TOKEN,
        eventCallback: (event) => {
          if (event.name === "checkout.completed") {
            handleCheckoutComplete(event.data.transaction_id);
          }
        },
      });
    };
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);
};

const handleCheckoutComplete = async (transactionId: string) => {
  await fetch("/api/paddle/success", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ transactionId }),
  });
};

export default usePaddleInit;

interface CheckoutButtonProps {
  priceId: string;
  userEmail: string;
}

const CheckoutButton = ({ priceId, userEmail }: CheckoutButtonProps) => {
  const handleClick = async () => {
    const response = await fetch("/api/paddle/create-transaction", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ priceId, email: userEmail }),
    });
    const { transactionId } = await response.json();

    window.Paddle.Checkout.open({
      transactionId,
      customer: { email: userEmail },
    });
  };

  return (
    <button
      onClick={handleClick}
      aria-label="Subscribe and pay"
      tabIndex={0}
      className="rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white
                 transition-colors hover:bg-blue-700"
    >
      Subscribe
    </button>
  );
};

export default CheckoutButton;

import { Paddle, Environment } from "@paddle/paddle-node-sdk";
import { NextRequest, NextResponse } from "next/server";

const paddle = new Paddle(process.env.PADDLE_API_KEY!, {
  environment: Environment.sandbox,
});

export const POST = async (request: NextRequest) => {
  const { priceId, email } = await request.json();

  const transaction = await paddle.transactions.create({
    items: [{ priceId, quantity: 1 }],
    customerEmail: email,
    collectionMode: "automatic",
  });

  return NextResponse.json({ transactionId: transaction.id });
};

import { NextRequest, NextResponse } from "next/server";
import crypto from "crypto";

const WEBHOOK_SECRET = process.env.PADDLE_WEBHOOK_SECRET!;

const verifySignature = (rawBody: string, signature: string): boolean => {
  const hmac = crypto.createHmac("sha256", WEBHOOK_SECRET);
  const digest = hmac.update(rawBody).digest("hex");
  return crypto.timingSafeEqual(
    Buffer.from(signature),
    Buffer.from(digest)
  );
};

export const POST = async (request: NextRequest) => {
  const rawBody = await request.text();
  const signature = request.headers.get("paddle-signature") ?? "";

  if (!verifySignature(rawBody, signature)) {
    return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
  }

  const event = JSON.parse(rawBody);

  switch (event.event_type) {
    case "subscription.activated":
      await activateSubscription(event.data);
      break;
    case "subscription.canceled":
      await cancelSubscription(event.data);
      break;
    case "transaction.completed":
      await completeTransaction(event.data);
      break;
  }

  return NextResponse.json({ received: true });
};

PADDLE_API_KEY=your_server_side_api_key
NEXT_PUBLIC_PADDLE_CLIENT_TOKEN=your_client_side_token
PADDLE_WEBHOOK_SECRET=your_webhook_secret_key

const PRICING_PLANS = {
  starter: {
    monthly: "pri_starter_monthly_xxx",
    yearly: "pri_starter_yearly_xxx",
    features: ["Basic features", "Email support", "5GB storage"],
  },
  pro: {
    monthly: "pri_pro_monthly_xxx",
    yearly: "pri_pro_yearly_xxx",
    features: ["All features", "Priority support", "100GB storage", "API access"],
  },
  enterprise: {
    monthly: "pri_enterprise_monthly_xxx",
    yearly: "pri_enterprise_yearly_xxx",
    features: ["Unlimited", "Dedicated manager", "SLA guarantee", "Custom integration"],
  },
} as const;