Getting started with Next.js, TypeScript, and Stripe

[Music] hello everyone welcome back to the stripe Developers YouTube channel my name is Thor I'm a developer advocate at stripe and today I'm joined by Luis from the next reyes core team at versal Louis thanks so much for joining me today thank you behind me also today we want to go from zero to setting up an XJS project in typescript and then adding check out to this project and in the second step we're going to take an example application that already has a striped check out and stripe elements built in and deploy that to verse L so Lewis I think a lot of folks already know next chance but maybe for the folks who haven't heard of it do you quickly want to introduce next chance and verse L and yes so in as years is as the website says is the Riyadh framework and it is a real framework to be a Hydra applications you see and of course for yaadon is very focused on performance and in user experience so what we to witness GS is so allows you to build your app and don't worry about anything else we provide you with a Reuther we and I read approach to Randall meaning that you can do service a rendering you can do client-side rendering you can do pre-rendering meaning you can regenerate so on sorry pages based on data there is zero configuration for our for everything it is trip from furniture from the start yeah I'm actually personally a big fan of next chance because it takes away a lot of the boilerplate stuff and just allows you to focus on your business logic kind of you're a code that you need to ride so I really appreciate that to like get up and running quickly yeah [Music] when when I say like pray for production is like it kind of scale to like without any limits since the beginning like every page is independent every code that you that you have to a page is only it's only like when we build your app we only ship to the clients that like the co require for something so you don't have to worry about about costs pleading about about bundle in general yeah it's great and I think there have been a couple nice additions in the next year's 9.4 version release one thing I'm really excited about is the environment variable support specifically with stripe or when you work with third-party api's you have some secret keys and some public keys for example and you want them to be accessible in your page and so that is that is really great to be easily able to set up and files and and fireballs yes those have a requested fish feature to have cool so let's actually jump in and maybe just go along getting started so no js' version 10:13 or later and Mac OS we have all of that and so I'm just going to use NPM in it and then maybe we just call it next J ass stripe if we want to use typescript I think we just used the default starter for now and then let all of that be set up I think while that is happening we can already look at the typescript support I think this is also really nice we're sort of the typescript plumbing is built-in so I think the only thing I really have to do is create the tiers config JSON file and then just run NPM run death right just that you have to yeah that's neat no one likes configuration ok cool so now we can CD into our next year's typescript project so here we got our project route so we create the Shia's config JSON file and then let's actually open this up in the S code zoom in a little here so the great thing is also we already have so when we use the create next app starter we already have a good project set up my phone is pretty good yeah so we have the initial commit here so that's great and then at the moment our TS config is empty but what we're going to do is npm run def and now yeah that's so cool so next chance just sets up our project so here are all the TS config option so we don't touch that let's close it forget about it and ah we're already running so here we are we have our starter app set up and make that bit smaller cool and so pages indexed yes I think one thing now so basically that we have typescript now set up is that we can convert our files from JavaScript files to T's X Files so let's actually have a look so I think I can just rename this here yes and what did about the task interations that you don't have to like force to migrate anything just our transcript pages report JavaScript for on toast our transcript pages ICS so basically I can add on as I need it so here so basically maybe let's do the following let's create another page let's call that our checkout tsx I can just export a function this function that returns us X to say export default yes and I should give it a name right yep you can give it like check out sparta for each article yeah well okay should check it out cool and then I just returned let's return a diff maybe and say within that we return check and my autocomplete should I wrap that looks a bit wonky okay and so I don't actually need this right yeah the only the import cool so it's not yet yes that's it you can go to a slash a car and sure render the tire nice nice it's almost too easy cool so let's do the following let's actually go we will need stripe later on but let's actually go to the checkout documentation and we want to accept a payment let me zoom in just a little bit and so yeah one we need to do is set up stripe node and actually if we look as development so we have a bunch of different API libraries here the server-side libraries and for node we can use it with typescript so stripe node ships with types out of the box so what we need to do is and p.m. install stripe and then this actually is something that we need to do in our API rush so maybe let's look that I think we had it here but that should be all I need right yes to solve the dice for the API routes building nests yes nice and then so here - um let's call it check out session and then we just say typescript okay and so here this is basically our service function so in next Jas within pages and the API is up folder actually should I create a subfolder an API or just a file does that make a difference CID words its audience the are pages worth so you creosote folder you'll get a piece of fat so you're great for example check out the chicken folder and then says you're inside it you will depart will be as less IP is logic are this last session so maybe should we do such actually check out and then the appear folder is is especially images every file does insider will always be in service function I will have any of the the real tools to be used for real pages cool so this is now slash API slash check out slash Sasser recession is that correct yes okay cool let's do that and then we want to import stripe so we import stripe and then we initialize it with our secret key and an API version now we never want to actually expose our secret key in our files in our application so this is where we will want to use environment variables so let's just say process don't and don't stripe secret key and we'll set that up actually should we set that up now you can do it now create a tab and that local so and store local yes cool put the API key there let's do that so we call it stripe secret he and I actually have here installed a little app called cloak that allows me to hide the secrets on screen recordings so that's really useful if you're doing recordings and you don't want to expose your secrets then you can see I paste it in here and the key is in but you can't see it on-screen so that's really nice yeah it's a pretty awesome extension by John popper it's both that it's really cool awesome so we have that set up and then we actually also need our publishable key so the nice thing here also with the struck Docs you can see I'm locked into my test account and so it actually shows me my a test secret key here and so if we now go into the checkout Docs we want to accept a payment and then specifically here for redirecting to check out this is where we will need our publishable key and that needs to be in our actual page so in our next chance page but also we don't want to hard-code it in there but I think so because that has to be like an ideas page meaning the case Pali right you can put it here but a sudden a bite saying nets underscore poly and then the key will be available for newzeas pages nice so we add is that the next public prefix right yes there's a Prophet's and then we cannot stripe publishable okay nice we just paste that in there and so by prefixing with next public we will then have access to it in our TSX files which then I believe that bill time will then be populated basically into our client code right yes have built i we use to replace the name of the key with the value cool so yeah the important thing is only prefix next public four keys that can be exposed publicly so for the secret key we should never do that we don't want the secret key to show up in our build that really should be only within the API roots and so that's where we keep it secret team cool and then let's go back to setup stripe so we've done that in the next step we can now create products and prices in our stripe dashboard so here that's just a new fresh stripe account and then in products we can add a new test product and let's actually say we want to sell I've I've made some four hammer stickers that I want to sell I think I actually have a little picture here so that's what we want to sell and let's say the cutest mirror hmm I can type your stickers so Mjolnir is the the name of Thor's hammer and if we want to we can add a custom statement descriptor as well as metadata and then here we actually want to we can decide if this is a subscription so if we want to set up a recurring price or a one-time price which is gonna set up a one-time price here and we're going to sell them for four US dollars and then let's save that product cool and so now we have our product set up and we have one price here so for US dollar what we can do is we can add another price and for example if we have want to sell it in different currencies so in for our friends in Europe what's for us is that like three euro fifty maybe save that and so we have all our prices grouped underneath our products here great so next step and this is a server side operation here we need to create a checkout session and so this is what we can do in our API root so let's say and the great thing with typescript now is that I can have basically all of the methods and all of the parameters available right here in the S code and so coding basically just becomes hitting a lot of enter so I think it's stripe check out dot sessions dots creates and then here we need to provide and with control space we can actually put in our details so I think we want payment method types cards so we can offer for example for the euro price we can offer European and non card payment methods if we want to do that and let's actually just copy that for now cool and yeah a wage is complaining here big oh by the way we don't have to use requiring APR else because I just takes care of transforming your code into belly it and nobody else code for the collaboration oh can you repeat that we don't need to use what like we have ladies not just features like having ESS supports available and it's yes takes care of handily in the fog of war of transforming that and make it compatible for you oh nice okay cool so here we need to set up our price ID so what we just created in the dashboard let's take the u.s. price and maybe let's also add that to the environment variables so we say price ID in a scalable application you probably want to save those IDs in your database or alternatively also you don't actually need to create the products and prices in stripe you can actually pass them in ad hoc if you just have all of that information in your database for example but we've created it in the stripe dashboard so we have it here and then this is just processed and price ID which is going to have just one quantity we could also of course allow the user to select the quantity and then we need the success URL and the cancel URL and I think what we can do is so for if someone basically on the checkout page cancels the payment we just want them to go back to our checkout page and so maybe what we can do here is actually do we have headers know what I'm looking for is yeah is it headers or origin maybe you want like you like the host yeah so basically where the URL that the request came from to my notion of this origin or this host right where is it I mean we can okay we can we can cheat a little bit and actually look in [Music] so that's the examples we're going to look at later so here we have a stripe with stripe typescript example and I think we actually have checkout sessions here I think it is because that here's our region yeah it looks like it but typescript wasn't offering that wasn't let's see if we can do this oh that seems to be fine yeah okay cool and then here we just do slash check ash or is there an environment variable like processed or inferred URL when we deploy it in to ver cell that we can use here I think there is one in the documentation we usually don't use it for examples because that means it's a purely Wharf for Garcelle yeah that's true okay let's do this for now yeah I mean ideally you probably then want to validate or oh I think next year as does that by default right that it's it has to be from the same domain basically so like horses disabled disabled by default it's a correct and just course is disabled and yet still some security concerns with this okay so but - should be handled by whatever provider veggies for example better cells we make sure that request that here's our region is always the the origin idea Spade origin okay cool and then what we'll do is we just return the ID of the checkout session and then that is what we use on the client to redirect to stripe so I think that's actually all we need here and then let's have a look at the next step that is redirect to checkout we now want to install a stripe Jas and stripe Jas is just a thin loading wrapper around the strike chance library so you can easily load it in like react applications for example and so we'll need to and here so our checkout page we now want to import load stripe we then call load stripes so we basically create a promise a load stripe with our process dodge and another thing it was next public stripe I probably should just copy - that is a long name okay and so this here you can see it returns a promise that resolves with the stripe object cool and so what do we need to do next so we need to have a button and in this case the button is roll link - here button and we need a click handler here and really what the click handler does so when we click our checkout button we then trigger the click handler we now need to fetch our checkout session from the server or in this case the the API root and then where you resolve the stripe promise and we call a redirect to checkout so I think here we can actually just use fetch correct yes which is qualified by default - yes nice and fetch we want to fetch API check it out session start and then do I provide options yes that how it works yeah this put method post that's true don't underling here's is gonna be a JSON right I believe so yeah let's see what oh yeah yeah I think so so let's put that contact I vacation Jason content type yeah application application is last Jason that's the stun there and we have to send the body ah cool it's not actually if it's funny it's like that's the stuff I always just copy and paste so I mean and I usually do it you don't want to write that every time yeah so in this case we actually not sending anything well let's actually send the quantity maybe could send a quantity let's just set that to 1 here Jinju them to do so yes turn a response and then you have to actually like yep the DJs from the Dutch correspond yeah cool all right I think that was the first time that I ever typed this out and oh I think I might have messed something up it is me a curly brace that they kinda click function is musically right yeah I think that might be a noise and we are compiled so one thing we're not handling is the quantity in our API root at the moment so let's actually do that and is it just do we do structure it from request up body yes cool so the curly brace is going one yes because I bought it it's like I forgot everything cool and then we can actually just sent the quantity here nice and that should actually be roll so it doesn't look very spectacular at the moment when we hit checkout we get to our checkout page so that now means that the request headers origin was actually filled in correctly we can then use so this is in test mode as you can see here we can use our test cards we pay the four US Dollars and now you see we get to a result page that actually doesn't exist at the moment they lay in tuition so far let's be really simple on to contrive make a shortcut I'll shake up nice yeah yeah that's that's a nice thing if you really want to get started quickly kind of a nice-looking checkout page then checkout is really neat it also has Apple pay and Google pay support built in by default so you don't need to configure that or anything so that is quite neat and so what we have now is we have the checkout session appended here so what we can do is we create a new page call it results Josh G as fish and then we want to export results and Regis return let's just call it Jim - Dermott so in this case we actually know that the payment was success for well it kind of depends on the payment method so what's card payments we know it's it's successful but with other payment methods they might be pending so let's actually say payment result and then what we want to do is actually get the check out session ID here from the URL and create a new API route where we just fetch the status of the checkout session so I believe there is is it in the next Rooter there's like a you know did you want to like add says the T query yeah so the second ID there are after its poor import Rooter from that's further that's is less rotor and is it like this yes I actually it's called use Rooter yeah just remember that's a hook it's a hook yeah so next Rooter is it yes and then it's use Rooter and so what we then can do is basically we get the router from use root or anything yes this and then okay now I've we now get if we want so it is it will be rooted that quick to rhetoric we read and dad hid okay so can we do I think it's session on the score ID row Jeff Josh query we do that yes and maybe do free here and let's just approach the session ID and I think we need to could it be that the session ID is undefined initially I just can be undefined because you can really know what's going to be in the query object there yeah cool so now we have a session ID but what we actually want to do is we want to fetch the checkout session so let's we already have this here let's add a new file maybe let's just say I think we can like this we can catch basically anything after just no would that work yes so do collect those braces those are [Music] well with those braces around the name of the page you can transfer that page to be a tanaami root so now any best articles slash ekkada slash anything would be handled by this page with the exceptional session because actually said as i rode and tower always have the preference okay cool cool so nice so it's just all taken care of that is pretty neat and so we can actually just let's copy um yeah let's just go be all of this so we need our stripe because we need to fetch the checkout session now how do we how do we access the ID is that that it will be able to request a query and then just here request our query yes nice cool and then we just do drive check out sessions and we want to retrieve it and then we just pass in the ID is that correct yep daddy would always be available in this case because I was enamoured would or what we called but so the type could be it could be an array of strengths so we need to cast it as a string here okay and then we actually want to return the full session object and just print - all right nice so we got the Rouge and so in our results page all right and then we can just use the ch now the way it works is Shh so just send two things so as all you are the fetus funny and then the URL yeah the the path to the API endpoint and then the second parameter is a function that's like the fetch stage we went through and it's not the full function yes so I just to fetch just a function so using a function that returns a fetch operation basically so in this case you want data to be the Jason right yes so you would send a function and then you're going to return fetch so I can I just do that yeah nice I the function will receive like the URL as a piece of parameter so you can't receive URL and send URL to fetch so here the URL is that yes okay touch your tree because this is a give method you don't have to send any options and then just do ten and then read listen I gotta dance in DJ's and then the return Jason is returned from the hook cool okay but then so basically the the so we actually have the session ID well I guess we can do this now but the thing is that the session ID could be now initially and so that's why we need to and absolu are what does is will propel a date every time you change the path so initially it was - any requests and then you would request with this is Friday that's cool and then basically what we can do is we can check if we have data but if we don't have any data we can return like can't spell tonight we can just return a default value so this is the the knowledge coral asking operator so if data is undefined then we just return default loading cool and so let's have a look at that okay and there seems to be status for for now why is that oh that's because I blindly copies Thor okay so uh yes so this should be because they'd have has to be has to be like a strain in this case yeah I can render an object so that makes sense so what we want to do is to json stringify data try that ah and then we want to make it pretty so bad let's check for the offer so if the theta then just asking if I or was stunned or we still estate yes that's true like this is nonsense I'm doing okay so let's say so basically okay let's do this data if we have data return a string of fight think of it otherwise say living okay yep now we're good and here we can now see our checkout session and do we have the checkout session itself doesn't have a status but it has a payment intent so we can actually just expand a for that payment intent so we can pass in and expand no shall we not yes we can that needs to be an array and we just say we want to expand for the payment intent if I save and now the payment intent data has been loaded in which has the charge information and on flash and that will have a status somewhere off succeed it's cool awesome under the steps oh cool bro yeah um it's some of it is quite nice if I've used her like three years ago I remember and what sort of my experience because Wednesday was what's kinda know like away you know way he had the best art she could find in in any in any library top-tier those yeah a lot has changed since then and I still kinda remember that the things like you to this this Shekau and you don't have to worry about security you never have car details he just works yeah yeah that's pretty nice cause so shall we now actually try and deploy this yep so I think what I need to do is basically just commit the changes maybe let's first have a look at what we have okay we have a bunch of changes let's stage them all and then say change to type script and and check out that is what we did and so now we have our repo I think we have the master branch and now I need to push it to get out us a correct just as correct so I think if we say deploy to our cell I'm already locked in here and then yeah I can so I can deploy from my kid repository so let's actually go to my github repositories and let's create a new one that's College next chance stripe typescript and it's it can be either public or private as Anchorage yes either smile because once you create a a better account you will ask you for permission to access repositories you can still advance and let multiple repositories or select our repositories dream private repositories one thing you might want to first make sure that the M that file is in green are I tell you what from where you can see because it is not that yeah I think the kid ignore is pretty good and yeah so awesome you guys default to that's perfect so but that also means we somehow need to set the environment variables and versus that correct yes so for the moment I tell him my make a deployment you might want to show you a code because I didn't direct believe me so should I just continue here yeah okay so usually the way we do this right now but that's going to change pretty soon prolly in this way or the next one is a little way to need to add just what the secrets face using the berserk lion like parasail secret seven tangible lot secret my secret to your work account so the deployments come for going to change that I made sure that you only get asked to do this in the UI versed of Condor alien that way you don't have to add any kind of configuration to your project realated versa - what happened did I do something wrong ah to select this one and do I say import yep import cool yeah let's keep the project name no I think it's in the root directory our call detects all of this for me Portugal and then deploy but so how at the environment let's go to settings mm-hmm settings they're not pants right he was in general ah sorry no no no actually I wasn't sure what it was so yeah general at the end of the page and here you can start adding the environment wearables cool and so that's going here we want our stripe secret key and okay so here we need to be careful if those are real secrets don't share your screen at least when you paste it in you cool and then just the price ID ooh I can't even copy and paste why did I mess this up for the other ones as well I hope not guess we'll find out am I able to view them or no no good yes what possible things went to be possible in the future gotcha and now do I need to rebuild I believe so I believe you to convert why the deployment all of you I just go back to change okay and we're building it something long it might be some more seconds that looks a lot better now so this is kind of all the like static optimization stuff you doing right yep so the circles the empty circle it means the pages are sorry and the tier assimilated is the lambda symbol meaning the pages along the Cerberus function I believe really sorry finished all right it's right on nice let's visit cool sure check out and we check out fingers crossed there we are cool and now you can see because we're here in my account where I'm locked in we can actually pay with Google pay so will be worse because it is HTTPS so the checkout page is always HTTPS but I was so I have different browser profiles so this demo file I'm not locked into my account so yeah so here I'm locked in and because it's test mode there won't be any any charge but we can actually pay with Apple pay and now or loading the checkout session sorry Google pay in this case and it will actually say also that we paid with Google pay cool pretty nice that was easy enough so I think we have like 15 minutes left so should we maybe actually look at deploying this project sure wait no it's not this project which is somewhat yes so with stripe typescript let's just follow the instructions to them so actually actually considering that it basically is we just use I scroll fits right yeah cool so we can just use create next app so let's maybe actually close this project go back to our sample school and let's run OSH okay that is fetching our project now then we do need to if we want to run it locally we need to set up our and file and add our keys and that is actually you yeah so let's do typescript so here we have it all set up let's do this and so we have our 10 file and here we also handling Y pox so what we can do mmm - Duke - do we go to our stripe dashboards it's almost publishable key again don't show the secret key to anyone and then the white box secret so we can actually when we run it locally that's a pretty neat thing we can use the stripe CLI so we can just run a stripe login to connect with our stripe account so here that's the next Janus account and we can now see when we reload - that the stripes Eli has created a restricted key that expires in 90 days it's been and then what we can do is to get our web hooks secret we can run stripe listen and it outputs the web hooks secret that is used for local forwarding so we can put that in here now and I think that should actually be yes so if we do to do just say and p.m. run def do we need to install dependency so did you know I think create react app that really allowed some dependencies for you nice okay so we're loading and compiled cool and so our local host but so now here we have two examples so one again with checkout which does the redirect so here locally we can use the CLI and we can forward the web box to our local web box route so as you can see here we have pages API routes and specifically the web hooks and what they do is they get the web book secret I think I'm version because if we don't pin the version off stripe note it ships it always ships with the most recent version of API types okay we should take a note that I should update that anyway so what we're doing here is we're getting the web book secret then what we're actually doing is we're verifying the signature to make sure that the web book event actually came from stripe so in this case we don't want to we want the raw the raw request information so we set the body parts are to false we also want to allow course here although I'm I'm not sure we actually need that if it's a server-side post request but so we're checking here that the method is post and then we are using the buffer to get basically the raw string from the request and the signature from the header and then we can use this helper to construct the event from stripe and so this is running locally here and what we can do is we can forward it to our local route and so now the listening is active so when we now make a payment we can see our weapon events coming in here and there was something did we pass the right weapon secret oh again I messed up the copy and pasting of the secret always check your well use okay so now let's retry this three times the charm let's actually do this one with elements so you can also build your custom a check out your eye if you want to and then you can provide your car teacher right in there register oh I need to remember - so on this laptop that I'm recording on I don't have a text expander set up for the card number so I actually need to type it in but so when we donate we can now see that the events are coming in and the events are being forwarded to our API root and we can see here successful events the payment intent was created and the status was updated to succeeded and now we have a successful charge cool awesome so yeah I hope this gave you a good overview of how you can get started with next Jas typescript and stripe and yeah do let us know in the comments if you have any questions or what you want to learn next we also have a feedback form in the description so if you want to fill that in we appreciate - Luis thanks so much for joining me today I learned to Lush again and yeah thanks for taking the time soon also learn a lot about stripe I said I use I used to learn last another of time ago so it's very cool to see all these new things on my final note if you want to learn and yes go to the nastier side we have a learn course that goes to the most important as yes SES features that calls us right now in the page nice you want to join the community go to the SES repo we have discussions and first of all you can read you can give us a sentence on a new issue thank you for her awesome thanks for watching everyone and see you next time [Music] you [Music] you [Music]

Channel: Stripe Developers

Views: 18,749

Rating: 4.9349594 out of 5

Keywords: stripe, payments, nextjs, Vercel, TypeScript, React, JavaScript, serverless, Jamstack

Id: sPUSu19tZHg

Length: 67min 39sec (4059 seconds)

Published: Wed Jun 10 2020