Subscriptions

Create a Project

After logging in, create a project on Stripe.

Obtain Stripe API Key

In "Developer" mode, go to "API Keys" and copy the secret key.

Paste it into your .env file.

STRIPE_API_KEY=sk_your_secret_key

Set up Stripe Webhook

Create a webhook to manage Stripe events within your app.

1. Create Webhook Endpoint: Go to your Stripe dashboard and navigate to "Developers" > "Webhooks". Click on "Add endpoint" to create a new webhook.
2. Configure Webhook: Enter the endpoint URL where Stripe will send events. Use:

https://your-app-url/api/webhooks/stripe

3. Select Events: Choose the events you want to receive notifications for. Recommended events for this repo:

   • checkout.session.completed
   • invoice.payment_succeeded

4. Obtain Webhook Signing Secret: After setting up the webhook, Stripe will generate a signing secret. Copy this secret and paste it into your .env file as STRIPE_WEBHOOK_SECRET.

STRIPE_WEBHOOK_SECRET=whsec_your_secret_webhook

Create Price Cards

Create price cards to obtain price IDs for both monthly and yearly plans.

1. Navigate to Products: In your Stripe dashboard, go to "Products" > "Create Product". Enter the details for your subscription product, such as name, description, and pricing.

2. Create Pricing Plans: Once the product is created, go to the "Pricing" section and click on "Add pricing plan". Set up the details for your pricing plan, including the amount, currency, billing interval (monthly or yearly), and any other relevant information.

3. Obtain Price IDs: After creating the pricing plans, Stripe will generate unique price IDs for each plan. These IDs are used to identify the specific pricing plan when creating subscriptions. Copy the price IDs for both the monthly and yearly plans and paste them into your .env file as follows:

# Starter
NEXT_PUBLIC_STRIPE_STARTER_MONTHLY_PLAN_ID=price_xxx
NEXT_PUBLIC_STRIPE_STARTER_YEARLY_PLAN_ID=price_xxx
 
# Pro
NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PLAN_ID=price_xxx
NEXT_PUBLIC_STRIPE_PRO_YEARLY_PLAN_ID=price_xxx
 
# Elite
NEXT_PUBLIC_STRIPE_ELITE_MONTHLY_PLAN_ID=price_xxx
NEXT_PUBLIC_STRIPE_ELITE_YEARLY_PLAN_ID=price_xxx

Ensure that you replace price_FaKeId with the actual price IDs generated by Stripe for your pricing plans.