# Stripe

Shipped supports Lemon Squeezy by default, but you can activate Stripe in few simple steps.

### Requirements

To setup Stripe you need:

* A [Stripe](https://stripe.com/) account
* A [database](https://docs.shipped.club/features/database) configured

### Create the subscription plans

Access to the [Stripe Dashboard](https://dashboard.stripe.com/), go to "Product catalogue" and create a new product.\
Define the name, description, pricing (and more) of your plan.\
Once created, go to Products > Payments > Payment Links and copy the URL of the product.

Open the file `src/config/pricing.constants.ts` and paste the payment link URL in the right plan.

{% hint style="info" %}
For Lifetime deals, update the file `src/config/lifetime.constants.ts` instead.
{% endhint %}

This step ensure that when the users interact with the <[`Pricing`](https://docs.shipped.club/components/pricing)`/>` component, when they click on the "Subscribe" button, the checkout of the correct product will open in the browser.

### Update the database

You need to pre-populate the table `SubscriptionPlan` of the database with your products.

First of all, get the product IDs. To do so, go to the [Stripe Dashboard](https://dashboard.stripe.com/) go to "Product catalogue", click on a product and copy the "Product ID".

Then open your database (run the command `npx prisma studio` in your terminal to open a database client).\
Open the table `SubscriptionPlan`.\
Add a new record, and populate "name", "productId", and "price" (the other columns will be pre-populated).\
Click on "Save change".

### Create a Webhook

You need to configure a Webhook in Stripe. A webhook is a backend endpoint (a route in Next.js) that will be called when a new event occurs (like a new purchase, or a subscription deletion).\
Shipped provides the code to handle these requests.

Go to the Stripe Dashboard and click on Developers > Webhooks.\
Click on "Add destination" and select the following events:

```
customer.subscription.created
customer.subscription.updated
customer.subscription.deleted
invoice.paid
```

Click "Continue" and select "Webhook endpoint" as destination type.

As "Endpoint URL" insert the value `https://<yourdomain>/api/webhooks/stripe` and continue.

At this point the Webhook has been created.

Click on the Webhook, copy the `Signing secret` and paste it in `.env` as the value of `STRIPE_WEBHOOK_SECRET`.

### Get the Stripe keys

To correctly interact with Stripe, you need to configure two other environment variables: STRIPE\_SECRET\_KEY and STRIPE\_PUBLIC\_KEY.

Go to the [Stripe Dashboard > Developers > API Keys](https://dashboard.stripe.com/apikeys).\
Copy the value of **Publishable Key** and set it to STRIPE\_PUBLIC\_KEY.\
Copy the value of **Secret Key** and set it to STRIPE\_SECRET\_KEY.

### Enable Stripe in Shipped

Edit the file `src/config/config.ts` and set `paymentProvider` to "stripe".

This will affect the Billing button across your SaaS, when a user clicks it, Shipped retrieves the customer portal URL and opens it.

### Test mode

Stripe supports a test mode, which is an exact replica of your Stripe account, but that can be used to perform tests.\
This means you'll have to create new products, and set the test keys for the test mode to work with your code.

To execute a purchase, use the credit card number 4242 4242 4242 4242 at checkout.

### Customize the logic

All the logic of the webhook is contained into `src/app/api/webhooks/stripe/route.ts`\
If you need additional logic like, sending emails, and so on, it's the right place to update.

### Test your local webhook

When you develop some changes, it's comfortable to test if they work locally, before pushing to production.

1. Run your project with `npm run dev` and run the stripe cli with\
   `stripe listen --forward-to localhost:3000/api/webhooks/stripe`
2. Copy the webhook signing secret from the terminal and set it to `STRIPE_WEBHOOK_SECRET`
3. Then open a Stripe payment link and execute a payment
4. Your local webserver will be called