DREW WILSON: Hey, good afternoon, everybody. Please, please hold your applause, hold your applause. Thanks for coming this afternoon. Thanks for jumping in here. As the voice of God just said, as I just learned that that’s called, I’m Drew Wilson. I work at Clerk. Anybody here familiar with Clerk? Has anyone ever heard of Clerk? OK, a couple people. 

Oh, look, there’s some people over there who have heard of it. Has anybody who’s heard of it, have you ever built anything with Clerk? OK, a number of them. So there’s some Clerk people over here. If you’re at Clerk, raise your hand. These are the people responsible for that, so you have them to thank. But today I want to talk to you about something new that we’re launching: Clerk Billing. Yes, Clerk Billing. So we’re going to learn how to do a zero integration SaaS billing setup with Clerk and Stripe. 

So let’s jump into it. This is a really cool quote: “It took weeks to integrate billing with Clerk’s auth.” That sounds horrible, right? Like, why would we be promoting this as how great Clerk Billing is? Well, that’s because that’s what customers said to us in the past. They said, “You know what, Clerk is awesome, but it’s really hard to integrate billing.” And so we said, “That’s a good idea. Why don’t we build something to solve that?” So some of the things that they said to us was that writing code to sync webhooks is difficult. 

If anyone’s ever built a SaaS integration before, you know that can be tough and no fun. There’s a bunch of downsides to doing this yourself. Mostly it’s just pure frustration and pain, right? So what we wanted to do is build a solution that really takes minutes and takes advantage of the whole Clerk ecosystem. No webhooks necessary. So if you’re writing code and you’re building an app, you don’t have to build in any code to sync webhooks. 

We have a drop-in pricing table and checkout component that we’ve built. So this is all part of the new Clerk Billing, which I’m going to jump in and show you. And yes, of course, the payments are powered by Stripe. So thank you, Stripe. Next up, I’m going to jump into it. Rather than talk through this whole thing, let’s actually jump into it and see what this looks like. So we’re going to do a demo. OK, so let’s pretend for a second that we’re going to build an app. And that’s actually really easy to do on Clerk. 

So you’d sign in to Clerk. You’d come to a screen like this, and it says, “Hey, let’s create an app.” Actually, let me make it a little smaller. OK. So what should we name this thing? Let’s do “Billing Demo,” OK? So now what we’re doing is we’ve signed up for Clerk. We’re going to create our first app. This is a little wizard that helps make that easy. We’ll click “Create application.” So now I have a real application. It’s really there, but I haven’t written any code yet. So let’s do that. What we’re going to do is actually create a project. You’re going to watch me go through this whole thing as if you were a real engineer building apps. 

All right, so let’s do it: npx create-next-app@latest. This isn’t fake, people. This isn’t fake. This is real. Oh, this is actually VS Code, I’m sorry [laughs]. It’s not that fancy. So what we’re doing right now is we’re creating a Next.js app, OK? And the internet’s extremely fast. All right, there we go. So what I’m going to do here is I’ve created a Next.js project that you saw locally on my machine. 

I’ve created an app on Clerk’s website, and now we’re going to set this up, OK? So we’re going to install Clerk. I’ll copy that little code command there that it’s telling me to, paste that in. And then, now I’ve just installed Clerk. Look at how easy that was, OK? Then we’ve got some keys that we need to put in here. This is how Clerk knows, “Hey, here’s how we’re going to authenticate you and know which app you are trying to run here.” 

We’re going to paste our keys in. Done. And as I said, you’re going to go through this with me. Middleware, we’re going to make a middleware file. This is some magic that Clerk employs. Look how magical that is. OK, OK. So now we’re on to the good stuff. This is the last step here. So we’re going to go to our layout file. This is like the home page file, OK? And I just pasted in some code that Clerk gave me. So what we’re doing here is, when you go to the home page, instead of seeing a blank screen, you’re going to see two potential experiences. 

If you’re signed out, you’re going to see our “Sign in” and “Sign up” button. Now normally, you’d have to code this whole thing yourself and figure out what the “Sign up” button does, what the “Sign in” button does. But I can just drop in these easy-to-use components. And if I’m signed in, we’re going to have this user button that, when I click it, it’ll open up a profile. And my users can go in there and fill out their profile and edit their profile. So I’ve created that. Let’s go ahead and run this.

