Add Subscriptions to your Bubble app with Lemon Squeezy

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.