Enable payments

/// <reference path="../types.d.ts" />

cronAdd("stripe-products", "*/2 * * * *", () => {
  const utils = require(`${__hooks}/utils.js`);
  utils.triggerJob("/api/stripe/sync/products");
});

cronAdd("stripe-prices", "*/2 * * * *", () => {
  const utils = require(`${__hooks}/utils.js`);
  utils.triggerJob("/api/stripe/sync/prices");
});

cronAdd("stripe-customers", "* * * * *", () => {
  const utils = require(`${__hooks}/utils.js`);
  utils.triggerJob("/api/stripe/sync/customers");
});

/// <reference path="../types.d.ts" />

module.exports = {
  triggerJob: (jobUrl) => {
    $http.send({
      method: "POST",
      url: `${$app.settings().meta.appURL}${jobUrl}`,
      headers: {
        Authorization: `Bearer ${$os.getenv("INTERNAL_JOB_SECRET")}`,
      },
    });
  },
};

<script lang="ts">
  import type { Stripe } from "@stripe/stripe-js";
  import { Button } from "$lib/components/ui/button";
  import * as Dialog from "$lib/components/ui/dialog";
  import { toast } from "svelte-sonner";
  import { page } from "$app/state";
  import { invalidate } from "$app/navigation";

  interface Props {
    stripe: Stripe | null;
    open: boolean;
    amount: number;
    currency: string;
    brand?: string;
    last4?: string;
    clientSecret?: string;
    onopenchange: (open: boolean) => void;
    onsuccess: () => void;
  }

  let {
    stripe,
    open = $bindable(),
    amount,
    currency,
    brand,
    last4,
    clientSecret,
    onopenchange,
    onsuccess,
  }: Props = $props();

  const brandNames = {
    amex: "American Express",
    cartes_bancaires: "Cartes Bancaires",
    diners: "Diners",
    discover: "Discover",
    eftpos_au: "Eftpos Au",
    jcb: "Jcb",
    link: "Link",
    mastercard: "Mastercard",
    unionpay: "Unionpay",
    visa: "Visa",
    unknown: "Unknown",
  };

  let isProcessing = $state(false);

  let amountFormatted = $derived.by(() => {
    let formatter = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: currency,
    });
    return formatter.format(amount / 100);
  });

  const handleOpenChangeComplete = (isOpen: boolean) => {
    if (!isOpen) {
      resetDialog();
    }
    onopenchange(isOpen);
  };

  function resetDialog() {
    open = false;
    isProcessing = false;
  }

  async function handlePaymentMethod() {
    if (!stripe || !clientSecret) return;

    isProcessing = true;

    try {
      const { error: confirmError } = await stripe.confirmPayment({
        clientSecret,
        confirmParams: {
          return_url: page.url.toString(),
        },
        redirect: "if_required",
      });

      if (confirmError) {
        toast.error(confirmError.message || "Failed to pay for your purchase");
        return;
      }

      await invalidate("app:billing");
      toast.success("Payment successful");
      onsuccess();
      resetDialog();
    } catch (err) {
      console.error("Error paying for your purchase:", err);
      toast.error("Failed to pay for your purchase");
    } finally {
      isProcessing = false;
    }
  }
</script>

<Dialog.Root bind:open onOpenChangeComplete={handleOpenChangeComplete}>
  <Dialog.Content class="sm:max-w-[500px]">
    <Dialog.Header>
      <Dialog.Title>Confirm payment</Dialog.Title>
      <Dialog.Description>
        Are you sure you want to pay {amountFormatted} with your
        {brandNames[brand as keyof typeof brandNames]}
        credit card ending in **** {last4}?
      </Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>
      <Button variant="outline" onclick={resetDialog} disabled={isProcessing}
        >Cancel</Button
      >
      <Button onclick={handlePaymentMethod} disabled={isProcessing}>
        {isProcessing ? "Processing..." : "Pay Now"}
      </Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import PaymentDialog from "$lib/components/payments/payment-dialog.svelte";
  import ConfirmDialog from "$lib/components/payments/confirm-dialog.svelte";
  import { useStripe } from "$lib/components/payments/use-stripe.svelte";
  import { usePaymentIntent } from "$lib/components/payments/use-payment-intent.svelte";
  import type { ButtonProps } from "$lib/components/ui/button";

  interface Props {
    priceId: string;
    user?: { email: string; name: string } | null;
    disabled?: boolean;
    isProcessing?: boolean;
    label?: string;
    processingLabel?: string;
    onsuccess?: () => void;
  }

  let {
    priceId,
    user,
    disabled = false,
    isProcessing = false,
    label = "Purchase",
    processingLabel = "Processing...",
    onsuccess,
    ...rest
  }: Props & ButtonProps = $props();

  const stripeManager = useStripe();
  const paymentIntentManager = usePaymentIntent();

  let mode = $state<"payment" | "confirm">("payment");
  let showDialog = $state(false);
  let amount = $state<number>(0);
  let currency = $state<string>("usd");
  let clientSecret = $state<string>();
  let brand = $state<string>();
  let last4 = $state<string>();

  async function handleBuyClick() {
    const result = await paymentIntentManager.fetchPaymentIntent({
      priceId,
    });

    if (!result) return;

    if (result.type === "confirm") {
      mode = "confirm";
      brand = result.brand;
      last4 = result.last4;
    } else if (result.type === "payment") {
      mode = "payment";
    }

    amount = result.amount || 0;
    currency = result.currency || "usd";
    clientSecret = result.clientSecret;
    showDialog = true;
  }

  function handleDialogOpenChange(open: boolean) {
    showDialog = open;
  }

  function handlePaymentSuccess() {
    onsuccess?.();
  }
</script>

