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 productId
s and priceId
s. 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 theStripe
checkout page. This is optional. Passed information will be available inwebhook
. - 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,
};