So look at that. It’s so incredibly real. OK. So we’re going to go ahead and go to this app that we just created on localhost. And there it is. And look at this, “Sign in,” “Sign up” button. All right. Let’s go ahead and sign up for our app. So let’s pretend I’m one of my potential customers. I click that button. I’m signing in with Google right now, people. You can set this up so you can sign up with Discord, Microsoft, a bunch of stuff. It’s very easy. 

All right, so I’ve just signed up. Now this is that user button. Remember here, we had the “Sign in,” “Sign up.” And if I get signed in, put a user button. Look at this. There’s a couple lines of code here. So I can click on this, click “Manage account.” And look at this. I got a profile. I can manage my security settings, etc., update my profile information. So what I just showed you—without syncing any webhooks, building any database, or writing any crazy code at all—we just built an app that people can log into. OK? 

They’re not logging into much yet, but they will, they will. So let’s now jump into the next piece. That is what Clerk has done up to date, making auth super easy. There’s a bunch of fraud controls and other things as you scale. But now I want to show you billing, OK? So we’re going to click on the “Subscriptions” tab. This is brand new. You can go to Clerk.com, sign up, and see this right now. You can follow along with me. 

So what we’re going to do is, we’re going to create a plan. So when you, when you want to bill your users, right, they signed up, you’re excited and you want to start making money. What are you going to do? You’re going to, you’re going to create a subscription plan for them to sign up on. So we’ll click that button. We’ll create a user plan. And what should we name this? Anybody have any fun names? I’m just going to name this my normal thing, unless anybody’s got a fun name. Gold! I was going to name it “Gold” anyways, wow [laughs]. OK. All right, so we’ll charge people $20 a month. 

And then, you know, we’re all about best practices at Clerk, and what is super common in SaaS? You offer a monthly price, and you offer an annual discount. And normally that’s kind of hard. You’ve got to do two different plans and figure out how to switch between them. Well, we just made it a simple form field. So let’s type in “20” up here, and then annual discount will be “15.” So if they decide, “I want to pay annually,” we’re only going to charge them $15 a month. So we’ll save that plan. We’ll go ahead and hit back. 

And now, if I want, I can continue to set up more plans and everything. But this is a demo, so let’s just get straight into it. I’m going to enable billing. That’ll turn it on for me. And now I get this little handy tip saying, “Hey, next thing you’ve got to do is create a pricing table.” Obviously, you want to show these plans to people so they can sign up. So let’s do that, all right? We’re going to go back to code land. Super scary. Let’s make a pricing page, OK? So we’ll go “page.” I can type. All right, so we’ve got this page. 

And we’ll click on this handy-dandy billing guide. And it gives me all the instructions on how to do what I’m showing you. And one of those instructions is to create a pricing page, put our new pricing table component on it. So I’m just going to copy that. Look at this insanely complex code, all right? The entire pricing table you’re about to see, which is only going to have one plan, so it’s not going to be too crazy yet, but it’s just one small component that I drop in, OK? 

So when somebody does sign up, I think—you know, if you’re building a real SaaS application, you’re going to want to give them access to some sort of exclusive or private content, something that you’re blocking from your free users and you’re going to give it to your paid users, right? So we’ll have a premium page, and on that we will put some extremely premium content. So we’ll go down here, and there’s an example of how to do this right here. 

This is a page that is, what this page is saying is like, “Hey, if the login user has a plan named,” and the crowd chose “Gold” as the plan name, “If they got a plan, then we’re going to show them some stuff.” Otherwise, “Sorry, if you don’t have the Gold plan, you shall not pass.” And too bad there’s no Gandalf emoji. And then if they do have the Gold plan, we’ll say, “Welcome.” 

Frodo Baggins, maybe? Or we can call him “Foro.” That’s fine. OK. Spending way too much time on that. All right. So now we’ve gotten this set up. So this is our extremely premium content that people are going to see, is this “Welcome, Frodo Baggins” message. So what we want to do now is go over to our project. And we’ll go ahead and go to that premium content page we just made. And oh, we shall not pass. I’m signed in. Why in the world can’t I see this? 

Well, the reason I can’t see it is because I’m looking for you being signed in and having the Gold plan. So what we could do is go to the pricing page. And look at that. There’s our Gold plan we made. We can choose to pay annually or monthly. I’m going to choose monthly. We’ll click “Subscribe.” All this stuff is built in for you. As you notice, I didn’t write any code. There’s still no database. There’s nothing going on except a couple little components I’m dropping in. 

