The developer implements Stripe Checkout by configuring the Stripe.js client, creating a server action for session generation, and adding a 'Buy Now' button to the UI. The workflow concludes with testing the payment process and verifying the successful transaction in the Stripe dashboard.
Length 11:13
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #next.js #stripe #checkout #programming #web development #server actions #payment integration #software engineering #vscode #api
0:00 All right, so let's head back to our Next.js UI where 0:03 we're gonna set up the 0:04 integration to actually be able to redirect to our 0:07 new checkout session created on our Next.js backend. 0:11 Now, in order to do this, we're gonna utilize the 0:14 Stripe/Stripe.js library, which is a library from 0:18 Stripe that allows us to provide a checkout session ID 0:22 and actually handle the redirect to the given checkout session. 0:26 So in order to do this, let's go ahead and firstly install this dependency in 0:30 our UI. I'll NPM install 0:33 @stripe/stripe-js. 0:40 All right. So now with this dependency installed, 0:43 let's go into our app 0:44 folder, and I wanna create a new folder to host 0:47 all of this 0:48 checkout-related code that we can utilize in multiple other 0:51 components. 0:52 So let's create a common checkout folder, and in here I 0:56 want to now create the file where we're gonna initialize the 0:59 Stripe.js client. So let's go ahead and create a new file called 1:03 stripe.ts. Now, in order to initialize Stripe, 1:07 we need to provide it with our Stripe public key, which 1:11 we know we can obtain on the Stripe dashboard. 1:14 So let's go ahead and head back to the Stripe dashboard. 1:17 Now in the Stripe dashboard, I'll again click on Developers, go to 1:21 API Keys, and then I'm gonna copy my publishable key 1:24 here. 1:25 Now go back to VS Code and let's add it to our .env.local 1:30 in our Next.js UI. I'll create a new 1:33 NEXT_PUBLIC_STRIPE_PUBLIC_KEY 1:39 and set this equal to the Stripe public key that 1:43 I'll go ahead and paste in. 1:45 So remember, by adding NEXT_PUBLIC, we're gonna make this available on our 1:49 client components, and that's okay because this publishable 1:52 key doesn't need 1:53 to be kept secret. 1:55 Now let's go ahead and head back to stripe.ts where I want to
The rest of the transcript is for members.
Sign in 