Just change the mode: 'payment' for one-time payments or mode: 'subscription' for recurring payments like a monthly membership. This component is using the Stripe Checkout or Lemonsqueezy Checkout APIs based on the payment processor you choose in the configuration file.
Checkout Button
page.tsx
import CheckoutButton from "@/components/checkout-button";

Properties

mode
'payment' | 'subscription'
required
The mode of payment for the checkout process
priceId
string
required
The ID of the price or plan for the checkout
text
string
Custom text to display on the button
discountId
string
Optional discount ID to apply to the checkout
email
string
Optional email to pre-fill in the checkout form
className
string
Custom styling for the component. You can customize the button’s appearance using Tailwind classes.
animation
'shimmer' | 'pulsating'
Optional animation effect for the button
url
string
Optional URL to redirect to after the checkout
userId
string
Optional user ID to associate with the checkout

Usage

example.tsx
<CheckoutButton
	mode="payment"
	priceId="price_1J2e9z2eZvKYlo2C"
	text="Buy Now"
/>

Tips

When creating copy for your Checkout Button:
  • Use action-oriented language (e.g., “Buy Now”, “Subscribe Today”, “Get Started”.)
  • Include price or key benefit if applicable (e.g., “Start Free Trial”, “Join for $9.99/month”)
  • Create urgency when appropriate (e.g., “Limited Time Offer”)
  • Keep text concise and clear
If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.