Bubble.io & Lemon Squeezy Customer Portal

Introducing Lemon Squeezy's New Customer Portal Feature

Lemon Squeezy has added an exciting new feature to their payment gateway platform: customer portals. If you're building a SaaS or MVP with Bubble, this can save you loads of time because it means that the Lemon Squeezy invoices, allowing people to update their subscriptions, and in fact tons of features are basically baked in and can be added into your Bubble app in just a few minutes. I'm going to show you how in this video.

Offloading Responsibility to Lemon Squeezy

You're basically offloading the responsibility onto Lemon Squeezy to design the customer portal or the client area. Anything to do with billing, they've designed it. Your data is automatically there when you match up the right user to the right data. I'm going to show you how in this video.

The Importance of Planet No Code

Now if you're learning Bubble, you need to check out our website planetnocode.com. It can be such a time saver. You can save yourself so much time by heading over there and checking out our hundreds of Bubble tutorial videos, many of which you cannot find on our YouTube channel.

Two Ways to Implement Lemon Squeezy Customer Portals

Back to Lemon Squeezy. They've got a help article here and there are two ways that you can go about it. There's basically a simple process which is you simply send users to your Lemon Squeezy URL. Or if you set up a custom domain, then they'll have to enter their email address, they'll get a magic link, and then they can view the customer portal.

A More Seamless User Experience

Now that's going to be very quick for you to set up, but it's an extra step for your users. What if we could set it up so that all they need to do was click a button maybe in your settings sub-menu or your user area that sorts user profile and you link them straight through to the Lemon Squeezy client area customer portal and they're automatically signed in? That's what I'm going to demonstrate to you today.

Retrieving Subscription ID Through Lemon Squeezy API

We need to retrieve a subscription ID through the Lemon Squeezy API. We're kind of jumping in midway through or partway through the process of fully integrating Lemon Squeezy into your Bubble app. We're at a point where I'm going to assume you've watched our previous videos, you set up a subscription successfully, the checkout process is all working, and you set up webhooks to save a subscription ID because it's the subscription ID that we need in order to get back this unique link here that your users can sign in to the customer portal with.

Setting Up the Lemon Squeezy API Connection in Bubble

In my Bubble app, if I go onto plugins, I've got my Lemon Squeezy API connection set up here in the Bubble API connector. In previous videos, I've covered how to get a customer, how to get order, but we're focusing right now on retrieve subscription. So make sure that you've got the authorization fields all checked or entered correctly here including the shared headers.

Using the Lemon Squeezy API Documentation

If you're unsure how to enter the data here, then head over to the documentation. We're looking at this one here. So we're using a GET API call and we're sending it to this location with the subscription ID there.

Setting Up Webhooks for Subscription Data

Remember you'll have a webhook set up so that when a user successfully subscribes, Lemon Squeezy sends that data back to your Bubble app and you save it to your user. So what I've got set up here is in database for my demo user here, I've got subscription ID and I've saved it just in here. Then I'm going to be previewing and demoing my app logged in as that user.

Testing the API Call

We take this and we plug it in to the Bubble API connector which gives us something that looks like this. I'm going to copy this to the clipboard because I need to make this bit dynamic and private and check that. This is going to get data about this subscription ID.

Retrieving Subscription Data from Lemon Squeezy Dashboard

From my Lemon Squeezy dashboard, hang on let me call that up, this is my test mode version. I can go into subscriptions and then I can click on a subscription. In order to view the ID, I think I basically just have to look at the URL. So there's my subscription ID there. Remember you will have retrieved this via webhook. I'm just kind of mashing together the steps.

Creating a Workflow for the Customer Portal

I can now test this API call. I'm going to change that back to action and I get all of these fields back about the subscription. The most important one will be this attributes URL customer portal. That's what I need. How do I now make this into an action on the front end? Looking back at the documentation here, the URL expires after 24 hours. I basically need to generate this unique URL to securely log my user and the right user into the Lemon Squeezy customer portal each time they click the button.

Setting Up the Customer Portal Button

Let me show you how I would go about doing that. I'm on my page that I've been demoing Lemon Squeezy in previous videos. I'm going to add to the button and say "customer portal". In fact, you would more likely say "update billing". Let's add in a workflow.

Configuring the Workflow

The first thing I'm going to do is on plugins, go to my Lemon Squeezy retrieve subscription action. Now this subscription here is the one that I have got placed in my value here, and that's great for testing, but actually I want to delete that because I don't want the wrong person going to the wrong billing gateway. That would actually be quite disastrous because of all the private data that is there.

Linking to the Customer Portal

Back to workflow, I want to make sure that this is filled with current user subscription ID and then I want to go to external website results customer portal URL preview. So I'm logged in as the user and I'm going to click update billing and it takes me through to the member. This is test data, these are subscriptions that set up in a previous video, but it takes me through to the customer portal and they can see all their subscriptions.

Demonstrating the Customer Portal Features

I've really ended up the number of subscriptions this test user has. They can update their billing information. So for example, if they wanted to cancel this subscription, Lemon Squeezy just takes care of all of it. I mean imagine the time that you've saved because you've not had to design any of this. You've not had to integrate in any of the API calls to retrieve individual subscription statuses and display them in the repeating group. This really could save you half a day of development work and it's dead easy.

Conclusion and Call to Action

If you've got any questions, please leave a comment below. If you'd like to see any other Lemon Squeezy videos, we'd really appreciate also the requests and the suggestions. And of course, like and subscribe - it really helps us out on YouTube.