Stripe

The kit supports Stripe for payments end to end from checking out for the payments both one time and subscriptions along with managing the billing page. Let’s understand the flow.

You need to create products on your Stripe account and keep ready with the productIds and priceIds. Set the following environment variables in your .env file.

STRIPE_API_KEY=<your-stripe-api-key>
STRIPE_WEBHOOK_SECRET=<your-stripe-webhook-secret>

Checkout

When you want user to checkout for a plan, you can just redirect them to the Stripe Checkout page but this does not tag the user with an existing user on Stripe if any. The kit provides an API to fix this issue.

Redirect user to /api/checkout/stripe?planId=<planId>&metadata=<metadata>

You need to configure the Stripe price id to planId mapping inside src/app/api/checkout/stripe/route.ts file.

const planIdProductIdMap: Record<string, string> = {
  [PLAN_LTD.id]: "price_1Qd6FkBndKX22GLegafjz79E",
  [PLAN_MONTHLY.id]: "price_1Qd6FkBndKX22GLegafjz79E",
  [PLAN_TOPUP.id]: "price_1Qd6FkBndKX22GLegafjz79E",
};
  • The planId is same as it is discussed in the User Plans section.
  • The metadata is a JSON object that you want to pass to the Stripe checkout page. This is optional. Passed information will be available in webhook.
  • Works for both logged in and non logged in users.
  • If logged in, it creates the checkout session for the same user on Stripe.
  • Because of the above feature, the logged in user can se all subscriptions and payments on the billing page.

Webhook

The kit provides a webhook to handle the Stripe events. The webhook is /api/webhook/stripe. It handles bot the subscriptions and one time payments as well.

Add a webhook on your Stripe account with URL https://<your-app-url>/api/payment-webhook/stripe and select following events

  • checkout.session.completed
  • invoice.paid
  • invoice.payment_failed

The webhook updates the user plans accordingly. Feel free to customize the logic as per your needs.

You need to configure the Stripe product id to planId mapping inside src/app/api/payment-webhook/stripe/route.ts file.

const productIdPlanMap: Record<string, Plan> = {
  prod_RW8WhkBup0slbe: PLAN_LTD,
  prod_RW8WhkBup0slbe1: PLAN_MONTHLY,
  prod_RW8WhkBup0slbe2: PLAN_TOPUP,
};

MIT 2025 Β© Nextra.