Client Payments with Stripe and AgencyOS

Speaker 0: Hi. Brian here for Directus. Welcome back to the next video in our Agency OS series where we're talking about the Stripe checkout or the ability to accept payments from your clients within the portal. This is a very important piece of functionality. You've got to be able to get paid on time to run a successful agency.

So let's dive in. Alright. So we're logged into the client portal and we'll just bring up one of the invoices and you can see there's a link to pay this invoice. When we click it, nothing happens because we have the wrong Stripe API keys or we haven't set those up yet. So what we're gonna do is go into our Stripe account and go to the Developers tab and look for API Keys.

There are several different keys that you're gonna copy here. The publishable key, which is safe to be used on the front end, and then the secret key, which is only exposed on the server. So we are going to go into our env file and paste these keys. And I'm certainly going to have to roll these keys after this video so don't try to steal my keys. The last piece of the puzzle here is our Stripe webhook secret.

Whenever a checkout event occurs, we need to be able to catch or receive those webhooks that Stripe sends out so we can update Directus with those. So I will just follow the instructions here to test in a local environment. We'll make sure that I am logged into the Stripe CLI and then we will forward all Stripe webhook events to localhost3000/api/stripe slash webhooks. So this is the API route within the Nuxt project where we are listening for those webhooks. And once I log in, I listen to that event, it will give me my webhook secret, which we use to verify that Stripe is sending those webhooks.

Now, once we test that out, we should be able to pay invoices. But, oops, we need to restart the dev server so those changes can take effect. Alright, so let's wait for our dev server to restart. And once it's back, then we can test out this functionality. So we just hit Pay Invoice.

It will throw a Stripe checkout session where the user can pay and complete via card or whatever payments you've got set up in your Stripe account. So I'm just going to enter some test card information and try this payment out to verify this will work. Alright. So once the checkout is complete, Stripe should send us back to the page from whence we came and we can see that this invoice is now marked as paid because a payment was applied. So if I open up our AgencyOS back end inside Directus, we should be able to find that payment within the Billing section.

And just like the song, whoomp, there it is. Now, one of the other pieces of functionality that's built into the platform is the Stripe customer portal. They have a great UI, this is set up on the billing page where your customer or your client can go in and update their payment methods within the Stripe customer portal. So that's it for the client functionality within the portal. Let's take a look inside our codebase to see how this operates behind the scenes.

Behind the curtain, if you will. So we're going to open up Versus Code and look for our layers section. Within layers we will look for our portal and then you can see under the server API routes we have a Stripe folder where we have a create checkout session. Post. Ts.

So, this will accept an invoice ID as a, inside the body of this and then this will create a checkout session and return it to the Stripe JavaScript client to, redirect us to checkout. Then we have a composable which uses the Stripe JavaScript client to actually redirect to checkout. So we've got use Stripe which just basically loads Stripe and then we have a handle checkout function and a get portal link function to send the clients to that portal link. You can also see the API route for creating that portal link. And last but not least, we have our webhooks route that receives those webhooks from Stripe whenever these checkout events occur.

This will verify that data coming from Stripe and create those payments within our Agency OS instance. So when you get ready to go to production with this, make sure that you go in and actually create the Stripe endpoints for those webhooks. So whatever your final deployment URL is, you'll go in and set that up inside Stripe using, the API Stripe Webhooks and then you will pick the checkout events just to make sure that all those events get sent to that URL. And make sure that you toggle off Test mode and grab the live API keys on your Production Server. So that's it for this video on how to connect Stripe with AgentC OS.

Stay tuned for other videos in the series.