Collecting Payment

Veloz kits uses Lemonsqueezy for handling payment within the codebase.

⚠️

Before we proceed, make sure you have a store on Lemonsqueezy (opens in a new tab)

Before collecting payment in your app, you need to create products on your lemonsuqeezy store. This product are basically represented as pricing plans on your app. Follow this guide

⚠️

Make sure you have your API_KEY created already, if not follow this guide before proceeding further.

Once you have your products created, you would need the following config from lemonsuqeezy:

store_id : This is the id of your store on lemonsqueezy.
product_id : This is the id of the product you want to collect payment for.
variant_id : This is the id of the variant of the product you want to collect payment for.

In development mode, veloz kits provide you 3 urls which helps you get this details while in development.

⚠️

Calling this url's in production would return an error. It has been configured to only work in development mode. Also make sure you are logged in before calling this url's.

Click on each links below to see the response you get from each url.

Store http://localhost:4000/api/lemonsqueezy/store (opens in a new tab)
Products http://localhost:4000/api/lemonsqueezy/product (opens in a new tab)
Variants http://localhost:4000/api/lemonsqueezy/variant (opens in a new tab)

Calling each of those endpoints above should return a response like this:

store

product

variants


_18// I have  3 stores on my lemonsqueezy account,
_18// which is why you see 3 stores in the response below.
_18// Take note of the store ID.
_18
_18[
_18  {
_18    "id": "32433",
_18    "name": "Benrobo"
_18  },
_18  {
_18    "id": "59718",
_18    "name": "Test Demo"
_18  },
_18  {
_18    "id": "59946",
_18    "name": "Veloz"
_18  }
_18]

You would notice that each variant has a duration constituting of month or year. This is the duration of the subscription plan.

Pricing Plan

Veloz kit by default support 3 pricing plans, which are: LITE, BASIC & PREMIUM.

Youre'nt limitted to this config, you could customize this plan based on your preferrence.

Updating Pricing Plan

Follow the instructions below based on the starter kit techstack you purchased.

Nextjs

If everything is set up correctly, it high time you update your pricing plan config on your app. Headover to src/data/pricing/plan.ts. Every plan for your saas is managed within that file.

Monthly & Yearly subscriptions only is supported for now.

Now simply update the pricing plans config based on the priduct (id, amount, currency) , variants id, plan, name. The id attribute on line 2 is just random and not part of lemonsqueezy product id. But when changed, make sure you update the id attribute of that specific plan features otherwise it won't reflect on landing page. learn more about this.

plan.ts


_81export const pricingPlans = [
_81  {
_81    id: "lite_84507",
_81    name: "Lite",
_81    key: "lite",
_81    variants: [
_81      {
_81        id: 183156,
_81        test_variant_id: 183156,
_81        duration: "monthly",
_81        pricing: {
_81          currency: "USD",
_81          amount: 4,
_81        },
_81      },
_81      {
_81        id: 198725,
_81        test_variant_id: 198725,
_81        duration: "yearly",
_81        pricing: {
_81          currency: "USD",
_81          amount: 48,
_81        },
_81      },
_81    ],
_81    product_id: 147184,
_81  },
_81  {
_81    id: "basic_104548",
_81    name: "Basic",
_81    key: "basic",
_81    variants: [
_81      {
_81        id: 183213,
_81        test_variant_id: 183213,
_81        duration: "yearly",
_81        pricing: {
_81          currency: "USD",
_81          amount: 108,
_81        },
_81      },
_81      {
_81        id: 198720,
_81        test_variant_id: 198720,
_81        duration: "monthly",
_81        pricing: {
_81          currency: "USD",
_81          amount: 9,
_81        },
_81      },
_81    ],
_81    product_id: 149209,
_81    recommended: true,
_81  },
_81  {
_81    id: "premium_123918",
_81    name: "Premium",
_81    key: "premium",
_81    variants: [
_81      {
_81        id: 180561,
_81        test_variant_id: 180561,
_81        duration: "monthly",
_81        pricing: {
_81          currency: "USD",
_81          amount: 20,
_81        },
_81      },
_81      {
_81        id: 198727,
_81        test_variant_id: 198727,
_81        duration: "yearly",
_81        pricing: {
_81          currency: "USD",
_81          amount: 240,
_81        },
_81      },
_81    ],
_81    product_id: 147501,
_81  },
_81] satisfies PricingPlan[];

Notice the variants id and test_variant_id, this two id are used for same purpose, the only difference is that the id would be used in production and when your store has been activated.

⚠️

When a store is Activated, everything changes, you would need to recreate a new product, create a new API KEY and update the id attribute Only of each variant to the new variant ID and update your .env file based on the new API_KEY and webhook secret. learn more

Once that has been completed, navigate to the settings > billing section of the app. A billing card should be present which shows the pricing plans available and provide you an option to switch to a specific plan.

If you already have an active subscription plan, one of the button with that active subscription plan would be disabled with a "Subscribed" label.

Clicking one of the Switch to this plan button would create a lemonsqueezy checkout with the user details as custom_data and then redirect the user to lemonsqueezy store.

you could use the below Test Cards details

card number - 4242-4242-4242-4242
cvv - 123
expiry date - 12/25

Once payment has been made and was successfull lemonsqueezy sends a webhook containing the payment details. Learn more about Lemonqueezy Webhooks

Email Analytics