Runway

The CheckoutButton component is a button that initiates a checkout session with Stripe. It's built on top of the Button component so you can customize it with all the same props.

It calls the /api/checkout_sessions API route to create a Stripe checkout session.

Requires payments to be configured.

Usage

jsx
1import CheckoutButton from "@/components/payments/CheckoutButton";
2
3<CheckoutButton
4  planType="starter"
5  intervalName="monthly"
6>
7    Subcribe Now
8</CheckoutButton>
9
10<CheckoutButton
11  planType="pro"
12  intervalName="one_time"
13>
14    Subcribe Now
15</CheckoutButton>

Props

Name	Type	Default	Description
planType	string	`""`	The type of plan to subscribe to.
intervalName	string	`""`	The interval name for the plan.
...props	object	`""`	All other props are passed to the `Button` component.

Since CheckoutButton is built on top of the Button component, you can pass any prop that it accepts to customize the button (i.e. size, color, loading, etc.).