Stripe

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

Requirements

To setup Stripe you need:

• A Stripe account

• A database configured

Create the subscription plans

Access to the Stripe Dashboard, 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.

For Lifetime deals, update the file src/config/lifetime.constants.ts instead.

This step ensure that when the users interact with the <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 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. 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