How to integrate Autumn with Bubble.io

Dennis H. Lewis shows how to add Autumn, a Stripe billing layer, to Bubble.io apps for usage-based and tiered pricing. You'll need an API key and Stripe connection, then use Bubble's API Connector to track customer usage and balance. Autumn redirects to Stripe for checkout, so portal links expire quickly.
Chapters
Our subscription billing was a nightmare until we discovered Autumn. Look, I've integrated payment systems into bubble ups over the years. With Autumn, it literally took an afternoon instead of days or weeks. And those of you who've heard me talk recently know I've been talking a lot about alternative business models and being able to bill based on usage, based on credits or tokens, you know, bill up front, bill after the fact. And all of this just becomes so much easier thanks to what I'm going to show you in this video. I'm Dennis Lewis from Ratio.dev and today I'll be showing you exactly how to set up enterprise level billing in your bubble app without losing your mind or your weekend. Here's the thing that most bubble developers don't realize is, is that stripe is powerful, but it's also a pain in the ass. To integrate it properly, you're looking at custom webhooks, complex workflows, plugins, managing customer portals. There's a whole lot of steps in each process and it can be kind of frustrating. But with ottom, it handles all of that for you while giving you way more flexibility than just giving, you know, a standard subscription model. We're talking about usage based billing, tiered pricing, one time charges combined or mixed in with subscriptions. Basically any business model that you can dream up, you can do. And the beautiful thing is that you can get this all running in your bubble application this afternoon. And I'm not joking. So before we jump in and I want to stop and remind you to check out the link that's in the description below, head over to ratio.dev and grab access to our no Code Resource Center. It's totally free, it's packed with how to videos, podcast episodes, vetted plugins, and great books to read. Some of them written by yours truly. And I really think it will help you up your game as a bubble developer. And like I said, we update it weekly and it's totally free, so go grab access to that. Now let's get started talking about Autumn. Let me tell you a story. Back when we were building Zircles, our Web3 blogging platform, we needed subscription billing that could handle crypto payments and traditional cards and usage based pricing for blockchain transactions. And if you've ever tried to bauble all of that sort of thing together with native stripe integration, you know, it's like doing brain surgery with a butter knife. Yeah, it's possible. We did it. But was it fun? Hell no. And that's when we stumbled across auto and Look, I'm not getting paid to say this, but we generally use it in production for multiple client projects. And here's what makes it so special. First of all, it sits on top of Stripe. So you get all of Stripe's security and infrastructure but without the headache of managing it yourself. And we're talking enterprise level features, without enterprise level complexity. Usage based billing, done tiered pricing, easy one time add ons, no problem. And all of this, that usually requires setting up separate API calls and all sorts of things. It's, it's really, it's just easy to do. I will warn you, it's not embeddable. Okay so right now it will, every time the customer has to put in their card details, it will redirect to a Stripe hosted page and then it send it back. But that's how most people are doing their Stripe integrations anyway. And so that's maybe the only con that I have right now with setting up Ottum. Other than that, it just handles everything. So let's jump in. Let me just show you the Oddum website. So you can see here, I'm just scrolling through here. They're really focused on new business models. Like a lot of the AI pricing models that you see out there where you buy credits or you have a subscription that gives you X number of credits, may roll over X number of months, or you get some free credits up front or you, you know, earn rewards as credits. All of that is doable right inside Autumn. So you're going to be able to handle any payment function, everything you need, flexible pricing, customer plans. And one of the really cool things I think about Ottum is that when you, when you're starting off, it's totally free you, until you hit K of monthly revenue, you don't pay anything. And I talked to the founders and it actually does it month by month. So if you hit 10k this month it'll cost you $375, but next month you're down to 7500, you won't pay and all of the ramping up till you get to that 8k is totally free. This is a great offer. And so let's just jump in to what you're going to need to do. So you're going to log into Odum and you're going to, you know, create an API key which you'll need for to use to integrate into your bubble application. So that's simple, just go to API keys, create a secret key, copy it, put it somewhere safe and then you'll use it in your, in the bubble application. We'll see that in a little bit. You will want to connect your Stripe account. So this is just, just a typical oauth process. It'll open up, you'll log into Stripe, you'll give it access to your account and boom, it'll connect everything together. Cool thing is that Autumn will have sandbox and production. So just, just like bubble, just like you would do with a native stripe integration. You can test to your heart's desire on the sandbox and then deploy to live, basically with a couple of clicks. So really cool there as well. And then what you'll do is you'll come in here to plans and you'll start creating your first plan. It's as simple as going through a kind of a step by step. Is it going to be a free plan? Is it going to be paid? You're going to give it a name and then you're going to choose how you want it to work. Do you want just a simple subscription? Do you want to. Do you want to be credit based? Do you want it usage based? Do you want to be a combination of the two where you get a certain amount of credits on your subscription and then you pay for overages, all of that sort of stuff, you can just go through here, select. If you want a trial period, you can set that up as well. And once you've done that, then all you'll have to do is deploy it to live and you'll be ready to integrate into your bubble application. And you could. It really opens the door to being able to do all sorts of innovative business models because let's face it, people are really tired of that monthly Netflix subscription. Haven't watched in three months and I'm paying for it. Well, set up a plan where they're, they're paying for what they use and you'll find that the friction will go down and you'll convert better. All of that becomes really easy to implement in your bubble application when you integrate with Autumn and you're still using the striped rails underneath, which is so you know, everything ironclad. It's, you know, you've got all of stripe security, all you don't have any worries that way. So the next thing you want to do is you're going to come into your bubble application and if you don't have the API connector, you need to install that. It's a bubble plugin. So just go ahead and do that. But I'm going to assume that you have that and then you're going to set up a new API and you're going to set it up with private key in the header and that's where you'll put in your API keys for both the sandbox and the production. These are going to be just standard content type application JSON and you're going to need to create a few different API calls so that you can do pretty much anything that you need to do. So first one is going to be attach customer. This just actually allows you to pass in a customer ID that's going to probably be the unique ID of your user. But you can attach, you can connect this this way with any table in your, in your bubble database. So this is also a lot better than the native Stripe integration where you, you're forced to store everything in the user here. If you have a company database and then they have multiple users, then you can have the stripe account associated with the company and you're not not dependent on if that employee leaves the company or something and they cancel that user ID or whatever, create a mess. So that's it, that's good. You're going to have a product id which is going to be the name, the ID that you gave that plan. You're going to tell it where to go when it's successful, which is your, your users. You're usually just going to return it back to the same page. You know the name, the email that's doable so that it will actually control that you're not being scammed by users setting up a bunch of accounts to get free credits on new accounts, kind of, that'll fingerprint their device. And so you'll be able to control that. That's a, that'll create a customer. You're going to need an API call to check the customer's balance of credits if you're doing credits. If not, if it's just a subscription that doesn't, you know, that won't, that doesn't matter. But here it's just a simple id. You pass the customer ID and what's called the feature ID because you're going to. The inside Autumn feature is going to be your credits or whatever. You set that up. When you create your plan, you're also going to have usage track if you're doing usage based building billing. So you're going to be able to say okay, Customer just consumed 300 credits, 20 credits, 500 credits, whatever it is. And that will automatically get registered in Autumn and in Stripe so that all your billing will happen automatically. And at the end of the month, they'll get their bill, you know, they'll get billed for the credits they've used, if that's how you've set it up or, or whatnot. But you're consuming the credits that way. Here the Atom gives you the ability to automatically get the stripe portal, customer, portal URL returned back to you so that you can put a button on your site that says, you know, manage your subscription and it'll take them right there and they can make their changes super simple there. I have one here created for customer info which will just pull in a single customer and pull in their data. Or you could also use it to pull in a list of customers if you want, and build that into your backend. But all of these are really simple API calls to set up. When I sign up a new user, all I'm going to do is here, I'm going to call the Autumn, attach customer ID to it and boom, that's going to go off and create the customer for me and then it will automatically, you know, set them up on the default plan if it wants. It'll set up their stripe customer id. All of that will get happened in the background. They'll handle all the work. The webhooks, they handle that automatically. So you don't have to worry about all of that goes away, all that headache goes away. It automatically takes care of that. And then if it's in this case, if there is a, if it's not a beta tester in this case, what I'm doing is I'm just getting the checkout URL here from Autumn is it's returning me the checkout URL and I'm sending them there, opening that external website and boom, they see the checkout, they pay, set up their card and they're, they're good to go. If it's a free trial, then it'll say start the trial, Boom, they put in their card if you want them to put up the card upfront or if not, they'll have to do it later when they've consumed those initial credits that you've given them or whatever it is. But you can see that just basically you're just adding in one, one step in there and boom, everything's taken care of. And that's what really makes this super user friendly and super flexible. Yeah, you want to be able to create that, use that API call I showed you to create the link to the portal that isn't a permanent link that you can just store in the, in your database. You want to use that API is that they, it'll create a link that has a certain amount of time before it goes away. And then the other really cool thing that I think you should know is that once you've got this all working in your test site, on your version test and you're good to go in, you log into Autumn and you just say, copy this to. To. To production and it will copy all your pricing, your meters for tracking your. Your credits and all of that. It will automatically copy it over to your live A site and you're good to go. And if you make changes later to a plan, you can just copy them to production and boom, you're good to go. You don't have to worry about all of those pricing IDs and if they're the same on development or test and nope, you're good, you just go for it. And this really opens the door to letting you design your business in the way that serves your business instead of taking shortcuts or accepting, you know, straight jackets where you're kind of locked into things just because the technical part is too complicated to set up. And I've seen that a bunch of times with customers that come to us and they say, well, we're just going to do subscriptions because you know this usage base and it's just too hard. And thanks to Autumn, you can get around that and you can really get to build your application so that it serves your customers and serves your business needs instead of just being handcuffed because the tech was too complicated. And so I think this is really powerful. Like I said in the beginning, be sure to go to ratio.dev and grab free access to the no Code Resource Center. It's got great information for you as a bubbler and I'm sure you'll get a lot of use out of it. If you feel like you still need some help or you'd like for us to help you set up your Autumn infrastructure and get all of that done for you, feel free to reach out to us here@ratio.dev we'd love to help you. If you've enjoyed this video, give it a thumbs up. Give it a. Like if you could subscribe to our channel, hey, that would make me just super happy here. We really appreciate that and see you in our next video.
More from Dennis

Is Google Killing Websites? The Future of Search, SEO & Web Design After Google I/O

Something we're still looking forward to in Bubble: richer design experiences! #bubble #nocode #ai

Big mistake companies are making right now: firing employees instead of empowering them. #ai







