React Stripe.js

[Music] we have a brand new react library for stripe elements if you haven't worked with stripe elements before no worries there essentially pre-built UI components that you can add to your website or app to collect payment details online there's a whole swath of regulations and complexity around collecting payment information from your users but if you use stripe elements it really abstracts away all of that welcome to stripe developer office hours I am Thomas I am a developer support engineer here at stripe and I'll be facilitating today's session we also have multiple stripes on hand in the chat box to answer any of your questions that you may have before we get started let's go over a quick agenda and some prerequisite items so we're gonna start off by installing our new library reaction ijs then we're gonna use it to create a credit card input from there we're gonna explore the many intricacies of styling stripe elements then finally we're gonna process a payment with the collected credit card details and that'll be all we won't have any hard prerequisites for today's session but it would be helpful if you did have some experience with modern react that being said there will be some links down in the description that you can reference as we go along so let's head on over to our starter repository which is echod com4 slash team Eric a stripe demo react stripe yes and there will be a link down in the description so you can copy and paste that without having to type it out here's a little sneak preview of what we're going to build out you can add a product in this case Donuts you can enter in an email address and this component you can type in your credit card information that credit card information gets sent to stripe and stripe crosses the payment if you are following along or we're gonna first do is clone or download this repository I'll just switch on over to the terminal we're going to run the command git clone and we're going to CD into the new folder and then here we're going to want to check out the getting started branch and this is important if you're following along because this is the part of the application this is a version of the application that doesn't have any of the payments piece filled out for us okay and at this point we can run npm install and then that'll take care of installing any preliminary packages i'm going to be using vs co today but you're more than welcome to use whichever text editor you're more comfortable with it will just open up the folder that we cloned and this starter repository is built using next Jes I do want to emphasize that next is is not a prerequisite or requirement for using react striped yes you can use react stripes wherever react works we have a bunch of pre-built components the two components that aren't finished and we're going to be trying to finish today are the checkout form component which has the billing details and it has an empty spot for the card element that we're going to add together and a button and a spot to display some errors and then this layout components you could think of this layout component as a wrapper around all of our pages in the site right now there's only one page in the site but in theory if we had many this layout component would wrap all of them this is going to be the spot where we're going to want to load striped ojs it's important to low striped ojs in each page of your application just so you can take advantage of all the fraud prevention functionality there is one last order of business before we can start coding and that's the adder publishable key and secret key from the stripe dashboard so if you haven't already now it would be a good time to sign up for stripe if you don't already have an account once you have an account you can go to dashboard drive comm and then once you're in the dashboard just make sure that you're viewing test data the toggle in the bottom left should be on click developers and click API keys you should see a publishable key and a secret key I highly don't recommend revealing your secret key as I'm doing now if you ever do that by accident you can always go to your dashboard and click roll key on the right there we're just gonna go ahead and copy these over to the S code there we go and I'll do the same thing with the secret key you perfect so now that we have the secret key in the publishable key we can go ahead and run our app just to see that it works in a terminal you can run npm run dev i'm just gonna do it through vs code an NPM run dev should trigger the npm script dev and compile our app and serve it on localhost 3000 so we can go to chrome type in localhost 3000 and here we have our app you can add or remove Donuts for the great price of a buck 50 and you can enter your name email address city state zip the only thing you can do is pay for your Donuts and that's what we're gonna fix today so let's head on to our terminal and here we're going to install the two remaining NPM packages that we're going to need the first package that we're going to need is under the stripe namespace and a stripe - Jas and if you're familiar with stripe Jas and if you've used it in the past you probably would have had to add the script tag or copy and paste the script tag with the stripe KS URL into the head of your HTML you no longer have to do that when you're using reaction IDs because this package here will provide a function that'll do that for you then the next package the star of today's show is react stripe GS and this is similar to the react striped elements package that we had previously with many improvements including support for hooks so we'll install both of these should take a second or two perfect then we can head back to the s-code an envious code we're going to go to lay out JSX and then here we're going to import the load stripe function from a stripe stripe to s and then here we can call load stripe which is going to return a promise which resolved to the stripe day s object [Music] and we're going to pass it the publishable key that we added to our dot M file before publish a little key there we go just a tip and you don't want to call stripe promise within the render method of a component sorry you don't want to call load stripe within the render method component the idea being is that you don't want to load more than you have to you only should have to load it once per page all right so now that we have the stripe promise which resolves to stripe jes we're gonna want to find a way to inject that striped ojs object into the rest of our react components the way to go about that would be to use the elements provider from our new library reaction type dance we're just going to wrap the children of each of our pages in the elements provider and then we're going to provide the striped prop with the stripe promise we go just make sure it's wrapped awesome we can save that now we can go to Chrome do a quick check just to make sure nothing broke everything looks good still one thing missing and that's a card input so let's go add that right now go to checkout form JSX and we can import the card element from that stripe react stripe yes then we can add the cardamom into the card element container save that head on over to Chrome and here we should see a card element input perfect there is one thing that's a little off with this card element input and that's the styles they're not matching the styles of the rest of our input so you can see here if I type in the text in a city it shows up as white and if you type in the text for the card element input it shows up in black I'll dive into a little why that's happening let me just zoom in here a little bit so here you can see if you inspect the card element input it shows up as a regular input tag which is expected but if you go up a little bit you'll notice that it's embedded within an iframe and then this is the key issue here the one thing I remember when styling the card element input is that styles dont cascade down past iframes so you can think of like if you were to add a color or font family to the body of your HTML page and you were to expect that to trickle down or to trickle down to any child components that would inherit from that style that doesn't happen within an iframe and iframe sort of blocks that from happening it has its own style context there is one way to do that and that's using javascript and we actually have an options object that you can pass in with some styles to the card elements component and that's what we're going to do right now so if you switch back to vs code so here we have in the readme we have some credit card input design requirements so our designer how to look at our work and they told us hey it looks okay but we want it to match the rest of the info fields so the text color should be white the font size should be 16 pixels the placeholder text color should be 870 BFD and this should be the invalided text color so let's go ahead and implement that so I'm going to head back to checkout form and then we're gonna supply an options prop to the card element with some cardinal int options and then I'm going to create the card element options and the full docs for the card element options if you're following along is at stripe comm slash Doc's / - yes and you'll notice that there is a style option that we can add and you can think of this style option as a way to inject styles into that iframe so the normal approach of using classes won't work we have three different styles that we can add we can add in that base styles we can add in ballad styles and we can add complete styles and then these signify the styles that we want to add depending on the state of the card element input so if you notice previously when I entered in an incorrect credit card number they showed up as red if we wanted to change that red color we would supply it to the invalid field here we don't have any complete styles to add so we'll just add some base and invalid text let's see so let's change the font size to white Oh 16 pixels colors white and then we want to change the invalid text color we can copy and paste that from the readme oh there we go and we also want to set the placeholder text color and you can see here that I'm using pseudo selector you can reference the stripe com / - yes dogs to see what other pseudo selectors that you can add they're here we're going to set the color and we can copy and paste that over from the readme and there is one thing that our designer didn't mention and that's the icon color of the card element input and we can go back to the browser and check that out so here you can see our placeholder our placeholder text text color changed so it matches the other element input and when I type in a number it shows up as white which is exactly what we wanted so if I try and force an invalid state and you can see here that the color of the invalid text matches our button which is exactly what we wanted the only thing the only issue is that the red color of the icon doesn't match so let's fix that right now and I head back to the S code there we go and there is an icon color option that we can pass in to set that color Oh like little typo there we go and head back to chrome real quick just to test that out let's type in card there we go and you can see the icon color matches the text color it's exactly what you wanted there is one other thing that a designer may point out to us and that's if you type in a credit card number you'll notice that a zip field pops up automatically in this case it's probably not what we'd want because the user would have to enter in a zip twice because we already have a zip entry here in the address component we don't want to have the user encounter this field so there is an option and for some of you that are following along you probably can already know what that option is I'm just gonna go to vs code and it's not going to be within the styles but it will be under card online options and it's a hide postal code function we're just going to set that to true and once we set that to true that zip field shouldn't show up anymore so we're going to go back to Chrome there we go we're going to type in a credit card number and then you can see here that after I fill out the expiry the credit card number and the CVC there are no zip fields that pop up perfect so now we have a credit card input field it looks great our designers are happy there's one group that's not very happy and those are our accountants the reason being is we're not able to accept payments yet it looks like we can but if you click pay nothing really happens let's fix that by going to be is code there we go so in order to accept a payment we're going to need to do a couple things we're gonna be using our new payment intents API and the first step is to create a payment intent on the server and we're not going to build out the server portion of this I will walk through what's happening on the server it's essentially one call to the strike node library and what's gonna get returned from the server is a client secret of that payment intent okay and after we have the client secret what we can then do is create a payment method and in order create a payment method we're going to need a reference to the stripe AS object which has that function to create a payment method and when we create a payment method we're going to need a reference to I just scroll up we're going to need a reference to the card element that we defined earlier once we have a payment method the next step would be to confirm the card payment and then here's where we're going to combine the payment method ID and we're going to use the client secret that we got in the first step so here I'm going to use Axios to create a post request to my back-end that said client secret perfect so we have and we're just going to await that call and if you haven't used Axios before and you're not familiar with it it's essentially a wrapper around a fetch API so you can think of it just as a nice and simple way to make a fetch request so here I'm going to post to API payment intents and we'll we'll look into what's going to happen server-side and I'm going to pass in the amount for the payment intent so that's going to be the price and we're going to multiply that by a hundred and here if it's not clear we're getting the price from the input props so if you noticed every time I added or remove the donut the price would change whenever the price changes that's going to end up and trickle down into this component here you may be wondering why I'm multiplying it by a hundred a pro tip here is that in stripe the amount is in the lowest denomination and what I mean by that is that say we're working with dollars the lowest denomination of a dollar is a cent so if I want to specify a charge for say one dollar that would be 100 cents so here in the front and we can just console dot log client secret and we can check to see what's happening in payment underscore intents so under pages API there should be a payment intense file and then here we can see that we have a simple handler for that endpoint we're going to ensure that the request is a post request we're going to extract the amount from the request body we're going to make a request to stripe top payment and ten stock create and we're gonna we're going to be using the node stripe library for that and that's instantiated using the secret key that we got from the dashboard before so it's one simple request where we're setting the amount and the currency of USD and then here we're just sending back the payment intent client secret there's any errors and it's always a good idea to catch any errors that you may have when you're building out your payments integration we're just sending a 500 with the helpful error message so here we can say this and we can go back to Chrome and then we can see what happens when we add a credit card number to our input so here I'm just gonna enter in some test data test test test three I'm just going to quickly open up the console just so that we can see our logged client secret if it worked there we go and click pay and here we go after a few seconds there's a client secret if you notice we are making a request so it does take some time and then it's always best practice to disable your your submit button when you are making payment requests so we can fix that in the front end as well but here we have a payment intent client secret you can see that it's formatted with a PI underscore than a hash all of my underscore secret underscore than another hash and this is what we're going to use to confirm the card payment after we've created the payment method I'm going to switch back to BS code and what we can do up top is we're just going to set is processing to true and if you look at our submit button that's gonna disable the submit button and it's gonna set as processing to true one thing we should also do is ensure that the submit button is disabled if stripe doesn't is null essentially because if you're loading stripe in a server-side rendered environment when you load it it's going to return null evan in that scenario we don't want to have the submit button enabled so we'll do that as well so before this call we can set it is processing set processing to true and then we can go ahead and start we can delete that from our to Do's and we can get a reference to the card element so the way to get a reference to the card element and then this is a reference to this card element that we added to our render here equals and we're going to use elements dot get element card element there we go and we're gonna you know reference to the elements object and we're going to use the use elements hook for that little typo and we're also going to need a reference to the stripe object and we're going to use the you strike hook for that so I'll pause here just to explain a little bit what's happening you can see here that I got an error and that's because I have an import you striping these elements from react striped yes so I'll go ahead and do that perfect so before in layout JSX we added we loaded stripe using load stripe function from stripe chess then we injected it into the checkout form component using the elements provider and you stripe this hook that we have right here is the way to sort of get back that stripe object and same with use elements it sort of extracts that elements object from the instantiated stripe yes ok so now that we have a card element and we have a reference to the stripe object we can create a payment method with stripe got three payment method and then here we're going to provide the type of payment method we're going to provide the card which is a reference to the card element and then we're going to provide the building details and this is going to associate these billing details that we're collecting with this payment method that we're making building details and we can just do a console that log just to make sure that there wasn't an error okay everything's compiling successfully so let's head on over to Chrome there we go we can shift this over a little bit and turn some test information and then we're going to enter in a credit card number like pay so processing goes and then here we have a promise and it's resolved so the one thing that we're missing here is an await one but we can see if we add in a way to it I'll zoom in here just so it's a little easier to see there we go it resolved to a payment method object which has a payment method ID which is what we're going to use to confirm the card payment and you can see here that there's a bunch of information that we have associated with this payment method so let me head back to the S code [Music] okay and here we notice that we weren't awaiting so I'm gonna await that call and we can chalk this off our list and now the only thing we have left to do is to confirm the card payment and we're going to use stripe not confirm car payment for that okay and then we're going to provide the client secret as a first parameter and then the second tab parameter is going to be an object where we're gonna supply the payment method we're just going to be the payment method request on payment method dot ID and here if we log console dot log confirmed card payment we should get payment and Ted back from that so let me just head back to crow you can clear that out we can add some items to our cart so here I'm saying I'm going to buy nine dollars worth of donuts at example.com 25 Berry Street and Francisco California - centering some test data 9 4 103 an entry in one of our test credit cards and it is important when you're testing stripe to use our test credit cards there should be a link down in the description that includes a list of all our test credit card numbers that you can use when you're in test mode highly don't recommend trying to test in with real credit cards so here we're paying we're processing and after a while we should get a payment intent and I'll zoom in here just so it's a little easier to see there we go so we have a payment intent ID and down here you can see that the status was succeeded there you go perfect so for the most part this is a functional payments integration with stripe there's a few things that we can do to finish this up is we can call on successful checkout if there weren't any errors so that's what checkout and then that I'll redirect to the right page so we can head back over to Chrome we can close this out as we already know what we want here I'm gonna get the max number of donut such as 1218 dollar charged by very street San Francisco California 94 103 then trade one of our test credit card numbers alright could pay should process and there we go our payment went through so how can we check other than doing a console dot log that the payment went through the easiest way to go about that would be vote of the dashboard and then in the dashboard go to payments and then you can see here that we have a charge for $18 USD which is the payment intent we created for it and all the billing details that we associated with that payment payment method so we have a name email address CVC Street zip tech and additional information on that charge highly recommend looking through the dashboard as you make these payments because there's a whole array of interesting information that you can gather all right so let's head back to vs code so this integration does work but there's a number of things that are missing and could be better we're gonna leave that as sort of a to do for homework in that the master branch of the repository for the starter repository that we built off of has a working implementation which includes things like error handling which is a large part of what's missing from today's walkthrough so for example if this post requests to payment intents failed we would want to catch that and display a helpful error message to the user if the create payment method request failed we'd want to catch that and display it to the user and the way to go about that is essentially just to check if there's an error returned by these requests and if there is an error then you'd use this set checkout error State handler that we have set up for you and then that should display the error message down here to the user it's especially interesting to see what error messages get returned from create payment method because you'll notice that we will send out helpful error messages when the user hasn't entered or has entered in an incomplete or an incorrect credit card number the other thing that's missing is order fulfillment so there will be links down in the description for how to fulfill orders when you're using payment intents you'll notice that we basically just redirected to a success page when the payment intent was confirmed what we'd want to do in the backend is we'd want to create a web hook endpoint which is essentially just a regular end point and then stripe is going to make a post request to that end point when the payment has gone through and then at that point we can fulfill the order in our back-end I highly recommend checking out one of our sample stripe samples which is built using react stripe CS next is and its uses typescript it includes order fulfillment using web hooks and you can reference that after you've gone through this exercise so let me switch back over and we'll go over some some final docks and resources so we have a link to the stripe comm docs for react striped es which I used heavily in today's walkthrough the striped ojs reference is what you'd want when you're looking for what properties you can add to that style object and what additional card element options you can provide the payment intents API has all the information on creating a payment intent confirming the payment intent and fulfilling those orders using web hooks again be sure to check out that next is typescript sample app it's amazing thank you so much for tuning in today we will be sticking around for a few minutes to answer any questions that you may have and see you next time [Music]

Channel: Stripe Developers

Views: 53,879

Rating: 4.9039998 out of 5

Keywords: stripe, payments, react, stripe.js, React Stripe.js, Accept payments with React

Id: w1oLdAPyuok

Length: 35min 15sec (2115 seconds)

Published: Wed Feb 26 2020