<Button disabled={disabled || isProcessing} onclick={handleBuyClick} {...rest}>
  {#if isProcessing}
    {processingLabel}
  {:else}
    {label}
  {/if}
</Button>

{#if mode === "confirm"}
  <ConfirmDialog
    bind:open={showDialog}
    stripe={stripeManager.stripe}
    {amount}
    {currency}
    {brand}
    {last4}
    {clientSecret}
    onopenchange={handleDialogOpenChange}
    onsuccess={handlePaymentSuccess}
  />
{:else if mode === "payment"}
  <PaymentDialog
    bind:open={showDialog}
    stripe={stripeManager.stripe}
    {amount}
    {currency}
    {clientSecret}
    {user}
    onopenchange={handleDialogOpenChange}
    onsuccess={handlePaymentSuccess}
  />
{/if}

<script lang="ts">
  import type { Stripe, StripeElements } from "@stripe/stripe-js";
  import { Button } from "$lib/components/ui/button";
  import * as Dialog from "$lib/components/ui/dialog";
  import { Input } from "$lib/components/ui/input";
  import { Label } from "$lib/components/ui/label";
  import { toast } from "svelte-sonner";
  import { page } from "$app/state";
  import { invalidate } from "$app/navigation";
  import StripePaymentForm from "./stripe-payment-form.svelte";

  interface Props {
    stripe: Stripe | null;
    open: boolean;
    amount: number;
    currency: string;
    clientSecret?: string;
    user?: { email: string; name: string } | null;
    onopenchange: (open: boolean) => void;
    onsuccess: () => void;
  }

  let {
    stripe,
    open = $bindable(),
    amount,
    currency,
    clientSecret,
    user = null,
    onopenchange,
    onsuccess,
  }: Props = $props();

  let isProcessing = $state(false);
  let cardComplete = $state(false);
  let savePaymentMethod = $state(false);
  let email = $state<string>();
  let formRef = $state<{
    getElements: () => StripeElements | null;
  }>();

  let amountFormatted = $derived.by(() => {
    let formatter = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: currency,
    });
    return formatter.format(amount / 100);
  });

  const handleOpenChangeComplete = (isOpen: boolean) => {
    if (!isOpen) {
      resetDialog();
    }
    onopenchange(isOpen);
  };

  function resetDialog() {
    open = false;
    isProcessing = false;
    cardComplete = false;
  }

  function handleCardChange(complete: boolean) {
    cardComplete = complete;
  }

  async function handlePaymentMethod() {
    if (!stripe || !formRef || !cardComplete || !clientSecret) return;

    const elements = formRef.getElements();
    if (!elements) return;

    isProcessing = true;

    try {
      const { error: submitError } = await elements.submit();
      if (submitError) {
        toast.error(submitError.message || "Failed to pay for your purchase");
        return;
      }

      const { error: confirmError } = await stripe.confirmPayment({
        elements,
        clientSecret,
        confirmParams: {
          return_url: page.url.toString(),
          payment_method_data: {
            billing_details: {
              email: email || user?.email,
            },
            allow_redisplay: savePaymentMethod ? "always" : "unspecified",
          },
        },
        redirect: "if_required",
      });

      if (confirmError) {
        toast.error(confirmError.message || "Failed to pay for your purchase");
        return;
      }

      await invalidate("app:billing");
      toast.success("Payment successful");
      onsuccess();
      resetDialog();
    } catch (err) {
      console.error("Error paying for your purchase:", err);
      toast.error("Failed to pay for your purchase");
    } finally {
      isProcessing = false;
    }
  }
</script>

