Component Button Checkout

The Button Checkout component provides integration with Stripe for handling payments and subscriptions. It automatically manages loading states and redirects users to the Stripe checkout page with configurable success and cancel URLs.

Tip: Use this component in pricing tables, product pages, or upgrade sections to streamline the payment process. It's particularly effective when you need a quick, secure payment integration without building a custom checkout flow.

Import

1import { ButtonCheckout } from "@/components/button-checkout/button-checkout";

Props

The ButtonCheckout component accepts the following props:

• text: string - Button label text
• priceId: string - Stripe price ID for the product
• mode: "payment" | "subscription" - Payment mode (default: "subscription")
• icon: React.ReactNode - Optional icon component

For more information about:

• Payment integration with Payment Setup
• Use in Pricing Table
• Style with Tailwind and shadcn
• Add to CTA sections for upgrades
• Integrate with API endpoints