Add Subscriptions to your Bubble app with Lemon Squeezy
In just 5 minutes you can simple add a subscription checkout to your Bubble app using Lemon Squeezy. This Bubble tutorial video explores how to add Lemon Squeezy to Bubble and using webhooks to track orders.
Lemon Squeezy vs Stripe: Discover why Lemon Squeezy might be the faster payment gateway for your Bubble app.
Quick Subscription Setup: Learn how to integrate Lemon Squeezy checkout into your Bubble app in just minutes.
Webhooks Simplified: Master the art of tracking user purchases with Lemon Squeezy's webhook integration.
Introduction to Lemon Squeezy as a Payment Gateway
In my opinion, Lemon Squeezy is quickly becoming a strong Stripe alternative as a payment gateway for a Bubble app. I'm going to demonstrate in this Bubble tutorial how you can quickly add in a subscription checkout to your Bubble app using Lemon Squeezy. And I'd say you can do this quicker with Lemon Squeezy than you could do it with Stripe. Let me show you how.
Setting Up a Product in Lemon Squeezy
So I've signed up for Lemon Squeezy and here is my account and I'm going to create a product. I'll just call this my subscription and set it as a subscription. They've got loads of pricing customized ability, you know, how you want it to work. You can check it out in the documentation. Let's set this to $49. You'll notice that I'm in test mode. Just like Stripe, there is a test mode and a live mode. So this is not real money. This is not a real product that I'm setting up. Let's say every month you've got even usage metering. I might do a video on that later. Leave a comment if you'd find that useful. I think particularly if you're building a Bubble app with OpenAI, you might be looking away to track how many tokens or metered status used.
Publishing the Product and Integrating with Bubble
Right. So that's all down here. We can add in these, but we're going to ignore that right now. I'm just going to click publish product. And so then all I need to do is click the share button and copy this. I go over to my Bubble app. Now I'm not currently logged in as a user, so I'm going to go into data and run my app as a user. That's because I need to be able to associate a user with the purchase, the transaction. So let me log in as a user. So you can see current user is now logged in. Yes. And then I just add a button. Very crudely designed, but we're focusing on the payment checkout flow. I add a workflow in and I say external page. And I paste it in. And so this is a link through to my checkout.
Customizing the Checkout Process
In fact, we can just copy and paste this. Okay. And this is what they'll see. So we can see what's testified enabled. It's automatically filled in the email address. I think that's probably because I'm not using it in a private browsing tab. I need to check that out. But let's pre-fill some of the field data. We can add data into the URL. So let's add in these two bits of data here. So let's go back to my link, add them in, and I'm going to dynamically replace this with current user email and dynamically replace this with current user name. That's name. Okay. Let's preview. Click checkout. And it automatically populates it for me. You'll notice this looks really similar to Stripe. But I think you'll agree. This is quicker than if I was to use the Stripe plugin through Bubble.
Setting Up Webhooks for Order Tracking
Now there's one other thing we need to cover, which is how do we track that a particular user has made a purchase. So for that, we need to set up a webhook. A webhook is our way of saying when Lemon Squeezy has an action take place, such as an order is completed, payment is received, we need to send data back to our Bubble app. And with all of this, with setting up products and setting up webhooks, we need to remember that there is a difference between the live version and the test version on Lemon Squeezy and on Bubble. So you need to duplicate some of these processes for both live and development. But let's set up a development webhook.
Creating a Webhook in Bubble
I'm going to go into Backends and I'll simply add a webhook and call it Order. I need to make it public. And then so that something happens in my database, I'm going to create a new thing. I'm going to create a new order and add in a new field. I'll call this ID. It's going to be a type text. And I'm going to make changes to a user because I want to connect the purchase to this particular user. So I'm going to make changes to current user. And I'll say, I can't just call this Order ID because this is my way of then checking in with Lemon Squeezy, other points of my app using the API, whether a subscription is still going, for example.
Configuring the Webhook in Lemon Squeezy
So let's add in text rather. And I'll put this into detection mode and get it ready to detect data. And then I'm going to copy the endpoint and paste it into my Lemon Squeezy account under Settings, Webhooks. Paste it in here. Remember, this is our dev version, our test version. So we need to set this up more than once. And also remember that we need to have initialize in there in order for Bubble to detect the data and sort it and organize it on its way in. But then as soon as Bubble has recognized that and we're happy with it, we need to remove initialize from there. And then we'll just say Order is created. Save Webhook. Oh, I have to add a secret key. OK, so this is the way of checking to see basically that people aren't pretending that orders are taking place, pretending to be Lemon Squeezy. So if I put a secret key of like 123456 in there, of course you would make it much more secure. Our Webhook is created.
Testing the Integration
And now let's put a test transaction through. So we'll go back to our demo, making sure that we've got DetectingRequestData open because we want Bubble to recognize that data is coming across. I'm going to say Checkout. Fill in some dummy card data. And choose Pay. And you'll notice that it's added tax. So that's something that I would need to set up through my Lemon Squeezy account, whether that needs to happen. In fact, from reading what people are putting online, a lot of people are choosing Lemon Squeezy because it offers better tax tools than you get baked in with Stripe. So let's just say Pay. And the order is complete. You can customize what happens next. You can customize the emails that come through.
Verifying Data in Bubble
We'll hop back to Bubble and we'll see that Bubble has received all of this data back to do with the order that's taken place. And so I can click Save. And then on New Order, I would simply just link in the ID. This is just a very quick overview. There may be additional data that you have to store. You'd certainly need additional webhooks if you're looking to run subscription. For example, what happens if they cancel the subscription? You would want to add in another API endpoint in Bubble to cancel a subscription if it is cancelled through Lemon Squeezy. But we can also make changes here. Request data ID. So let's go back to Lemon Squeezy and we'll edit the webhook. Remove, initialize. And we can even resend it. I don't need to put the order through again. Perfect.
Handling Secret Keys and Debugging
So yeah, just like Stripe, this is perfect for development because I don't need to pretend to put an order through. I can simply click Resend. One other thing I'll point out is how do we handle the secret key? Well, we can say Request Data. And I assume that the secret key was placed somewhere in here. Maybe not. Okay, I need to check that out exactly how the secret key comes through. Yeah, I'll check that. If you work it out, leave it in the comments. That would be really helpful for everyone. But let's send through the... Where is it? Let's send it through again and see if we can get this workflow to run in Bubble. So let's go to Data and outgo into Users and Order ID. Now, all the ID is empty. I think I might know why that is. I'm just going to check to see whether an order has been created. No? Okay. Now, did Lemon Squeezy actually run the event again? Resend? Okay. Maybe I didn't quite click on it correctly. Ah, I think it's resending it to initialize. Even though I've updated it, it's resending it to the previous endpoint. I think that's what's going on. Let me re-check the data here.
Troubleshooting and Final Steps
Right. Okay. In that case, let's just run the whole thing again. So if I go back to my Lemon Squeezy page, preview it, check out. Fill this in with dummy data. Now, let's check in our database. Okay. Still hasn't saved it. Ah, okay. Here are some things that I might have missed. Right. We want to run the workflow without authentication. So we don't have to supply an API key for Bubble in order for this workflow to run. I think that was it. So I'm going to go right back to where we were. Try pushing it through again. I think it can be helpful to publish these videos a little bit rough around the edge because these sort of things are just still part of building the bubble and debugging as you go along.
Final Testing and Conclusion
Okay. So we've got the orders on our created. I'm not sure why there's more than one. They've got different ideas. Maybe they were queued up. I might be being a bit impatient with those. Now, why was user not updated? Order ID. I think that is because I need to ignore privacy rules. Basically, creating a new thing is not confined by a privacy rule because it's just being created. But here I'm asking Bubble to edit a user. In fact, I'm asking him to edit current user. There's no current user there. Let me update that. We need to make changes to a thing. We need to make changes to user where the email equals the email used to purchase. So not the result of step one, rather the request data. Let's get the email field. We want to make changes to the first item. Order ID. Request data ID. I'm going to test that once without ignore privacy rules. Just to be really clear, I'm learning as I go here too. So let's check out one more time or maybe two more times. Just have to put future data in there. That's all. And pay. So in orders, we've now got a new order. Brilliant. Just check that's not coming through twice. Fine. And then in users, order ID is not filled in. So I think I'm right. Make changes to a thing, not limited. Create a new thing, not limited by privacy rules. Make changes to a thing. It is. So I need to ignore privacy rules. Now, you want to be really careful and specific about how you use this. Because right now, if anyone wants to send data to this endpoint, they could make changes to the user through step two. Now, what I've got set up is very limiting on that, but it's just something that you'll want to bear in mind. Right. Final time. This is turning into a longer video than I thought. But hopefully, you'll appreciate that the setting up of the checkout, that was the first five minutes. That was so much quicker. So let's put in some car details again. We'll check our orders first. The new order has come through. That signifies the workflow has run. And that's gone to users. And now the order ID is in place.
Closing Remarks
So there you have it. That is how to set up then a squeezy into your Bubble app. And if you found this video useful, we would really appreciate a subscribe and a like. And you can find even more Bubble tutorial videos over on our website, planetnocode.com. You'll find videos there that you cannot find on our YouTube channel. They are exclusive to our No Code developer community that you can join at planetnocode.com.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.