<Dialog.Root bind:open onOpenChangeComplete={handleOpenChangeComplete}>
  <Dialog.Content class="sm:max-w-[500px]">
    <Dialog.Header>
      <Dialog.Title>{amountFormatted}</Dialog.Title>
      <Dialog.Description
        >Enter your card details to pay for your purchase.</Dialog.Description
      >
    </Dialog.Header>
    {#if !user}
      <div class="space-y-2">
        <Label for="email">Email</Label>
        <Input type="email" bind:value={email} />
      </div>
    {/if}
    <div>
      {#if stripe && open}
        <StripePaymentForm
          bind:this={formRef}
          mode="payment"
          {stripe}
          {amount}
          {currency}
          {savePaymentMethod}
          {user}
          onchange={handleCardChange}
        />
      {/if}
    </div>
    {#if user}
      <div class="flex items-center gap-2">
        <input
          type="checkbox"
          id="savePaymentMethod"
          bind:checked={savePaymentMethod}
        />
        <label for="savePaymentMethod" class="text-sm text-muted-foreground">
          Save payment method for future purchases
        </label>
      </div>
    {/if}
    <Dialog.Footer>
      <Button variant="outline" onclick={resetDialog} disabled={isProcessing}
        >Cancel</Button
      >
      <Button
        onclick={handlePaymentMethod}
        disabled={!cardComplete || isProcessing}
      >
        {isProcessing ? "Processing..." : "Pay Now"}
      </Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import SetupDialog from "$lib/components/payments/setup-dialog.svelte";
  import { useStripe } from "$lib/components/payments/use-stripe.svelte";
  import { usePaymentIntent } from "$lib/components/payments/use-payment-intent.svelte";

  interface Props {
    disabled?: boolean;
    isProcessing?: boolean;
    label?: string;
    processingLabel?: string;
    onsuccess?: () => void;
  }

  let {
    disabled = false,
    isProcessing = false,
    label,
    processingLabel,
    onsuccess,
  }: Props = $props();

  const stripeManager = useStripe();
  const paymentIntentManager = usePaymentIntent();

  let showDialog = $state(false);
  let clientSecret = $state<string>();

  async function handleSetupClick() {
    const result = await paymentIntentManager.fetchSetupIntent();

    if (!result) return;

    clientSecret = result.clientSecret;
    showDialog = true;
  }

  function handleDialogOpenChange(open: boolean) {
    showDialog = open;
  }

  function handlePaymentSuccess() {
    onsuccess?.();
  }
</script>

<Button disabled={disabled || isProcessing} onclick={handleSetupClick}>
  {#if isProcessing}
    {processingLabel}
  {:else}
    {label}
  {/if}
</Button>

<SetupDialog
  bind:open={showDialog}
  stripe={stripeManager.stripe}
  {clientSecret}
  onopenchange={handleDialogOpenChange}
  onsuccess={handlePaymentSuccess}
/>

<script lang="ts">
  import type { Stripe, StripeElements } from "@stripe/stripe-js";
  import { Button } from "$lib/components/ui/button";
  import * as Dialog from "$lib/components/ui/dialog";
  import { toast } from "svelte-sonner";
  import { page } from "$app/state";
  import { invalidate } from "$app/navigation";
  import StripePaymentForm from "./stripe-payment-form.svelte";

  interface Props {
    stripe: Stripe | null;
    open: boolean;
    clientSecret?: string;
    onopenchange: (open: boolean) => void;
    onsuccess: () => void;
  }

  let {
    stripe,
    open = $bindable(),
    clientSecret,
    onopenchange,
    onsuccess,
  }: Props = $props();

  let isProcessing = $state(false);
  let cardComplete = $state(false);
  let formRef = $state<{
    getElements: () => StripeElements | null;
  }>();

  const handleOpenChangeComplete = (isOpen: boolean) => {
    if (!isOpen) {
      resetDialog();
    }
    onopenchange(isOpen);
  };

  function resetDialog() {
    open = false;
    isProcessing = false;
    cardComplete = false;
  }

  function handleCardChange(complete: boolean) {
    cardComplete = complete;
  }

  async function handleSetupPaymentMethod() {
    if (!stripe || !formRef || !cardComplete || !clientSecret) return;

    const elements = formRef.getElements();
    if (!elements) return;

    isProcessing = true;

    try {
      const { error: submitError } = await elements.submit();
      if (submitError) {
        toast.error(submitError.message || "Failed to add payment method");
        return;
      }

      const { error: confirmError } = await stripe.confirmSetup({
        elements,
        clientSecret,
        confirmParams: {
          return_url: page.url.toString(),
          payment_method_data: {
            allow_redisplay: "always",
          },
        },
        redirect: "if_required",
      });

      if (confirmError) {
        toast.error(confirmError.message || "Failed to add payment method");
        return;
      }

      await invalidate("app:billing");
      toast.success("Payment method added successfully");
      onsuccess();
      resetDialog();
    } catch (err) {
      console.error("Error adding payment method:", err);
      toast.error("Failed to add payment method");
    } finally {
      isProcessing = false;
    }
  }
</script>

<Dialog.Root bind:open onOpenChangeComplete={handleOpenChangeComplete}>
  <Dialog.Content class="sm:max-w-[500px]">
    <Dialog.Header>
      <Dialog.Title>Add payment method</Dialog.Title>
      <Dialog.Description
        >Enter your card details to add a new payment method.</Dialog.Description
      >
    </Dialog.Header>
    <div>
      {#if stripe && open}
        <StripePaymentForm
          bind:this={formRef}
          mode="setup"
          {stripe}
          onchange={handleCardChange}
          savePaymentMethod={true}
        />
      {/if}
    </div>
    <Dialog.Footer>
      <Button variant="outline" onclick={resetDialog} disabled={isProcessing}
        >Cancel</Button
      >
      <Button
        onclick={handleSetupPaymentMethod}
        disabled={!cardComplete || isProcessing}
      >
        {isProcessing ? "Processing..." : "Add Card"}
      </Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

export const TERMS_AUTO = {
  applePay: "auto" as const,
  auBecsDebit: "auto" as const,
  bancontact: "auto" as const,
  card: "auto" as const,
  cashapp: "auto" as const,
  googlePay: "auto" as const,
  ideal: "auto" as const,
  paypal: "auto" as const,
  sepaDebit: "auto" as const,
  sofort: "auto" as const,
  usBankAccount: "auto" as const,
};

export const TERMS_NEVER = {
  applePay: "never" as const,
  auBecsDebit: "never" as const,
  bancontact: "never" as const,
  card: "never" as const,
  cashapp: "never" as const,
  googlePay: "never" as const,
  ideal: "never" as const,
  paypal: "never" as const,
  sepaDebit: "never" as const,
  sofort: "never" as const,
  usBankAccount: "never" as const,
};

<script lang="ts">
  import type {
    Stripe,
    StripeElements,
    StripePaymentElement,
    StripeElementsOptionsMode,
  } from "@stripe/stripe-js";
  import { mode as modeWatcher } from "mode-watcher";
  import { TERMS_AUTO, TERMS_NEVER } from "./stripe-constants";
  import { onMount } from "svelte";

  interface Props {
    stripe: Stripe;
    mode: "payment" | "setup";
    amount?: number;
    currency?: string;
    savePaymentMethod?: boolean;
    user?: { email: string; name: string } | null;
    onchange: (complete: boolean) => void;
  }

  let {
    stripe,
    mode,
    amount = 0,
    currency = "usd",
    savePaymentMethod = false,
    user,
    onchange,
  }: Props = $props();

  let cardContainer = $state<HTMLDivElement | null>(null);
  let elements = $state<StripeElements | null>(null);
  let paymentElement = $state<StripePaymentElement | null>(null);

  function initializeElements() {
    if (!stripe) return;

    // Clean up previous elements
    if (paymentElement) {
      paymentElement.destroy();
      paymentElement = null;
    }

    const appearance = {
      theme:
        modeWatcher.current === "dark"
          ? ("night" as const)
          : ("stripe" as const),
      inputs: "condensed" as const,
      labels: "floating" as const,
    };

    elements = stripe.elements({
      mode,
      appearance,
      currency,
      ...(mode === "payment" && {
        amount: amount,
      }),
      ...(user || mode === "setup"
        ? {
            setupFutureUsage: "off_session" as const,
          }
        : {}),
    } as StripeElementsOptionsMode);

    paymentElement = elements.create("payment", {
      layout: "tabs",
      defaultValues: {
        billingDetails: {
          email: user?.email,
          name: user?.name,
        },
      },
      terms: savePaymentMethod ? TERMS_AUTO : TERMS_NEVER,
    });

    if (cardContainer && paymentElement) {
      paymentElement.mount(cardContainer);
      paymentElement.on("change", (event: any) => {
        onchange(event.complete);
      });
    }
  }

  // Initialize elements when component mounts
  onMount(() => {
    initializeElements();

    return () => {
      if (paymentElement) {
        paymentElement.destroy();
      }
    };
  });

  // Update terms when savePaymentMethod changes
  $effect(() => {
    if (paymentElement) {
      paymentElement.update({
        terms: savePaymentMethod ? TERMS_AUTO : TERMS_NEVER,
      });
    }
  });

  export function getElements() {
    return elements;
  }
</script>

<div bind:this={cardContainer}></div>

import { toast } from "svelte-sonner";

export interface PaymentIntentResult {
  type: "payment" | "confirm";
  amount?: number;
  currency?: string;
  clientSecret?: string;
  brand?: string;
  last4?: string;
}

export function usePaymentIntent() {
  let isLoading = $state(false);

  async function fetchPaymentIntent({
    priceId,
  }: {
    priceId: string;
  }): Promise<PaymentIntentResult | null> {
    isLoading = true;

    const res = await fetch("/api/stripe/payment-intent", {
      method: "POST",
      body: JSON.stringify({
        priceId: priceId,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    });

    if (!res.ok) {
      toast.error("Failed to initialize payment");
      return null;
    }

    return res.json();
  }

  async function fetchSetupIntent(): Promise<PaymentIntentResult | null> {
    isLoading = true;

    const res = await fetch("/api/stripe/setup-intent", {
      method: "POST",
    });

    if (!res.ok) {
      toast.error("Failed to initialize setup");
      return null;
    }

    return res.json();
  }

  return {
    get isLoading() {
      return isLoading;
    },
    fetchPaymentIntent,
    fetchSetupIntent,
  };
}

import { loadStripe, type Stripe } from "@stripe/stripe-js";
import { toast } from "svelte-sonner";
import { env } from "$env/dynamic/public";

export function useStripe() {
  let stripe = $state<Stripe | null>(null);
  let isLoading = $state(true);
  let error = $state<string | null>(null);

  async function initialize() {
    try {
      stripe = await loadStripe(env.PUBLIC_STRIPE_PUBLISHABLE_KEY);
      isLoading = false;
    } catch (err) {
      console.error("Failed to load Stripe:", err);
      error = "Failed to initialize payment system";
      toast.error("Failed to initialize payment system");
      isLoading = false;
    }
  }

  // Auto-initialize
  initialize();

  return {
    get stripe() {
      return stripe;
    },
    get isLoading() {
      return isLoading;
    },
    get error() {
      return error;
    },
  };
}

import { env } from "$env/dynamic/private";
import Stripe from "stripe";

const stripe = new Stripe(env.STRIPE_SECRET_KEY, {
  apiVersion: "2026-04-22.dahlia",
});

export default stripe;

export const load = async ({ parent }) => {
  const { breadcrumbs } = await parent();

  return {
    breadcrumbs: [...breadcrumbs, { title: "Billing", url: "/billing" }],
  };
};

import { error } from "@sveltejs/kit";
import stripe from "$lib/stripe";

export const load = async ({ locals, depends, parent }) => {
  const { user } = await parent();
  const customer = await locals.admin
    .collection("stripe_customers")
    .getFirstListItem(locals.admin.filter("user = {:user}", { user: user.id }));

  if (!customer || !customer.id) {
    return error(400, "Customer not found");
  }

  const stripeCustomer = await stripe.customers.retrieve(customer.id);
  if (stripeCustomer.deleted) {
    return error(400, "Customer not found");
  }

  const paymentMethods = await stripe.customers.listPaymentMethods(
    customer.id,
    {
      type: "card",
      allow_redisplay: "always",
    },
  );

  depends("app:billing");

  return {
    paymentMethods: paymentMethods.data.map((pm) => ({
      id: pm.id,
      brand: pm.card!.brand,
      last4: pm.card!.last4,
      expMonth: pm.card!.exp_month,
      expYear: pm.card!.exp_year,
      isDefault: pm.id === customer.default_payment_method,
    })),
    user,
  };
};

export const actions = {
  setDefaultPaymentMethod: async ({ locals, request }) => {
    const formData = await request.formData();
    const paymentMethodId = formData.get("paymentMethodId") as string;

    const customer = await locals.admin
      .collection("stripe_customers")
      .getFirstListItem(`user.id = "${locals.pb.authStore.record?.id}"`);

    if (!customer || !customer.id) {
      return error(400, "Customer not found");
    }

    await stripe.customers.update(customer.id, {
      invoice_settings: {
        default_payment_method: paymentMethodId,
      },
    });

    await locals.admin.collection("stripe_customers").update(customer.id, {
      default_payment_method: paymentMethodId,
    });
  },
  deletePaymentMethod: async ({ locals, request }) => {
    const formData = await request.formData();
    const paymentMethodId = formData.get("paymentMethodId") as string;

    const customer = await locals.admin
      .collection("stripe_customers")
      .getFirstListItem(`user.id = "${locals.pb.authStore.record?.id}"`);

    const defaultPaymentMethod = customer.default_payment_method;

    await stripe.paymentMethods.detach(paymentMethodId);

    // If default payment method was deleted, update default payment method
    if (defaultPaymentMethod === paymentMethodId) {
      const paymentMethods = await stripe.paymentMethods.list({
        customer: customer.id,
      });

      if (paymentMethods.data.length > 0) {
        const defaultPaymentMethod = paymentMethods.data[0];

        await stripe.customers.update(customer.id, {
          invoice_settings: {
            default_payment_method: defaultPaymentMethod.id,
          },
        });

        await locals.admin.collection("stripe_customers").update(customer.id, {
          default_payment_method: defaultPaymentMethod.id,
        });
      } else {
        await locals.admin.collection("stripe_customers").update(customer.id, {
          default_payment_method: null,
        });
      }
    }
  },
};

<script lang="ts">
  import { Button } from "$lib/components/ui/button";
  import * as Card from "$lib/components/ui/card";
  import { Badge } from "$lib/components/ui/badge";
  import * as AlertDialog from "$lib/components/ui/alert-dialog";
  import SetupButton from "$lib/components/payments/setup-button.svelte";
  import { CreditCard, Trash2, Check } from "@lucide/svelte";
  import { toast } from "svelte-sonner";
  import { invalidate } from "$app/navigation";

  let { data } = $props();
  let paymentMethods = $derived(data.paymentMethods);
  let showDeleteDialog = $state(false);
  let selectedPaymentMethodId = $state<string | null>(null);
  let isProcessing = $state(false);

  function openDeleteDialog(paymentMethodId: string) {
    selectedPaymentMethodId = paymentMethodId;
    showDeleteDialog = true;
  }

  function closeDeleteDialog() {
    showDeleteDialog = false;
    selectedPaymentMethodId = null;
  }

  async function handleDeletePaymentMethod() {
    if (!selectedPaymentMethodId) return;
    isProcessing = true;

    try {
      const formData = new FormData();
      formData.append("paymentMethodId", selectedPaymentMethodId);

      await fetch("?/deletePaymentMethod", {
        method: "POST",
        body: formData,
      });

      await invalidate("app:billing");
      toast.success("Payment method removed successfully");
      closeDeleteDialog();
    } catch (err) {
      console.error("Error deleting payment method:", err);
      toast.error("Failed to remove payment method");
    } finally {
      isProcessing = false;
    }
  }

  async function setDefaultPaymentMethod(paymentMethodId: string) {
    try {
      const formData = new FormData();
      formData.append("paymentMethodId", paymentMethodId);

      await fetch("?/setDefaultPaymentMethod", {
        method: "POST",
        body: formData,
      });

      await invalidate("app:billing");
      toast.success("Default payment method updated");
    } catch (err) {
      console.error("Error setting default payment method:", err);
      toast.error("Failed to update default payment method");
    }
  }

  function getCardBrandIcon(brand: string) {
    // You can customize these icons or use actual card brand icons
    const brands: Record<string, string> = {
      visa: "💳",
      mastercard: "💳",
      amex: "💳",
      discover: "💳",
      unknown: "💳",
    };
    return brands[brand.toLowerCase()] || brands.unknown;
  }

  function formatCardBrand(brand: string) {
    return brand.charAt(0).toUpperCase() + brand.slice(1);
  }
</script>

<div class="divide-y divide-gray-900/10 dark:divide-white/10">
  <div class="grid grid-cols-1 gap-x-8 gap-y-8 py-10 md:grid-cols-3">
    <div class="px-4 sm:px-0">
      <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
        Payment Methods
      </h2>
      <p class="mt-1 text-sm/6 text-gray-600 dark:text-gray-400">
        Manage your payment methods for subscriptions and purchases.
      </p>
    </div>

    <div class="md:col-span-2">
      <Card.Root>
        <Card.Content>
          {#if paymentMethods.length === 0}
            <div
              class="text-muted-foreground flex flex-col items-center justify-center py-12 text-center"
            >
              <CreditCard class="mb-4 size-12 opacity-50" />
              <p class="mb-2 text-lg font-medium">No payment methods</p>
              <p class="text-sm">Add a payment method to get started</p>
            </div>
          {:else}
            <div class="space-y-4">
              {#each paymentMethods as method (method.id)}
                <div
                  class="border-border hover:bg-accent/50 flex items-center justify-between rounded-lg border p-4 transition-colors"
                >
                  <div class="flex items-center gap-4">
                    <div
                      class="bg-muted flex size-12 items-center justify-center rounded-lg text-2xl"
                    >
                      {getCardBrandIcon(method.brand)}
                    </div>
                    <div>
                      <div class="flex items-center gap-2">
                        <p class="font-medium">
                          {formatCardBrand(method.brand)} •••• {method.last4}
                        </p>
                        {#if method.isDefault}
                          <Badge variant="secondary">
                            <Check class="mr-1 size-3" />
                            Default
                          </Badge>
                        {/if}
                      </div>
                      <p class="text-muted-foreground text-sm">
                        Expires {method.expMonth
                          .toString()
                          .padStart(2, "0")}/{method.expYear}
                      </p>
                    </div>
                  </div>
                  <div class="flex items-center gap-2">
                    {#if !method.isDefault}
                      <Button
                        variant="outline"
                        size="sm"
                        onclick={() => setDefaultPaymentMethod(method.id)}
                      >
                        Set as Default
                      </Button>
                    {/if}
                    <Button
                      variant="outline"
                      size="icon-sm"
                      onclick={() => openDeleteDialog(method.id)}
                      disabled={method.isDefault && paymentMethods.length === 1}
                    >
                      <Trash2 class="size-4" />
                    </Button>
                  </div>
                </div>
              {/each}
            </div>
          {/if}
        </Card.Content>
        <Card.Footer class="border-t justify-end">
          <SetupButton
            label="Add Payment Method"
            processingLabel="Adding..."
            onsuccess={() => invalidate("app:billing")}
          />
        </Card.Footer>
      </Card.Root>
    </div>
  </div>
</div>

<!-- Delete Confirmation Dialog -->
<AlertDialog.Root bind:open={showDeleteDialog}>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Remove Payment Method</AlertDialog.Title>
      <AlertDialog.Description>
        Are you sure you want to remove this payment method? This action cannot
        be undone.
      </AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel onclick={closeDeleteDialog}>Cancel</AlertDialog.Cancel
      >
      <AlertDialog.Action
        onclick={handleDeletePaymentMethod}
        disabled={isProcessing}
      >
        {isProcessing ? "Removing..." : "Remove"}
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

# Billing Page - Stripe Payment Methods

This billing page provides a modern UI for managing payment methods with Stripe.

## Features

✅ **Display Payment Methods** - Shows all saved cards with brand, last 4 digits, and expiration
✅ **Add Payment Methods** - Secure card input using Stripe Elements
✅ **Remove Payment Methods** - Delete cards with confirmation dialog
✅ **Default Payment Method** - Set and display the default payment method
✅ **Responsive Design** - Mobile-friendly layout
✅ **Error Handling** - Toast notifications for user feedback

## Current Status

The frontend is **fully functional** with mock data. To connect to your backend, follow the integration steps below.

## Backend Integration

### 1. Update Stripe Publishable Key

In `+page.svelte`, replace the placeholder with your actual Stripe publishable key:

```typescript
const STRIPE_PUBLISHABLE_KEY = "pk_test_YOUR_KEY_HERE";
```

Or better yet, load it from environment variables:

```typescript
import { env } from "$env/dynamic/public";
const STRIPE_PUBLISHABLE_KEY = env.PUBLIC_STRIPE_PUBLISHABLE_KEY;
```

### 2. Fetch Payment Methods on Load

Update `+page.server.ts` to fetch payment methods:

```typescript
export const load: PageServerLoad = async ({ locals }) => {
  const user = locals.user;

  if (!user?.stripeCustomerId) {
    return { paymentMethods: [] };
  }

  // Fetch payment methods from Stripe
  const stripe = await import("$lib/stripe").then((m) => m.default);
  const paymentMethods = await stripe.paymentMethods.list({
    customer: user.stripeCustomerId,
    type: "card",
  });

  return {
    paymentMethods: paymentMethods.data.map((pm) => ({
      id: pm.id,
      brand: pm.card?.brand || "unknown",
      last4: pm.card?.last4 || "0000",
      expMonth: pm.card?.exp_month || 1,
      expYear: pm.card?.exp_year || 2025,
      isDefault: false, // You'll need to track this separately
    })),
  };
};
```

### 3. Create API Endpoints

Create the following server endpoints:

#### Add Payment Method: `+page.server.ts`

```typescript
export const actions = {
  addPaymentMethod: async ({ request, locals }) => {
    const formData = await request.formData();
    const paymentMethodId = formData.get("paymentMethodId");

    // Attach payment method to customer
    const stripe = await import("$lib/stripe").then((m) => m.default);
    await stripe.paymentMethods.attach(paymentMethodId, {
      customer: locals.user.stripeCustomerId,
    });

    return { success: true };
  },

  removePaymentMethod: async ({ request, locals }) => {
    const formData = await request.formData();
    const paymentMethodId = formData.get("paymentMethodId");

    // Detach payment method from customer
    const stripe = await import("$lib/stripe").then((m) => m.default);
    await stripe.paymentMethods.detach(paymentMethodId);

    return { success: true };
  },

  setDefaultPaymentMethod: async ({ request, locals }) => {
    const formData = await request.formData();
    const paymentMethodId = formData.get("paymentMethodId");

    // Update customer's default payment method
    const stripe = await import("$lib/stripe").then((m) => m.default);
    await stripe.customers.update(locals.user.stripeCustomerId, {
      invoice_settings: {
        default_payment_method: paymentMethodId,
      },
    });

    return { success: true };
  },
};
```

### 4. Update Frontend to Use Actions

Replace the mock functions in `+page.svelte`:

```typescript
async function handleAddPaymentMethod() {
  if (!stripe || !cardElement || !cardComplete) return;

  isProcessing = true;

  try {
    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: "card",
      card: cardElement,
    });

    if (error) {
      toast.error(error.message);
      return;
    }

    // Submit to your backend
    const formData = new FormData();
    formData.append("paymentMethodId", paymentMethod.id);

    const response = await fetch("?/addPaymentMethod", {
      method: "POST",
      body: formData,
    });

    if (response.ok) {
      toast.success("Payment method added");
      // Reload page to fetch updated payment methods
      window.location.reload();
    }
  } finally {
    isProcessing = false;
  }
}
```

## Security Considerations

⚠️ **Important**: Never expose your Stripe secret key on the frontend
✅ All sensitive operations should happen on your backend
✅ Use Stripe's publishable key for frontend operations
✅ Validate user permissions before modifying payment methods
✅ Use HTTPS in production

## Testing

Use [Stripe's test cards](https://stripe.com/docs/testing) for testing:

- **Success**: 4242 4242 4242 4242
- **Decline**: 4000 0000 0000 0002
- **Requires authentication**: 4000 0025 0000 3155

Use any future expiration date and any 3-digit CVC.

## Styling

The page uses Tailwind CSS and shadcn/ui components. All components are styled to match your existing design system with support for light/dark modes.

### Stripe Elements Styling

Since Stripe Elements render in an iframe, they cannot access CSS variables directly. Additionally, Stripe only accepts HEX, RGB, or HSL colors (not modern formats like OKLCH).

The implementation:

1. **Creates temporary DOM elements** with CSS variables applied
2. **Lets the browser compute colors** - converts OKLCH/HSL/any format to RGB
3. **Extracts RGB values** that Stripe Elements can understand
4. **Passes computed colors** to Stripe Elements on initialization
5. **Matches the current theme** automatically (light/dark mode)

This approach works with any CSS color format (oklch, hsl, rgb, hex) and ensures Stripe Elements always match your theme when the "Add Payment Method" dialog opens.

## Dependencies

- `@stripe/stripe-js` - Stripe.js for frontend
- `stripe` - Stripe Node.js SDK for backend
- `svelte-sonner` - Toast notifications
- `@lucide/svelte` - Icons
- shadcn/ui components

import { json } from "@sveltejs/kit";
import stripe from "$lib/stripe";
import type { Stripe } from "stripe";

const createPaymentIntent = async (
  price: Stripe.Price,
  customer?: { id: string; default_payment_method?: string },
) => {
  if (price.unit_amount === null || price.unit_amount === undefined) {
    console.error("Price does not have a per unit amount");
    throw new Error("Price does not have a per unit amount");
  }

  // Guest
  if (!customer) {
    const intent = await stripe.paymentIntents.create({
      amount: price.unit_amount,
      currency: price.currency,
      automatic_payment_methods: {
        enabled: true,
        allow_redirects: "never",
      },
    });

    if (!intent.client_secret) {
      console.error("Payment intent created without client secret");
      throw new Error("Failed to create payment intent");
    }

    return {
      type: "payment",
      clientSecret: intent.client_secret,
      amount: price.unit_amount,
      currency: price.currency,
    };
  }

  // Customer with saved payment method
  if (customer.default_payment_method) {
    const paymentMethod = await stripe.customers.retrievePaymentMethod(
      customer.id,
      customer.default_payment_method,
    );

    const intent = await stripe.paymentIntents.create({
      amount: price.unit_amount,
      currency: price.currency,
      customer: customer.id,
      payment_method: customer.default_payment_method,
      automatic_payment_methods: {
        enabled: true,
        allow_redirects: "never",
      },
    });

    return {
      type: "confirm",
      clientSecret: intent.client_secret,
      amount: price.unit_amount,
      currency: price.currency,
      brand: paymentMethod.card?.brand,
      last4: paymentMethod.card?.last4,
    };
  }

  // Customer without saved payment method
  const intent = await stripe.paymentIntents.create({
    amount: price.unit_amount,
    currency: price.currency,
    customer: customer.id,
    setup_future_usage: "off_session",
    automatic_payment_methods: {
      enabled: true,
      allow_redirects: "never",
    },
  });

  if (!intent.client_secret) {
    console.error("Payment intent created without client secret");
    throw new Error("Failed to create payment intent");
  }

  return {
    type: "payment",
    clientSecret: intent.client_secret,
    amount: price.unit_amount,
    currency: price.currency,
  };
};

export const POST = async ({ request, locals }) => {
  const user = locals.pb.authStore.record?.id;

  let body;
  try {
    body = await request.json();
  } catch (error) {
    console.error("Invalid JSON in request body");
    return json({ error: "Invalid request body" }, { status: 400 });
  }

  const { priceId } = body as { priceId?: string };

  // Validate required fields
  if (!priceId || typeof priceId !== "string" || priceId === "") {
    console.error("Missing or invalid priceId");
    return json({ error: "Price ID is required" }, { status: 400 });
  }

  // Retrieve price from Stripe
  let price;
  try {
    price = await stripe.prices.retrieve(priceId);
  } catch (error) {
    console.error("Failed to retrieve price from Stripe:", priceId);
    return json(
      { error: "Invalid price ID or price not found" },
      { status: 404 },
    );
  }

  // Validate price is active
  if (!price.active) {
    console.error("Price is not active:", priceId);
    return json(
      { error: "This price is no longer available" },
      { status: 400 },
    );
  }

  let customer;

  if (user) {
    try {
      customer = await locals.admin
        .collection("stripe_customers")
        .getFirstListItem(
          locals.admin.filter("user = {:user}", { user: user }),
        );
    } catch (error) {
      // Customer not found is expected for new users, log for debugging only
      console.log("No Stripe customer found for user:", user);
    }
  }

  try {
    const res = await createPaymentIntent(price, customer);
    return json(res, { status: 200 });
  } catch (error) {
    console.error("Error creating payment intent for price:", priceId);
    const errorMessage =
      error instanceof Error
        ? error.message
        : "Failed to create payment intent";
    return json({ error: errorMessage }, { status: 500 });
  }
};

import { describe, it, expect, beforeAll, beforeEach, afterEach } from "vitest";
import type { Match } from "@velastack/pocketbase";
import type { RouteId } from "./$types";
import stripe from "$lib/stripe";
import type Stripe from "stripe";

describe("POST /api/stripe/payment-intent", () => {
  let product: Stripe.Product;
  let activePrice: Stripe.Price;
  let inactivePrice: Stripe.Price;
  let stripeCustomer: Stripe.Customer;
  let paymentMethod: Stripe.PaymentMethod;

  beforeAll(async () => {
    const productName = "Test Product - Payment Intent";
    const products = await stripe.products.search({
      query: `name:"${productName}" AND metadata["test"]:"true"`,
      limit: 1,
    });

    if (products.data.length > 0) {
      product = products.data[0];

      const prices = await stripe.prices.list({
        product: product.id,
        active: true,
        limit: 1,
      });

      if (prices.data.length > 0) {
        activePrice = prices.data[0];
      }

      const inactivePrices = await stripe.prices.list({
        product: product.id,
        active: false,
        limit: 1,
      });

      if (inactivePrices.data.length > 0) {
        inactivePrice = inactivePrices.data[0];
      }
    }

    // Create if not found or no active price
    if (!product) {
      product = await stripe.products.create({
        name: productName,
        metadata: {
          test: "true",
          test_type: "payment-intent",
        },
      });
    }

    if (!activePrice) {
      activePrice = await stripe.prices.create({
        product: product.id,
        unit_amount: 1000,
        currency: "usd",
        metadata: {
          test: "true",
          test_type: "payment-intent",
        },
      });
    }

    if (!inactivePrice) {
      inactivePrice = await stripe.prices.create({
        product: product.id,
        unit_amount: 2000,
        currency: "usd",
        active: false,
        metadata: {
          test: "true",
          test_type: "payment-intent-inactive",
        },
      });
    }
  });

  beforeEach(async (context) => {
    // Create a Stripe customer for authenticated user tests
    stripeCustomer = await stripe.customers.create({
      email: context.user.email,
      metadata: {
        test: "true",
      },
    });

    // Create a payment method for the customer
    paymentMethod = await stripe.paymentMethods.create({
      type: "card",
      card: {
        token: "tok_visa",
      },
    });

    await stripe.paymentMethods.attach(paymentMethod.id, {
      customer: stripeCustomer.id,
    });
  });

  afterEach(async () => {
    if (paymentMethod?.id) {
      await stripe.paymentMethods.detach(paymentMethod.id);
    }

    if (stripeCustomer?.id) {
      await stripe.customers.del(stripeCustomer.id);
    }
  });

  describe("Request validation", () => {
    it("should return 400 if request body is not valid JSON", async (context) => {
      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .set("Content-Type", "application/json")
        .send("invalid json");

      expect(response.status).toBe(400);
      expect(response.body.error).toBe("Invalid request body");
    });

    it("should return 400 if priceId is missing", async (context) => {
      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({});

      expect(response.status).toBe(400);
      expect(response.body.error).toBe("Price ID is required");
    });

    it("should return 400 if priceId is not a string", async (context) => {
      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({ priceId: 12345 });

      expect(response.status).toBe(400);
      expect(response.body.error).toBe("Price ID is required");
    });

    it("should return 400 if priceId is an empty string", async (context) => {
      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({ priceId: "" });

      expect(response.status).toBe(400);
      expect(response.body.error).toBe("Price ID is required");
    });

    it("should return 404 if price does not exist", async (context) => {
      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({ priceId: "price_nonexistent123" });

      expect(response.status).toBe(404);
      expect(response.body.error).toBe("Invalid price ID or price not found");
    });

    it("should return 400 if price is not active", async (context) => {
      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({ priceId: inactivePrice.id });

      expect(response.status).toBe(400);
      expect(response.body.error).toBe("This price is no longer available");
    });
  });

  describe("Guest user (unauthenticated)", () => {
    it("should create payment intent for guest user", async (context) => {
      const response = await context.request
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({ priceId: activePrice.id });

      expect(response.status).toBe(200);
      expect(response.body.type).toBe("payment");
      expect(response.body.clientSecret).toBeDefined();
      expect(response.body.amount).toBe(1000);
      expect(response.body.currency).toBe("usd");
      expect(response.body.brand).toBeUndefined();
      expect(response.body.last4).toBeUndefined();

      // Verify the payment intent was created in Stripe
      const intentId = response.body.clientSecret.split("_secret_")[0];
      const intent = await stripe.paymentIntents.retrieve(intentId);
      expect(intent.amount).toBe(1000);
      expect(intent.currency).toBe("usd");
      expect(intent.customer).toBeNull();

      // Clean up
      await stripe.paymentIntents.cancel(intent.id);
    });
  });

  describe("Authenticated user without Stripe customer", () => {
    it("should create payment intent for user without Stripe customer", async (context) => {
      await context.agent.authenticateUser();

      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({ priceId: activePrice.id });

      expect(response.status).toBe(200);
      expect(response.body.type).toBe("payment");
      expect(response.body.clientSecret).toBeDefined();
      expect(response.body.amount).toBe(1000);
      expect(response.body.currency).toBe("usd");

      // Verify the payment intent
      const intentId = response.body.clientSecret.split("_secret_")[0];
      const intent = await stripe.paymentIntents.retrieve(intentId);
      expect(intent.amount).toBe(1000);
      expect(intent.setup_future_usage).toBeNull();

      // Clean up
      await stripe.paymentIntents.cancel(intent.id);
    });
  });

  describe("Authenticated user with Stripe customer", () => {
    let customerRecord: { id: string };

    beforeEach(async (context) => {
      // Link the Stripe customer to the PocketBase user
      customerRecord = await context.admin
        .collection("stripe_customers")
        .create({
          user: context.user.id,
          id: stripeCustomer.id,
          email: stripeCustomer.email,
        });
    });

    afterEach(async (context) => {
      // Clean up the PocketBase customer record
      await context.admin
        .collection("stripe_customers")
        .delete(customerRecord.id);
    });

    it("should create payment intent with setup_future_usage for user without default payment method", async (context) => {
      await context.agent.authenticateUser();

      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({ priceId: activePrice.id });

      expect(response.status).toBe(200);
      expect(response.body.type).toBe("payment");
      expect(response.body.clientSecret).toBeDefined();
      expect(response.body.amount).toBe(1000);
      expect(response.body.currency).toBe("usd");
      expect(response.body.brand).toBeUndefined();
      expect(response.body.last4).toBeUndefined();

      // Verify the payment intent has setup_future_usage
      const intentId = response.body.clientSecret.split("_secret_")[0];
      const intent = await stripe.paymentIntents.retrieve(intentId);
      expect(intent.customer).toBe(stripeCustomer.id);
      expect(intent.setup_future_usage).toBe("off_session");

      // Clean up
      await stripe.paymentIntents.cancel(intent.id);
    });

    it("should create payment intent with default payment method for customer with saved payment method", async (context) => {
      // Set default payment method
      await stripe.customers.update(stripeCustomer.id, {
        invoice_settings: {
          default_payment_method: paymentMethod.id,
        },
      });

      const customerRecord = await context.admin
        .collection("stripe_customers")
        .getFirstListItem(
          context.admin.filter("user = {:user}", { user: context.user.id }),
        );

      await context.admin.collection("stripe_payment_methods").create({
        id: paymentMethod.id,
        customer: customerRecord.id,
        brand: paymentMethod.card?.brand,
        last4: paymentMethod.card?.last4,
        exp_month: paymentMethod.card?.exp_month,
        exp_year: paymentMethod.card?.exp_year,
      });

      await context.admin
        .collection("stripe_customers")
        .update(customerRecord.id, {
          default_payment_method: paymentMethod.id,
        });

      await context.agent.authenticateUser();

      const response = await context.agent
        .post("/api/stripe/payment-intent" satisfies Match<RouteId>)
        .send({ priceId: activePrice.id });

      expect(response.status).toBe(200);
      expect(response.body.type).toBe("confirm");
      expect(response.body.clientSecret).toBeDefined();
      expect(response.body.amount).toBe(1000);
      expect(response.body.currency).toBe("usd");
      expect(response.body.brand).toBe("visa");
      expect(response.body.last4).toBeDefined();
      expect(response.body.last4).toMatch(/^\d{4}$/);

      // Verify the payment intent has the payment method attached
      const intentId = response.body.clientSecret.split("_secret_")[0];
      const intent = await stripe.paymentIntents.retrieve(intentId);
      expect(intent.customer).toBe(stripeCustomer.id);
      expect(intent.payment_method).toBe(paymentMethod.id);

      // Clean up
      await stripe.paymentIntents.cancel(intent.id);
    });
  });
});