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.