---
description: >-
  SaaSPilot comes with Stripe integration to manage payment and subscriptions.
  This part of the documentation will show you how to integrate Stripe into your
  SaaS Boilerplate.
---

# Stripe

### 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.

Steps to Integrate Stripe

### Getting the Stripe Secret Key

To begin, you need a Stripe account. If you don’t have one, go ahead and create one at [Stripe](https://stripe.com/).

{% hint style="info" %}
For this integration, we are using the Test Mode.
{% endhint %}

1. **Login to Stripe**: Log in to your Stripe account.
2. **Enable Test Mode**: For this integration, we use Test Mode. Ensure to activate your Stripe account and switch to the real Secret Key before deploying.
3. Go to the **Developers** tab.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FcHsKvAZCH1WhxvHQunLn%2Fimage%20(21).png?alt=media&#x26;token=45745aa9-b6a1-4033-8600-80581000f104" alt=""><figcaption><p>Developer Tab</p></figcaption></figure>

4. **API Keys**: Go to the **API Keys** tab, scroll down to the Secret Key, and copy it.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2F6JSUYDaC5bCWAcQ3NSHG%2Fimage%20(22).png?alt=media&#x26;token=97f83066-a4ae-47ec-89c5-c1727926002e" alt=""><figcaption><p>Stripe - Secret Key</p></figcaption></figure>

5. **Update Environment Variable**: Now, Add the Secret Key to your `.env` file:

```
STRIPE_SECRET_KEY=YOUR_STRIPE_SECRET_KEY
```

***

### Creating the Subscription plans

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

1. Login to your Stripe account.
2. **Navigate to Products**: Go to the **Products** tab and click on the **Add a Product** button.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FLh6WkX7XTR3FYbPTo3lh%2Fimage%20(23).png?alt=media&#x26;token=1090460e-5e2f-4964-960c-ae53f55a297e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FuUot3w8PUm1F6TzOAnal%2Fimage%20(24).png?alt=media&#x26;token=a3a36dd5-3c83-410c-9bf1-f0922ba5707d" alt=""><figcaption><p>Stripe - Pricing Plan</p></figcaption></figure>

4. **Save Product:** Save the product and note the details.

***

### Getting the Subscription data

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

**Open pricing data component**: To update the data open up the **pricing/pricingData.ts** file.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FIYNZWFJlH3lMayHIyyhZ%2Fimage%20(25).png?alt=media&#x26;token=c874fc14-90f6-4dc8-b209-58beca77095c" alt=""><figcaption></figcaption></figure>

**Get Plan Details**: From your Stripe Dashboard, navigate to **Dashboard->** **Product catalog**, and open your product.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FrJwYWVvu9LO3El7gJ2vR%2Fimage%20(26).png?alt=media&#x26;token=c8dae4f2-510d-487d-b191-2ccbb4f69b30" alt=""><figcaption><p>Stripe - Product Catlalog</p></figcaption></figure>

Now, get the <mark style="color:purple;">`Name`</mark>, <mark style="color:purple;">`Price`</mark>, and <mark style="color:purple;">`price_id`</mark>.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FqX7mxulmh8gelrcZwZa7%2Fimage%20(27).png?alt=media&#x26;token=99a48076-b31d-444a-b61c-90a259feb221" alt=""><figcaption></figcaption></figure>

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

{% hint style="warning" %}
**Note:** For the price, make sure to multiply it by 100; it’s just a conventional stripe use. For example, $5 becomes 500
{% endhint %}

***

### 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**

1. **Add Local Listener**: Go to **Developers->Webhooks->Add local listener**

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FbOzqKrEgRkkpIZApAMyL%2Fimage%20(28).png?alt=media&#x26;token=8b632e11-0856-4ec0-8e34-85c6cdc58f04" alt=""><figcaption></figcaption></figure>

2. **Select Test Environment**: Select **Test in a local environment**

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FS1Rhl7RM68HUuwGiEIo6%2Fimage%20(29).png?alt=media&#x26;token=5a2c14e7-6614-42d2-8eb1-c83a669b6448" alt=""><figcaption><p>Stripe - Test Enviroment</p></figcaption></figure>

3. **Install Stripe CLI**: Install [Stripe CLI](https://stripe.com/docs/stripe-cli) and login to stripe

```
stripe login
```

4. **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.

5. **Copy Webhook Secret**: Copy the webhook secret (whsec\_...) from the terminal and save it in the <mark style="color:purple;">`.env`</mark> file:

```
STRIPE_WEBHOOK_SECRET=
```

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

You'll see these entries got updated with the appropriate data.

<mark style="color:purple;">**stripe\_current\_period\_end**</mark> \ <mark style="color:purple;">**stripe\_customer\_id**</mark> \ <mark style="color:purple;">**stripe\_price\_id**</mark> \ <mark style="color:purple;">**stripe\_subscript,ion\_id**</mark>

**Webhook integration for production**

1. **Add Endpoint**: Go to **Developers->Webhooks->Add an endpoint**
2. **Add Webhook URL**: Now add the **webhook URL**, which is **yoursite.com/api/stripe/webhook.**
3. **Select API Version**: Choose the **Latest API version** from the dropdown.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FWgYmhX9VkJVCxF0OjZ8i%2Fimage%20(30).png?alt=media&#x26;token=9d52b4ec-2739-4cad-aad2-ea336546cf6e" alt=""><figcaption><p>Stripe Events</p></figcaption></figure>

4. Click on the **Select events** button.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FjU1BuX4nAjL6j5eQsVy3%2Fimage%20(31).png?alt=media&#x26;token=9beee050-de03-4f24-aa2e-198ef98befac" alt=""><figcaption></figcaption></figure>

5. **Select Events**: Check the **Select all events** and then click on the **Add events** button.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FCTgB3wGRX9ztmZYGrMyw%2Fimage%20(32).png?alt=media&#x26;token=06c2be0b-8ae3-400c-b40b-d598c175a29e" alt=""><figcaption><p>Stripe - Add events</p></figcaption></figure>

6. **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 <mark style="color:purple;">.env</mark> 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.

<figure><img src="https://4163021955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ft40347ZB9PUpZzu3pTeZ%2Fuploads%2FtDxVaCcebddD0tXvkD31%2Fimage%20(33).png?alt=media&#x26;token=9a68b4fd-a121-4f0c-b917-66fcbb3e7442" alt=""><figcaption><p>Stripe - Webhook Secret</p></figcaption></figure>

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 SaaSPilot boilerplate, enabling robust payment and subscription management. Ensure to test the integration thoroughly in Test Mode before moving to the live environment.
