Stripe

NextSaasPilot comes with Stripe integration to manage payment and subscriptions. This guide covers setting up Stripe, creating subscription plans, generating keys, and configuring webhooks.

Setting up Stripe account

Configure your Stripe account settings:

1. Account: Create a new account on Stripe and activate payments.
2. Public Details: In your Account Settings > Public Details, add your website URL.
3. Branding: In Settings > Branding, add your logo and colors.
4. Customer Emails: In Settings > Customer emails, turn on emails for successful payments & refunds.
5. Customer Portal: In Settings > Billing > Customer Portal, consider activating the link to the customer portal if needed later.
6. Fraud Prevention Rules: In the dashboard search box, type 'rules' and click Fraud Prevention > Rules. Ensure the first 3D Secure rule ("Request 3D Secure if 3D Secure is required for card") is enabled. Consider turning on the second one ("Request 3D Secure if 3D Secure is supported for card"). Ensure payments are blocked if CVC verification fails.
7. Test Mode: Turn ON Test Mode in the dashboard.
8. Product & Price: Create a new product and associated price plan in the Products section. Copy the Price ID (e.g., price_1ju5GD...).
9. Configuration: Add the copied Price ID to your application's configuration file (e.g., config.ts or similar, depending on your setup).

Local Development Setup

Configure environment variables and webhooks for your local machine:

1. API Keys: In Developers > API Keys (while in Test Mode), copy your Publishable key (pk*test*...) and Secret key (sk*test*...).
2. Environment File: Add these keys to your .env file as STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY respectively.
3. Webhook Setup:
   • Install the Stripe CLI and log in stripe.
   • Forward webhook events to your local API endpoint using the command: stripe listen --forward-to - localhost:3000/api/webhook/stripe (adjust the port and path if necessary).
   • The CLI will provide a Webhook Signing Secret (whsec\_...).
4. Webhook Secret: Add this signing secret to your .env file as STRIPE_WEBHOOK_SECRET.

Production Setup

Configure Stripe for your live application:

1. Live Mode: Turn OFF Test Mode in your Stripe Dashboard.
2. Live API Keys: In Developers > API Keys, copy your live Publishable (pk*live*...) and Secret (sk*live*...) keys.
3. Production Environment Variables: Add the live keys and the live Price ID to your production environment variables (e.g., Vercel, Netlify).
4. Live Webhook Endpoint:
   • In Developers > Webhooks, click "Add endpoint".
   • Set the Endpoint URL to your production domain + your webhook API path (e.g., https://yourdomain.com/api/webhook/stripe).
   • Select the necessary events to listen for (e.g., checkout.session.completed, customer.subscription.updated, customer.subscription.deleted).
   • Create the endpoint.
5. Live Webhook Secret: Copy the live Webhook Signing Secret (whsec\_...) provided after creating the endpoint.
6. Production Webhook Secret: Add this live signing secret as STRIPE_WEBHOOK_SECRET in your production environment variables.