Custom amount

Create checkout for a donor-selected amount.

Previewlight site theme

Loading payment…

CodeApp.tsx

import {
  LockerversePayment,
  type LockerversePaymentTheme,
} from "@lockerverse/react/payment";
import "@lockerverse/react/payment.css";
import { useLockerverseWidget } from "@lockerverse/react/widget";
import { exampleRuntime } from "../example-runtime";

export default function CustomAmountExample({
  theme = "light",
}: {
  theme?: LockerversePaymentTheme;
}) {
  const widget = useLockerverseWidget({
    apiBaseUrl: exampleRuntime.apiBaseUrl,
    communitySlug: exampleRuntime.communitySlug,
    environment: "development",
    sentryDsn: null,
    widgetSlug: exampleRuntime.widgetSlug,
  });
  return (
    <LockerversePayment
      selection={[{ amountCents: 2500, productSlug: "donation" }]}
      style={{ "--lockerverse-accent": "#f1511b" }}
      theme={theme}
      widget={widget}
    />
  );
}