Configure payments

SupaSaaS ships with full support for subscription based payments or one-time payments, and fully integrates with the following payment providers:

• Stripe
• Lemon Squeezy

Pricing plans

You can set up your pricing plans in the @/config/pricing.ts file. Simply add or edit the pricing plans as needed.

Make sure that you have the correct checkout URL for your product in the checkoutUrl field.

@/config/pricing.ts
// Pricing details
export const affiliatePercent = 40;
export const recommendedText = "Most Popular";

// Pricing for one-time payments
export const pricingPlans = [
  {
    title: "Basic",
    available: true,
    recommended: true,
    price: 99,
    priceCompare: 199,
    description: "Plan description",
    checkoutUrl: "#",       // checkout url for your stripe or lemon squeezy product
    features: ["Feature 1", "Feature 2", "Feature 3"],
  },
  {
    title: "Pro",
    available: true,
    recommended: false,
    price: 149,
    priceCompare: 299,
    description: "Plan description",
    checkoutUrl: "#",       // checkout url for your stripe or lemon squeezy product
    features: ["Feature 1", "Feature 2", "Feature 3"],
  },
];

You don't need to specify whether it's a subscription or one-time plan, the payments implementation logic handles this for you.

Configure database

In order for the webhooks to work, we first need to populate our database with the price plan information.

Start the Prisma Studio by running the following command in your terminal:

npx prisma studio

We can use this handy web interface to start adding ProductPlans to our database.

ProductPlan

Navigate to the ProductPlan table and click on Add Record.

Give the plan a name and price, for example "Pro" and "149".

We also need to enter the productId. This is very important as this is the main lookup field our webhooks will be looking for when determining what level of access to give your users.

Simply paste in the productId from your payment provider (Stripe or Lemon Squeezy) and click Save.

TODO: Add detailed instructions for the productId retrievel on stripe/lemonsqueezy

ProductPlanPropertyName

This is a simple ENUM table that stores the possible properties that a ProductPlanProperty can have and can be found at @/prisma/schema.prisma.

Simply add the property names that you want to use in your app. For example, MAX_IMAGES or MAX_USERS.

@/prisma/schema.prisma
enum ProductPlanPropertyName {
  MAX_IMAGES
  // ... add more properties here
}

ProductPlanProperty

Here you can assign properties to a particular plan. For example, if you have a plan that allows for 10 images to be uploaded, you can add a property called MAX_IMAGES with a value of 10.

In order to add a new property, navigate to the ProductPlanProperty table on Prisma Studio and click on Add Record.

Give the property a name and value (for example MAX_IMAGES and 10).

You can then click on the ProductPlan button, in the plan column, to associate this property with a particular plan. Prisma will then save the relationships and id looksup for you automatically.

Webhook and API setup

The webhook implementation is stored in the @/app/api/webhooks directory. Here you'll be able to add to or edit the logic as needed for any supported payment provider.

To get started, we need to get the webhook secret from our payment provider (Stripe or Lemon Squeezy) and add it to our environment variables.

Lemon Squeezy

1. Head over to the Lemon Squeezy dashboard and click on Settings, then go to Webhooks.

2. Click on the "+" icon.

3. Fill in the Callback URL with the URL of your webhook endpoint. This will be http://yourdomain.com/api/webhooks/ls.

4. Generate a secret key and paste it into the Signing secret field.

5. Select the following events: order_created, subscription_created, subscription_updated, then click Save Webhook.

6. Now head over to your .env file and add the following environment variables:

.env
LEMONSQUEEZY_WEBHOOK_SECRET_KEY="your secret key goes here"

7. Next, head to the Lemon Squeezy API settings page and click on the "+" icon to create a new API key.

8. Copy the API key and add it to your .env file:

.env
LEMONSQUEEZY_API_KEY="your api key goes here"

Stripe

1. Head over to the Stripe webhook dashboard and click on Add endpoint.

2. Fill in the Endpoint URL with the URL of your webhook endpoint. This will be http://yourdomain.com/api/webhooks/stripe.

3. Generate a secret key and paste it into the Signing secret field.

4. Select all of the events, then click Add endpoint.

5. Click on the newly created endpoint and reveal then copy the Signing secret.

6. Now head over to your .env file and add the following environment variables:

.env
STRIPE_WEBHOOK_SECRET_KEY="your secret key goes here"

6. Next, head to the Stripe API settings page and click the Create secret key button.

7. Give it a name and add the secret key to your .env file:

.env
STRIPE_API_KEY="your api key goes here"

Testing the payment flow

Now that we have everything set up, we can start testing the payment flow. We will need to provide a way for our local development server to expose itself to the internet so that the payment provider can send webhooks to it.

Expose your local server

We can use a tool like ngrok to provide a https endpoint where we can receive webhooks.

1. Start your local development server by running

npm run dev

2. In a seperate terminal, start ngrok by running

ngrok http 3000

3. Copy the Forwarding URL that ngrok provides and set it as the webhook URL in your payment provider's webhook settings.

An example URL for Lemon Squeezy would look like https://c458-79-135-122-171.ngrok-free.app/api/webhooks/ls.

You can now start testing your payment flow by purchasing your products on test mode, and see how it interacts with the app in your console.

Test card details

You can use the following test card details to simulate a payment:

• Card number: 4242 4242 4242 4242
• Expiry date: Any future date
• CVC: Any 3 digits
• ZIP: Any 5 digits