So I also want to show you how to do this in production, right? Because there are a couple of differences. So I pushed my code to a new repository. You can use your existing one if you want to. So I'm going to go inside of Fercel here and I'm going to add a new project.
And let me go ahead and import Miro clone additional here and I have to follow convex rules for this so let me just override this like this. Alright I'm gonna go ahead and paste all of my environment variables here. And I now have to go inside of convex itself and change this to production and then I have to go inside of settings and generate a production deploy key, copy it and I have to add a new environment variable here called convex deploy key and paste that here and then I can deploy. So I'm gonna pause this and now that we've deployed the stripe itself I believe is not going to work because in production I'm missing environment variables. So let's go ahead and add our environment variables back.
So first things first, we need the next, what's it called? Next public app URL. Next public app URL. So that is, let me just refresh this dashboard. Oh, it's assigning domains.
So just a second for this to finish for me. So there we go. I have my domain now. So now this domain is going to become my new environment variable for next, where is it, Public app URL. So it's going to be that instead of localhost now.
Like this. And remove the backslash here at the end. And then let's go ahead and let's add our Stripe API key so this one can stay the same. Nothing is different about our API key. Obviously later when you plan to do this for your business, when you turn this from test mode into production mode, you will have to change it.
And now here's one thing that we cannot copy and that is the Stripe webhook secret. So let's go ahead and click save all for now here and let's go inside of project settings here and in here we have the deploy key that we need to find is our production URL. Here it is, deployment URL. So we have to copy this and we have to add this inside of an actual Stripe webhook. So far we only have a local listener so now click on add an endpoint, paste this endpoint and remember it should be .site.stripe.
That is our webhook, right? You can confirm that in your package.json. Remember this is the development one. We turned it from .cloud to .site so just a slash stripe but we are no longer using this URL. That is development URL.
We are now using our new production URL and in here we have to select the events we are listening for and that's the checkout session completed event and the Invoice payment succeeded right here. So click add events and you can also double check this inside of your, I believe it is HTTP, no it is fulfill, so fulfill right here we look for checkout session completed and for invoice payment succeeded. So we need those two and click add an endpoint and then in here you have sign in secret. Click reveal and copy that secret. Go back inside of here in production, make sure you are in production this time and add Stripe Webhook key or sorry secret, Stripe Webhook Secret and click Save.
And just confirm that Stripe Webhook Secret is the correct name. So where do we use that in HTTP? Stripe webhook secret. So just double check that the name matches 100%. And you actually don't have to change those values inside of Vercel.
So you only have to change it here. And this should already be working but this time in production. So now if I go ahead and add a new board here, this works. But if I go ahead and add this and click upgrade here, let's see if we will be able to catch any event here this time in production and not locally. So this is of course still a test mode but on a deployed website which would be production in the future so you can still use this test cards here.
And there we go it looks like it works and I am officially pro. There we go and if I go ahead and refresh here you're gonna see in a second there we go We have our events here and you can see for exactly which organization it happened, what is the customer, amazing. You successfully deployed Stripe with convex. Great, great job!