And if you’ve ever developed with Stripe before, they have this handy-dandy 424242 credit card number. Well, we put more hands on that handy dandy, and we made this development mode pay-with-card button, so you don’t even have to type the 4-2s. Look at that. Goodbye, 4-2s. All right, so I just signed up, and now I have an active plan. It rerouted me to the home page of my application. So what do you think’s going to happen if we go to that premium page? Let’s find out. Any guesses? Any guesses? [Laughs]

Well, “Welcome, Frodo Baggins!” We’re in. All right. Congratulations. Congratulations to me. [Applause] Thank you. Thank you for clapping [laughs]. OK. So let’s say that business is absolutely booming, OK? And I want to take advantage of that while I can, and I want to build a higher-priced plan. So we’ll create a “Platinum” plan. 

And then I’m going to make this a little more expensive to start, you know, making a little more money, making my investors happy. So we’ll charge $90 a month for this one. And if they decide to pay annually, we’ll charge them 80 bucks. We’ll be cool like that. All right, so now I’m going to go back and let’s see. I’m going to go ahead and go here. Did I not save this? OK, yes, it’s saved. 

So now I’m going to go ahead and sign up for that Platinum plan. So I’ll go in here, and if you notice, this profile component that I showed you earlier now has a new “Billing” tab on it. And it shows that I’m signed up for Gold, OK? And now there’s a “Switch plans.” And look at that, there’s that Platinum. So that’s looking nice to me. I want to sign up for the Platinum. So I’m going to go ahead and do that, and you’ll notice here that we’re taking into consideration, again, best practices. So we’re crediting back, we’re prorating the amount of money that this customer has not yet used because they just signed up for that last plan. 

So we’re crediting them back the $20. So it’s going to be a $70 checkout. And that credit card that we added, there it is right there. It’s a part of my payment method, so I can just check out. Real easy. All right. So now I am active on the Platinum plan. And look at that. Suddenly, I no longer have access. Why is that? I just signed up for a better plan. Well, that’s because we’re checking for the Gold plan, and now I’m on the Platinum plan. So this is a problem. 

So what we could do is something like this, where we say, “has Platinum” or “has Gold.” And this would do it, right? I would be able to save this, and I’d be able to see that I have access to that special message. But this isn’t maintainable. You don’t want to keep adding a bunch of conditionals. So what can you do? Well, it’s pretty common when you’re building an app to build in this concept of features, where you could have a basic plan that has a list of features, and the pro plan has that same but more, right?

That’s pretty common. So what we did is built that into our billing system. So let’s use features to gate access instead of the plan. So I’ll show you how we can do that. So, we’ll go to the Gold plan, and we scroll down. There’s this “Features” thing. So, we’ll click on Features, and let’s add a feature called “Widgets.” I know this is Frodo’s favorite thing—it’s widgets. 

So, we’ll hit “Save” there, and then we’ll go to the Platinum plan, and we’ll do the same thing. We will add “Widgets,” but oh, wait, this is Platinum. So they should have some better stuff, too. Let’s give them some “Spinners.” Everyone loves some spinners. All right, so now the Platinum plan has Spinners and Widgets, and the Gold plan has Widgets. So if we check the plans page here on Billing, you can see what this looks like. There’re Widgets on the Gold plan, and Spinners and Widgets. 

And so this is more like what you would actually build yourself, right? You’ve got a bunch of features. And so I’m still not able to access this thing. So let’s fix that. So instead of looking for a plan, let’s look for a feature. Let’s look for Widgets because, if you remember, both the Gold plan and the Platinum have access to Widgets. So I just save that and look at that. Now I have access again. And so this is a way easier, way, more maintainable way to control access to your app using Features. 

So it’s pretty incredible, again, without any database or without building any entitlement system, we just set up an app that uses feature-based access control. Super cool stuff. And now we’re going to move on. So that is setting up billing for B2C. What if, though, and I’m sure many of you in this room, sell to other businesses, B2B? 

So let’s make a wholly new application to show that stuff up. There’s a number of things in Clerk that make working with organizations really cool. And so I’ll show that to you, and then get back into the billing side of things on B2B. So what we’re going to do is create this billing demo app. Now, I’m not going to have to go through the setup of everything because I already set it up. All I’m going to do is copy the keys for this new app that I just created. I’ll come in here, paste that in. 

