Stripe

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

Overview

Stripe is a powerful payment processor that allows you to manage payment and subscriptions efficiently. This guide will show you how to set up Stripe, including creating subscription plans, generating required keys, and configuring webhooks.

Note
To use a different payment provider, skip this step and follow either the LemonSqueezy guide or Paddle guide for subscription integration.

Getting Stripe Secret Key

To begin, you need a Stripe account. If you don’t have one, go ahead and create one from Stripe (opens in a new tab).

Log in to your Stripe account.
Enable Test Mode: For this integration, we’ll be using Test Mode. Ensure to activate your Stripe account and switch to the real Secret Key before deploying.
Go to the Developers tab.
Go to the API Keys tab, scroll down to the Secret Key, and copy it.
Update Environment Variable: Now, Add the Secret Key to your .env file:
```
STRIPE_SECRET_KEY=YOUR_STRIPE_SECRET_KEY
```

Creating Subscription plans

Now that we got the keys, let’s create a subscription plan.

Login to your Stripe account.
Go to the Products tab and click on the Add a Product button.

Fill Product Information: Complete the form, and make sure to choose "Recurring payment."

Click on Save product and note down the details.

Getting Subscription data

Now that we have successfully created the subscription, we need to get the subscription plan data to use it on our app.

To update the data open up the pricing/pricingData.ts file.
Get Plan Details: From your Stripe Dashboard, navigate to Dashboard-> Product catalog, and open your product.

Now, get the Name, Price, and price_id.

Update Data: Update the pricingData.ts file with these details.

Note
For the price, make sure to multiply it by 100; it’s a convention stripe uses. For example, $5 becomes 500.

Webhook Integration

We've integrated Stripe, created subscription plans, and loaded the data on the pricingData.ts file.
Now, we will have to integrate Stripe Webhook to save the subscription data in the database.

First, we will see how to enable Webhook for testing locally, and then we will see how to enable it for production.

Webhook integration for local development

Add Local Listener: Go to Developers>Webhooks>Add local listener
Select Test in a local environment
Install Stripe CLI (opens in a new tab) and login to stripe
```
stripe login
```
Run Webhook Server: Run this command to forward the event to the webhook. I’ve added this script to the package.json file
```
npm run stripe:listen
```
It'll start the webhook server and give us the webhook secret.
Copy the webhook secret (whsec_...) from the terminal and save it in the .env file:
```
STRIPE_WEBHOOK_SECRET=
```

Now when you make a purchase it'll update the user's table on the Database.

You'll notice these entries getting updated with appropriate data.
stripe_current_period_end
stripe_customer_id
stripe_price_id
stripe_subscription_id

Webhook integration for production

Add Endpoint: Go to Developers>Webhooks>Add an endpoint
Now add the webhook URL, which is yoursite.com/api/stripe/webhook.
Select API Version: Choose the Latest API version from the dropdown.
Click on the Select events button.
Select Events: Check the Select all events and then click on the Add events button.
Add Endpoint: After that scroll down and click on the Add Endpoint button.

We are almost done. One last thing we have to do is get the Webhook secret for the live site and add that to the .env file.

After you’ve added the endpoint you’ll see something like this.

Click on Reveal it'll give you a new webhook secret for the live site.

Update the env with the new secret.
```
STRIPE_WEBHOOK_SECRET=YOUR_LIVE_WEBHOOK_SECRET
```

Tips

Testing: Use Stripe's Test Mode to thoroughly test your integration before switching to live mode.
Documentation: Refer to Stripe’s official documentation for detailed guidance and troubleshooting.
Security: Ensure all API keys and secrets are stored securely.
Event Selection: Select only the webhook events relevant to your application to avoid unnecessary data processing.
User Experience: Make the payment and subscription process as seamless as possible for users to enhance their experience.

Summary

By following these steps, you will have integrated Stripe into your SaaSBold boilerplate, enabling robust payment and subscription management. Ensure to test the integration thoroughly in Test Mode before moving to the live environment.

Authentication LemonSqueezy