Billing Setup with Cycle Toggle

Onboarding28: Billing Setup with Cycle Toggle

Billing-step screen combining monthly/yearly cycle cards (the yearly option carrying a savings badge and pre-selected by default), a payment-method list, and a coupon field.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/onboarding28?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/onboarding28?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/onboarding28.tsx and the badge, button, and input shadcn/ui primitives it depends on.

Quick start

The installed file exports onboarding28Demo alongside the block: the exact props behind the preview above. Spread it to get a working billing step in one line.

import { Onboarding28, onboarding28Demo } from "@/components/beste/block/onboarding28";

export default function OnboardingPage() {
  return <Onboarding28 {...onboarding28Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { CreditCard, Landmark } from "lucide-react";
import { Onboarding28 } from "@/components/beste/block/onboarding28";

export default function OnboardingPage() {
  return (
    <Onboarding28
      badge={{ label: "Billing", variant: "secondary" }}
      heading="Set up billing"
      description="Choose your billing cycle and payment method."
      cycles={[
        { id: "monthly", label: "Monthly", price: "$19", period: "/month" },
        { id: "yearly", label: "Yearly", price: "$15", period: "/month", savingsBadge: "Save 20%" },
      ]}
      methods={[
        { id: "card", icon: <CreditCard className="size-5" />, label: "Credit Card" },
        { id: "bank", icon: <Landmark className="size-5" />, label: "Bank Transfer" },
      ]}
      primaryButton={{ label: "Start Subscription", href: "/setup/next" }}
      secondaryButton={{ label: "Start free trial", href: "/dashboard" }}
    />
  );
}

Props

type BillingCycle = {
  id: string;
  label: string;
  price: string;
  period: string;
  savingsBadge?: string;
};

type PaymentMethod = { id: string; icon: React.ReactNode; label: string };

Behavior notes

• selectedCycle initializes to whichever cycle object has a savingsBadge set, falling back to cycles[0] if none does, so the discounted plan is pre-selected on load rather than always defaulting to the first array entry.
• selectedMethod initializes to methods[0].id; both selectors are plain useState with no prop to seed a different starting choice.
• The coupon Input and its "Apply" button are decorative: the input isn't bound to any state and the "Apply" button has no onClick handler, so entering and "applying" a code has no effect.
• Unlike onboarding26/onboarding27, primaryButton here is never disabled: it renders as a normal <Link> regardless of the current cycle/method selection (both always resolve to a default anyway).
• currentStep/totalSteps only drive the static "Step of " label above the card; there is no internal step progression.