Hosted Checkout

const STORE_ID = process.env.PANDABASE_STORE_ID!;

app.post("/buy", async (req, res) => {
  const response = await fetch(
    `https://api.pandabase.io/v2/stores/${STORE_ID}/checkouts`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        items: [{ product_id: "prd_xxx", quantity: 1 }],
        return_url: "https://yoursite.com/thank-you",
      }),
    },
  );

  const { data } = await response.json();
  res.redirect(data.checkout_url);
});

<script src="https://secure.pandabase.io/v2/sdk.js"></script>

<button id="pay">Checkout</button>

<script src="https://secure.pandabase.io/v2/sdk.js"></script>
<script>
  const checkout = Pandabase.checkout({
    storeId: "shp_abc123",
    sessionId: "cs_xyz789",
    on: {
      payment_success: (e) => {
        window.location.href = e.returnUrl ?? "/thank-you";
      },
    },
  });

  document.getElementById("pay").addEventListener("click", () => checkout.open());
</script>

const checkout = Pandabase.checkout({
  storeId: "shp_abc123",
  sessionId: "cs_xyz789",
  mode: "overlay", // or "modal" | "drawer"
});

checkout.open();
// later: checkout.close();

<div id="checkout"></div>

<script src="https://secure.pandabase.io/v2/sdk.js"></script>
<script>
  Pandabase.checkout({
    storeId: "shp_abc123",
    sessionId: "cs_xyz789",
    mode: "inline",
    container: "#checkout", // CSS selector or an HTMLElement
  });
</script>

Pandabase.checkout({
  storeId,
  sessionId,
  theme: "auto", // "light" | "dark" | "auto" (default)
  appearance: {
    accent: "#6d28d9",
    accentForeground: "#ffffff",
    background: "#ffffff",
    foreground: "#0a0a0a",
    muted: "#f4f4f5",
    border: "#e5e5e5",
    summaryBackground: "#f5f3ff",
    radius: 10,
    fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
    summaryPosition: "left", // overlay only: "left" | "right" | "top"

    // Optional: ship a distinct dark palette, applied when the resolved
    // scheme is dark (system preference, `theme: "dark"`, or colorScheme).
    dark: {
      background: "#0b0b12",
      foreground: "#e0e7ff",
      muted: "#17171f",
      border: "#262633",
      summaryBackground: "#101019",
    },
  },
});

Pandabase.checkout({
  storeId,
  sessionId,
  on: {
    payment_success: (e) => {
      window.location.href = e.returnUrl ?? "/thank-you";
    },
  },
});

Pandabase.checkout(options) → instance

Pandabase.checkout({
  storeId,
  sessionId,
  on: {
    loaded: (e) => console.log("loaded", e.sessionId),
    ready: () => console.log("ready"),
    payment_success: (e) => (window.location.href = e.returnUrl ?? "/done"),
    payment_processing: () => console.log("processing"),
    payment_failed: (e) => console.warn("failed:", e.error),
    error: (e) => console.error(e.error),
    close: () => console.log("closed"),
  },
});

<!doctype html>
<html>
  <body>
    <button id="buy">Buy now</button>

    <script src="https://secure.pandabase.io/v2/sdk.js"></script>
    <script>
      const checkout = Pandabase.checkout({
        storeId: "shp_abc123",
        sessionId: "cs_xyz789",
        mode: "overlay",
        theme: "auto",
        locale: "en",
        appearance: {
          accent: "#0284c7",
          radius: 10,
          summaryPosition: "left",
          dark: { background: "#071726", foreground: "#e0f2fe" },
        },
        on: {
          payment_success: (e) => {
            window.location.href = e.returnUrl ?? "/thank-you";
          },
          payment_failed: (e) => alert(e.error ?? "Payment failed"),
          error: (e) => console.error(e.error),
        },
      });

      document.getElementById("buy").addEventListener("click", () => checkout.open());
    </script>
  </body>