Boom, got the environment keys changed. So I’m kind of done. I’m just going to use that same app that I set up before. And so if I go to this page, we’ll see that I’m no longer logged in because this is like a wholly new app. So I’m going to go ahead and sign up for this new B2B demo app. So starting from scratch here, brand new app, same thing. There’s no Billing tab yet because I haven’t set that up. And so we’re back at square one. 

Well, we said that we want this to be an app for supporting organizations. So we’ll click on this tab up here. And we can just, with one click, enable organizations. Now, that allows any user that signs up to this app to be able to create an org, right, and then invite a bunch of users to it. And there’s a full RBAC system, so they can set up different roles and different permissions that get attached to those roles. And you don’t have to mess with any of that code. We make it all super easy. 

So if you notice, this is the dashboard, and it’s just all point and clicky. It’s great. So orgs are now turned on. So if I go back here, well, what’s different? Well, there’s really nothing different. I have my user profile management stuff. So how can we make this good? How can we get orgs in there? Well, let’s go back to that layout. And where the user button is, we’re going to include this other component that we provide called “Organization Switcher.” And it does what it sounds like. So I’ll refresh and look at this. Over here, I got this org switcher. 

I can create organizations and then separately manage my user account. So what I’m going to do is go ahead and create an organization. It’s going to be called “Frens.” And so I’ll click “Create,” and then I’ll invite somebody, somebody very special, somebody very close to me. Somebody that is me. So I’m going to invite my personal email. And as you can see here, we got “Role: Member or Admin.” Those are the default ones we set up for you. But you can create any roles you want. Think in your mind of some roles that you would want to create. Oh, boy. 

All right. So let’s go ahead and invite this person as a member. Send the invite. That goes to my email address. But I’m not going to pull up my personal email address right here. So I’m going to go ahead and sign out, OK? So this is the admin account that I’m about to sign out of. This is the person that created that org. And then I’m going to go ahead and sign in with my personal email address. Look how personal that is. And then we’re going to sign in, and look at that. 

Look at that little number one right there. That’s pretty cool. Well, that’s an invite to this Frens organization. So I’ll click the “Join” button, and then I’ll click on this and now I’m in the context of Frens. But unlike before or as an admin, now I’m just a member, OK? So now I’m logged in, I’ve been invited, and again, I didn’t write any email code. There’s still no database going on, all super easy, point and click, just a few clicks, we got orgs fully up and running, which is awesome. 

So now let’s jump back into billing. So now we want to set up billing for this organization so we can start making money from these companies that are signing up. So we’ll go ahead and create a plan like we did before. But now you can see we have plans for users and plans for orgs. Because it turned on organizations, we can have a separate set of plans just for orgs. So we’ll click “Add Organization Plan.” We’ll call this one “Teams.” And then because it’s a team, we’re going to charge a lot of money.

So we’re going to charge 600 bucks. And if they decide to pay annually, we’ll charge them only $500 a month. And then let’s add a feature on here. We’ll add “Widgets.” We’ll hit “Save.” No, don’t go! [Laughs] Sorry [laughs]. OK. So now we’re going to enable billing. And billing is enabled. Now, I’ve already set up the code for the pricing table and everything, so we don’t have to worry about that. 

But let’s go back here. We’ll refresh. And separate from that user billing that we looked at, let’s go into the organizations. And now we’ll click on the “Manage” thing. And now we’re looking at the organization management, and we see this Billing tab here. And we see that, “Oh, I don’t have permission to manage billing for this account, though I can see some of the information. Why is that?” Well, that’s because I’m a member, and the member role does not have permissions to see that. 

So why don’t we switch back? Let’s sign out of here. And we’ll sign in as the admin role because we want to sign up for this Teams plan. That’s why we’re here. All right, so we’ll jump back in here. Now I’m signed back in as the admin role, and so now I can switch plans. I can see this $600-a-month plan that will give me Widgets. We’ll hit “Subscribe.” And again, starting over from scratch, there’s no card saved. We’ll go ahead and “Pay with test card.” Super quick and easy. 

And now this Teams account is active. Now let’s go to that premium page. And we see “Welcome, Frodo Baggins!” I have access. Well, why do I have access right now? Well, that’s because where we last left it was that the feature Widgets has to exist. And it does. If you remember, I added it to the Teams plan. Well, what if we want to like gate access based on the role somebody has? Well, that’s really easy. We just do “Has role,” and we’ll do “Admin.” 

So if we go in here, I still have access. Well, that’s because this user is an admin. So I’m just going to, real quick, show you what this looks like. If I leave that in there and I sign in on my personal account, we’ll go back to the premium page. Oh, I don’t have access. If I were to change this, or if I were to add to this, I could say, “or has the role ‘Member.’” 

