ESC
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)
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 })