Stripe Button

Stripe

File locations:

  • src/components/stripeButton.tsx

The StripeButton component allows you to create a new Stripe checkout session, where the customer can make their purchase.

It is the key component of your pricing page.

When working with subscriptions, the StripeButton also allows the customer to cancel and resume their subscription.

The StripeButton component accepts to arguments, plan and type.

The plan can be monthly, yearly, or onetime, and the type can be checkout, cancel, or resume.

To use the component, import it into your page.tsx like this:

tsx
import StripeButton from "@/components/stripeButton";
 
// For onetime purchase
<StripeButton type="checkout" plan="onetime" />
 
// For subscriptions
<StripeButton type="checkout" plan="month" />
<StripeButton type="cancel" plan="month" />
<StripeButton type="resume" plan="month" />