And that would work. But again, that’s not super maintainable. I have access again, but it’s not maintainable. So what can we do here, right? Well, we could use the plan features, as I showed you before, but there’s something else with orgs, right? Typically, when you do RBAC, you have a role, and then you add permissions to it. Well, you can do that same thing here. Here we are checking for roles. Well, now let’s see what it’s like to add permissions. So this is some advanced stuff. I don’t know if you guys have ever tried to build one of these systems yourselves, but it is not super easy—unless you’re using Clerk. 

All right, so we’ll click on “Roles and Permissions.” As you see here, I’ve got the Admin and Member role. Let’s go ahead and create some permissions, OK? We’re going to create some feature permissions. So we have that feature Widgets. Let’s separate the access to Widgets based on a “Read” permission. So “widgets,” “read,” and then, “You can read!” 

And then we’ll create another one for management. So we’ll say, “widgets,” “manage.” And then, “You can manage!” All right. So I’ve created those two permissions. Those are custom permissions. You can create anything you want. And now let’s go to the Admin role. We’ll edit it, and we’ll go ahead and add—I just deleted something—we’ll go ahead and add the “Widgets Manage” and “Widgets Read,” OK?

Then we’ll update that role, and then we’ll go into the Member role. As you can see, it has way less access. And we’re going to keep that the same, not as much access. We’re just going to let it read widgets and not manage them. All right, so that’s saved. So now, if we want, we can come into here. And instead of looking for a role, let’s look for a permission. And we’re going to look for the Widgets Read permission. 

So I’ll refresh. And oh. Oh, did I put “reads”? Hey, there we go. So we have [laughs]—we have access now. But what if we say, “OK, we only want folks that have the manage permission to see this.” Well, I can’t see that, right? Except if I go in here, I sign out, I sign back in. This is the final piece, people. 

If I sign back in as the admin, click “Continue,” go to the premium. Look at that. I have access because this one has “manage.” So as you can see, we can now control access to our app. Again, without a database, all this stuff is just available on the user object that comes back to us. We have a super easy way to actually get at this via the “Has” function, and you can start gating access to your content and your features using permissions, features, roles, plans. It’s really cool. 

So that is Clerk Billing, and if you’re watching, I’ve mentioned this a couple times, but we just built a full-featured app that didn’t use a database, that had payments built in. By the way, emails are getting sent in the background that you’re not seeing here. And we didn’t sync with any webhooks, right? And then we built a full RBAC system, point and click. And we didn’t have to write any crazy code. Look at this. This is just all we’re doing right here. 

And so you can imagine in your own apps, as you build out a much deeper integration, how simple and easy this can be to set up. So we’re already making money. And what we’re doing right here is we’re giving Clerk—that’s us, that’s those people—we’re giving Clerk all the drudgery, the stuff that we don’t want to deal with, to Clerk, and Clerk is making it super easy for us to do. So that’s the end of my demo. And—[applause] thank you. 

I know, you’re going to be writing me cards and letters about the most incredible thing you ever saw today. All right. So to kind of recap, what we’ve just built is a—that’s an understatement there—an improved end-to-end SaaS billing experience. I think it’s a drastically improved end-to-end billing experience. And again, this is built specifically for SaaS, right? So everybody in this room is building SaaS. That’s kind of what separates Clerk from other billing solutions is we’re going deep on this SaaS thing, right? 

So we give you components that make it really easy to build. We’re testing those a bunch, making sure [they’re] super highly converting UIs that you can just drop in. You don’t have to worry about it or think about it. We’re using Stripe Payments in the background. The user profile that a lot of you are already using, if you’re already using Clerk, has got a Billing tab built in. And then it’s all customizable. This isn’t something that we went over, but all those UIs are themeable, customizable. We also have APIs that you can use to do all this yourself. 

And so that’s our look at instant, zero integration, recurring billing with Clerk Billing. Coming up soon, we’ve got per-seat pricing, metered billing, free trials, paid add-ons, custom billing cycles, and a bunch of other stuff. So we’re going to continue to improve this product. Again, we just launched this yesterday. So if you want to be one of the first to try it out, please hop in, clerk.com/billing. And we can’t wait to see what you build with this. Thank you, everybody, and enjoy the rest of Sessions. 

And I hope you all go see Jony Ive because I’m going to do that, too. [Applause]