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/CheckoutButton';

​
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

​
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.

Was this page helpful?

Big IconCTA