</html>

// hooks/use-checkout.ts
import { useEffect, useRef, useCallback } from "react";

declare global {
  interface Window {
    Pandabase?: {
      checkout: (opts: PandabaseCheckoutOptions) => PandabaseCheckout;
    };
  }
}

type CheckoutMode = "modal" | "drawer" | "overlay" | "inline";

interface PandabaseCheckoutOptions {
  storeId: string;
  sessionId: string;
  mode?: CheckoutMode;
  container?: string | HTMLElement;
  theme?: "light" | "dark" | "auto";
  appearance?: Record<string, unknown>;
  locale?: string;
  on?: {
    loaded?: (e: { sessionId: string }) => void;
    ready?: () => void;
    payment_success?: (e: { orderId?: string; returnUrl?: string }) => void;
    payment_processing?: () => void;
    payment_failed?: (e: { error?: string }) => void;
    error?: (e: { error: unknown }) => void;
    close?: () => void;
  };
}

interface PandabaseCheckout {
  open: () => void;
  close: () => void;
  destroy: () => void;
}

const SDK_URL = "https://secure.pandabase.io/v2/sdk.js";

let sdkLoaded = false;
let sdkPromise: Promise<void> | null = null;

function loadSdk(): Promise<void> {
  if (sdkLoaded) return Promise.resolve();
  if (sdkPromise) return sdkPromise;

  sdkPromise = new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = SDK_URL;
    script.onload = () => {
      sdkLoaded = true;
      resolve();
    };
    script.onerror = () => reject(new Error("Failed to load Pandabase SDK"));
    document.head.appendChild(script);
  });

  return sdkPromise;
}

export function useCheckout() {
  const checkoutRef = useRef<PandabaseCheckout | null>(null);

  const open = useCallback(async (opts: PandabaseCheckoutOptions) => {
    await loadSdk();

    if (checkoutRef.current) {
      checkoutRef.current.destroy();
    }

    checkoutRef.current = window.Pandabase!.checkout({
      mode: "modal",
      theme: "auto",
      ...opts,
    });

    checkoutRef.current.open();
  }, []);

  const close = useCallback(() => {
    checkoutRef.current?.close();
  }, []);

  useEffect(() => {
    return () => {
      checkoutRef.current?.destroy();
    };
  }, []);

  return { open, close };
}

// components/buy-button.tsx
import { useState } from "react";
import { useCheckout } from "@/hooks/use-checkout";

export function BuyButton() {
  const [loading, setLoading] = useState(false);
  const checkout = useCheckout();

  async function handleClick() {
    setLoading(true);

    try {
      const res = await fetch("/api/create-checkout", { method: "POST" });
      const { storeId, sessionId } = await res.json();

      checkout.open({
        storeId,
        sessionId,
        mode: "overlay",
        on: {
          payment_success: (e) => {
            window.location.href = e.returnUrl ?? "/thank-you";
          },
          payment_failed: (e) => console.error("failed:", e.error),
        },
      });
    } finally {
      setLoading(false);
    }
  }

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? "Loading..." : "Buy Premium Plan — $29.99"}
    </button>
  );
}

import { useRef, useEffect } from "react";
import { useCheckout } from "@/hooks/use-checkout";

interface InlineCheckoutProps {
  storeId: string;
  sessionId: string;
}

export function InlineCheckout({ storeId, sessionId }: InlineCheckoutProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const checkout = useCheckout();

  useEffect(() => {
    if (!containerRef.current) return;

    checkout.open({
      storeId,
      sessionId,
      mode: "inline",
      container: containerRef.current,
      on: {
        payment_success: (e) => console.log("paid:", e.orderId),
      },
    });
  }, [storeId, sessionId]);

  return <div ref={containerRef} />;
}

{
  "items": [{ "product_id": "prd_xxx", "quantity": 1 }],
  "return_url": "https://yoursite.com/thank-you"
}