Multi-product cart

Quote and pay for several one-time products together.

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 MultiProductExample({
  theme = "light",
}: {
  theme?: LockerversePaymentTheme;
}) {
  const widget = useLockerverseWidget({
    apiBaseUrl: exampleRuntime.apiBaseUrl,
    communitySlug: exampleRuntime.communitySlug,
    environment: "development",
    sentryDsn: null,
    widgetSlug: exampleRuntime.widgetSlug,
  });
  return (
    <LockerversePayment
      selection={[
        { productSlug: "adult", quantity: 1 },
        { productSlug: "child-admission", quantity: 2 },
        { productSlug: "parking-pass", quantity: 1 },
      ]}
      style={{ "--lockerverse-accent": "#f1511b" }}
      theme={theme}
      widget={widget}
    />
  );
}