Stripe Setup

Creating a Checkout

StarterKitPro uses a component PurchaseButton to trigger the creation of a Stripe Checkout session for either one-time payments or subscriptions. This component interacts with your backend to initiate the process.

Webhook Handling

Your backend API endpoint (e.g., /api/webhook/stripe) listens for selected Stripe webhook events. It verifies the incoming request using the webhook secret and processes the event.

Based on the event type like:

• checkout.session.completed
• customer.subscription.updated
• customer.subscription.deleted
• others...

StarterKitPro updates the user's record accordingly (e.g., set hasAccess to true or false). You can customize this endpoint to add other business logic, such as sending specific emails.

Setup

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.stripe.plans[0].priceId in config.js 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.local file as NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY respectively.
3. Webhook Setup:
   • Install the Stripe CLI and log in (stripe login).
   • 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.local 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.

Optional Configurations

• Payouts: In Balance > Payouts, you can set a specific schedule for receiving payouts.
• Customer Emails: Double-check Settings > Customer emails are configured as desired for live mode.