Tutorials

How to add a customer portal to your SaaS with Lemon Squeezy

Dan Rowden  ·  September 9, 2023

After you've sold access to your application with Lemon Squeezy-powered subscriptions, you need to build an interface for your customers so they can manage their subscriptions.

This includes changing plans, updating billing information, downloading receipts and cancelling.

Lemon Squeezy offers a Customer Portal, which is a no-code portal that you can easily drop into your application by adding a single URL.

Building your own billing portal

The most integrated and seamless way to add a billing section into your app is to build one from scratch, using Lemon Squeezy's API and webhooks.

Doing this will make your billing features feel more seamless in your application, but it's a lot more work.

To build a custom billing section, you will need to:

  • sync plan data from Lemon Squeezy
  • listen to webhooks to sync subscription data
  • build UI for creating subscriptions
  • build UI for changing plans
  • build UI for cancelling/resuming subscriptions
  • build UI for pausing/unpausing subscriptions
  • build UI for updating payment methods

We have a handy Developer Guide, which covers how to do all this.

Add a Lemon Squeezy-powered customer portal to your app

A much simpler way to add subscription billing features to your application is to use Lemon Squeezy's Customer Portal.

This is a no-code solution that can be added with a simple URL.

Every store has a Customer Portal already set up and every subscription customer can access it (though you have the option to disable Customer Portal completely if you want).

This is what the Customer Portal looks like:

To add this to your app, all you have to do is add a "Manage my subscription" (or similar) button, linking to the Customer Portal.

You can get the URL for Customer Portal in two ways.

The first way is to use the URL [STORE].lemonsqueezy.com/billing.

Or, if you have a custom domain set up in your store you can use yourcustomdomain.com/billing.

With this default URL, customers can enter their email address to gain access via a magic link.

A more streamlined method is to call the Retrieve a subscription API endpoint, which contains a signed URL to the portal. This URL will automatically log in your customers when they visit it.

{ ... "urls": { "update_payment_method": "https://my-store.lemonsqueezy.com/subscription/1/payment-details?expires=1688469629&signature=4577154142b49da48f73809288ef0f52ae6a91c860b7bdc22ff5bddba842a455", "customer_portal": "https://my-store.lemonsqueezy.com/billing?expires=1688469629&user=60000&signature=f040cb5a25ccebd8d05c2937e9a0559a750f5d5b8b32a40162ca43e130187d2c" }, ... }

This URL expires after 24 hours, so make sure to call the API endpoint every time the customer clicks to go to the portal (view an example of this in our Developer Guide).

Once the button and link are added to your app, your customers can easily manage their subscriptions and payment methods and view all of their receipts.

Customise the portal

There are a few options for customising the Customer Portal. These include hiding and showing different parts of the portal as well as changing the title, text and Back link.

These can be managed in the Design settings in your Lemon Squeezy dashboard.

Previous
Next.js SaaS billing portal