Setting Up Clerk and Stripe Credentials

This starter kit uses Clerk (opens in a new tab) to authenticate users and Stripe (opens in a new tab) to handle payments.

To integrate Clerk and Stripe with your Next.js SaaS Starter Kit, you'll need to set up accounts with both services and obtain specific credentials. These credentials will be added to your .env file to ensure proper configuration and functionality. This document will guide you through the steps to create and set up Clerk and Stripe accounts and obtain the necessary credentials.

Setting Up Clerk

Please refer to Clerk's documentation (opens in a new tab) in order to complete the following steps.

Create a Clerk Account

Go to the Clerk website (opens in a new tab) and sign up for a new account.
Follow the onboarding steps to complete your account setup.

Create a New Application

Once logged in, navigate to the Dashboard.
Click on Create Application and follow the prompts to set up your new application.

Save the Clerk Credentials

In your application dashboard, navigate to the API Keys section.

Copy the Clerk Secret Key and Clerk Publishable Key and save them to be used in the next step.

CLERK_SECRET_KEY=<your-clerk-secret-key>
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>

Setting Up Stripe

Create a Stripe Account

Go to the Stripe website (opens in a new tab) and sign up for a new account.
Follow the onboarding steps to complete your account setup.

Create a New API Key

In your Stripe Dashboard, navigate to Developers > API keys.
Click on Create secret key to generate a new secret key.
Copy the Secret Key and the Publishable Key listed in this section.

Set Up Webhooks

Why Use Webhooks: Webhooks allow your application to receive real-time updates from Stripe about payment events. This ensures that your application can respond immediately to events like successful payments, subscription renewals, and disputes.
For local development, you can use a tool like localtunnel (opens in a new tab) to expose your local server to the internet. This creates a public URL that Stripe can use to send webhook events.

Using localtunnel

Install localtunnel globally by running:
```
npm install -g localtunnel
```
In your terminal, start localtunnel with the following command to expose port 3000 (or the port your local server is running on) and specify a random subdomain.
```
lt --port 3000 --subdomain mysaasapp
```
The localtunnel tool will provide you with a public URL, such as https://mysaasapp.loca.lt.
Once you have a public URL from localtunnel, use it to set up your Stripe webhook.

Setting Up the Webhook in Stripe

Navigate to Developers > Webhooks in your Stripe Dashboard.
Click on Add endpoint.
Enter the endpoint URL in the format <public_url>/api/webhooks/stripe. For example, if your localtunnel URL is https://mysaasapp.loca.lt, the endpoint URL will be https://mysaasapp.loca.lt/api/webhooks/stripe.
Select the following events to listen to:
- checkout.session.completed
- charge.succeeded
Click Add endpoint.
Copy the Webhook Secret from the newly created webhook.

Save the Stripe Credentials

By now, you should have the following credentials. Please save them in order to use them in the next step.

STRIPE_SECRET_KEY=<your-stripe-secret-key>
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<your-stripe-publishable-key>
STRIPE_WEBHOOK_SECRET=<your-stripe-webhook-secret>

Conclusion

By following these steps, you will have set up your Clerk and Stripe accounts and obtained the necessary credentials to integrate these services with your SaaS World Starter Kit.

Step 1 - Purchase the starter kit Step 3 - Set up your development environment