ESC
NextStarterAI logo
Menu
On this page

Components > Button Checkout

page.tsx
1import { ButtonCheckout } from "@/components/ButtonCheckout";

A Checkout button component that can be used to initiate a payment flow. Redirects to login, if the user is not authenticated and then redirects to the checkout page(Stripe/LemonSqueezy)


Button Checkout image
Supports different product variants and payment modes and automatically logs the proceed_checkout event to analytics.
ButtonCheckout.tsx
1const ButtonCheckout = ({ 2 priceId, // Stripe or LemonSqueezy priceId 3 variantId, // Stripe or LemonSqueezy variantId 4 mode = "payment", 5 placement="landing_page" // inside_app or landing_page, used for f 6 }: { 7 priceId: string; 8 variantId: number; 9 mode?: "payment" | "subscription"; 10 placement?: "inside_app" | "landing_page"; 11 })