Lemon Squeezy have added an exciting new feature to their payment gateway platform and that is customer portals and if you're building a SaaS or MVP with Bubble this can save you loads of time because it means that the displaying back invoices allowing people to update their subscriptions, in fact tons of features are basically baked in and can be added into your Bubble app in just a few minutes and I'm going to show you how in this video 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.

Learning Bubble

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.

Understanding Lemon Squeezy Documentation

So 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 and then they'll have to enter their email address, they'll get a magic link and then they can view the customer portal. Now that's going to be very quick for to set up, but it's an extra step for your users.

One click Lemon Squeezy login for your Bubble users

What if we could set it up so that all they needed to do was click a button, maybe in your settings sub-menu or your user area, that sort of user profile, and you link them straight through to the Lemon Squeezy client area, customer portal, and their automatic sign-in. That's what I'm going to demonstrate to you today. So we need to retrieve a subscription ID through the Lemon Squeezy API. And 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've 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 into the customer portal with.

Lemon Squeezy & Bubble API Connector

So 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 an order, but we're focusing right now on retrieve subscription. And so make sure that you've got the authorization fields all checked, entered correctly here including the shared headers. If you're unsure how to enter the data here, then head over to the documentation and 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.

So remember you'll have a webhook set up so that when a user successfully subscribes, then the 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. And then I'm going to be previewing and demoing my app logged in as that user. So 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. So this is going to get data about this subscription ID, and from my Lemon Squeezy dashboard, hang on let me call that up. This is my test mode version.

Finding subscription ID in Lemon Squeezy dashboard

I can go into subscriptions and then I can click on a subscription and 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 here. So 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 and the most important one will be this attributes URL customer portal. That's what I need.

Building a Update billing workflow

How do I now make this into an action on the front end? Because 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. So 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 in a button and say 'Customer Portal'. In fact you would more likely say 'Update Billing'. Let's add in a workflow. So 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... you know I don't want to mix up my customers data and accidentally send the wrong person the wrong billing gateway. That would actually be quite disastrous because of all the private data that is there. So 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, remember this is test data, these are subscriptions that I've set up in a previous video but it takes me through to the customer portal and they can view all their subscriptions. I've really added 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, click cancel and LemonSqueezy just takes care of all of it.

Why Lemon Squeezy Customer Portal is a timesaver

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. 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.