1 00:00:00,630 --> 00:00:06,340 In the last section we finished up a lot of initial configuration around all the Strype API keys. 2 00:00:06,420 --> 00:00:13,080 So now we should be ready to go on the front end and the back end no further configuration necessary. 3 00:00:13,080 --> 00:00:18,260 Now at this point we're going to start to wire up that re-act stripe check out component. 4 00:00:18,450 --> 00:00:23,460 I want to remind you that you can really check out all the documentation around it at the get home page 5 00:00:23,460 --> 00:00:25,380 that it's hosted on worry. 6 00:00:25,390 --> 00:00:28,710 We're essentially going to go through the basic use of it. 7 00:00:28,890 --> 00:00:32,730 Feel free to look out the requirements here and all of this stuff you absolutely can. 8 00:00:32,730 --> 00:00:37,090 You don't have to though because we are really going to cover all the basics that you need to know. 9 00:00:37,110 --> 00:00:37,380 All right. 10 00:00:37,380 --> 00:00:42,150 So before we start to make use of this component I want to make one thing clear about what this thing 11 00:00:42,240 --> 00:00:43,570 really truly does. 12 00:00:43,590 --> 00:00:45,270 Right out of the box. 13 00:00:45,330 --> 00:00:51,420 So if we go back to a mockup remember that at this point in time we've said Oh yeah the header should 14 00:00:51,420 --> 00:00:57,420 have this button that says like add credits and if you click that you should see some interface or something 15 00:00:57,420 --> 00:01:00,910 to add some money or like give us your credit card number essentially. 16 00:01:01,290 --> 00:01:04,990 We also looked at a diagram that showed the credit card form. 17 00:01:05,400 --> 00:01:11,050 And remember we had said that this form would be generated by the Strype checkout library. 18 00:01:11,160 --> 00:01:18,340 So to be clear to kind of set expectations on what that Riak stripe check out component is really doing 19 00:01:18,660 --> 00:01:25,990 when we render that thing as a react component it shows a button that says Buy now. 20 00:01:26,010 --> 00:01:32,100 So by default when you render that component it shows a button that the user can click when they click 21 00:01:32,100 --> 00:01:34,800 it when they actually click it. 22 00:01:34,920 --> 00:01:36,820 Then the form will appear on the screen. 23 00:01:37,230 --> 00:01:37,860 So extra. 24 00:01:37,910 --> 00:01:38,490 Check out. 25 00:01:38,490 --> 00:01:41,250 It is not the actual checkout form per se. 26 00:01:41,370 --> 00:01:47,220 By default it shows a button which the user can click and that will then actually load up the credit 27 00:01:47,220 --> 00:01:48,500 card form. 28 00:01:48,510 --> 00:01:54,900 So at this point we are going to create a new component whose sole purpose is going to be to do a little 29 00:01:54,900 --> 00:02:00,190 bit of configuration of react striped check out after we create that component. 30 00:02:00,270 --> 00:02:06,000 We will then place it into the header component of our application so that it can properly display its 31 00:02:06,000 --> 00:02:07,550 button up in the header. 32 00:02:07,680 --> 00:02:12,930 Then whenever a user clicks it OK then the checkout stuff takes over and form appears in the middle 33 00:02:12,930 --> 00:02:13,520 of the screen. 34 00:02:13,620 --> 00:02:14,270 OK. 35 00:02:14,760 --> 00:02:16,430 All right so let's get this shot. 36 00:02:16,470 --> 00:02:22,140 When you flip on over to my code editor and find my client directory Here's my source directory and 37 00:02:22,150 --> 00:02:28,900 find my components folder and inside there I'll make a new file called payments. 38 00:02:29,100 --> 00:02:36,810 Jesus right now the name of this thing payments you know I just picked it off top of my head. 39 00:02:36,810 --> 00:02:40,470 You can call this stripe wrapper or stripe billing whatever you want. 40 00:02:40,470 --> 00:02:43,240 I just decided to call it payments. 41 00:02:43,290 --> 00:02:49,080 Now again we're going to make our own component that sort of wraps the striped check out thing and passes 42 00:02:49,080 --> 00:02:51,310 it a couple of configuration options. 43 00:02:51,480 --> 00:02:55,580 So we are going to make a re-act component of our own inside this file. 44 00:02:55,590 --> 00:03:01,520 We will also import the re-act stripe check out component and showed that inside of our own component. 45 00:03:01,830 --> 00:03:02,620 So let's get to it. 46 00:03:02,640 --> 00:03:06,620 I think that once we start putting the code together it'll make a lot of sense. 47 00:03:06,690 --> 00:03:13,920 So I'm going to make a class based component so I'm going to import both react and component from react 48 00:03:15,160 --> 00:03:22,050 and hey why not let's get this done with right now let's import streite check out from re-act stripe 49 00:03:22,400 --> 00:03:23,610 check out. 50 00:03:23,610 --> 00:03:26,420 You will notice that I'm kind of breaking naming convention here. 51 00:03:26,430 --> 00:03:30,970 The library is called Riak stripe check out but I called it only Strype check out. 52 00:03:30,990 --> 00:03:33,380 That's because honestly we don't need the react word in there. 53 00:03:33,420 --> 00:03:37,980 You know we know this is for react and putting on reac doesn't really bias anything. 54 00:03:37,980 --> 00:03:40,400 So I'm just leaving it off. 55 00:03:40,440 --> 00:03:40,730 OK. 56 00:03:40,740 --> 00:03:48,450 Now we'll make our class payments extends component inside of here we have our render method and in 57 00:03:48,450 --> 00:03:56,190 here we will return our one singular component which is the Strype check out component. 58 00:03:56,220 --> 00:04:05,080 So I will place Strype Check out like so at the very bottom I will export default payments. 59 00:04:05,800 --> 00:04:06,350 OK. 60 00:04:06,630 --> 00:04:12,420 Now before we go in wire this up to the header we might as well do a couple of the required configuration 61 00:04:12,480 --> 00:04:16,710 options that we need for handling this stripe checkout thing. 62 00:04:16,710 --> 00:04:21,630 So the first required property that we have to put in here to get the thing to work the way we expect 63 00:04:21,990 --> 00:04:26,700 is going to be the amount of money that we want to request from the user. 64 00:04:26,730 --> 00:04:29,250 So the prop is called a mount. 65 00:04:29,310 --> 00:04:34,420 Now this is going to be just a little bit tricky to understand the amount right here. 66 00:04:34,650 --> 00:04:40,740 When I think about the amount of money that I'm paying someone my mind immediately goes to US dollars 67 00:04:41,070 --> 00:04:45,500 because I'm from the U.S. You know I live in California and I've got you know OK. 68 00:04:45,510 --> 00:04:49,230 Probably like $2 in my wallet but I do have dollars in my wallet. 69 00:04:49,230 --> 00:04:50,420 All just put it that way right. 70 00:04:50,450 --> 00:04:52,080 I got dollars in my wallet. 71 00:04:52,530 --> 00:05:00,330 Now if you're in a different country like you're in Brazil or you are in England or you are in Portugal 72 00:05:00,480 --> 00:05:06,750 or wherever else when you see the word of mouth you might think of your respective currency. 73 00:05:06,750 --> 00:05:11,880 And so that's very important we need to make sure that we tell streite exactly what currency we're talking 74 00:05:11,880 --> 00:05:20,490 about and exactly what denomination inside that currency we want to request as the amount now by default 75 00:05:21,180 --> 00:05:25,320 striped check out defaults to using U.S. dollars. 76 00:05:25,410 --> 00:05:28,370 If you are in a different country than the U.S.. 77 00:05:28,440 --> 00:05:33,000 So if you are in Brazil Brazil you're in Portugal you're in England or wherever else. 78 00:05:33,000 --> 00:05:39,330 I still highly recommend that in this course you stick with U.S. dollars along with me because if we 79 00:05:39,330 --> 00:05:44,130 both use U.S. dollars we can make sure that our code is always going to look very similar and we'll 80 00:05:44,130 --> 00:05:48,800 be able to ensure that you and I have essentially the same code on the screen at any given time. 81 00:05:48,840 --> 00:05:51,800 So I do recommend you just stick with us dollars. 82 00:05:51,840 --> 00:05:52,950 Stick with me. 83 00:05:53,060 --> 00:05:57,730 And later on after we finish everything you can come back and change the currency if you want to. 84 00:05:57,810 --> 00:05:59,610 OK I want throw that out there. 85 00:06:00,210 --> 00:06:00,440 OK. 86 00:06:00,450 --> 00:06:02,920 So we will stick with us dollars together. 87 00:06:03,170 --> 00:06:06,600 And now the next thing we do is actually figure out what this amount is. 88 00:06:06,840 --> 00:06:13,620 So we want to simply charge our users like say $5 to send out five distinct surveys. 89 00:06:13,740 --> 00:06:21,030 So we really want $5 out of this thing rather than asking for five like that amount right here. 90 00:06:21,030 --> 00:06:24,080 It's supposed to be the amount in cents. 91 00:06:24,390 --> 00:06:26,710 So U.S. cents. 92 00:06:26,730 --> 00:06:28,730 There are 100 cents to a dollar. 93 00:06:28,740 --> 00:06:34,760 So if we want $5 we're going to ask for five hundred cents like so. 94 00:06:34,800 --> 00:06:41,440 So this right here says Give me five dollars in U.S. currency. 95 00:06:41,690 --> 00:06:46,030 Now the other options I promise won't take as long as that one and maybe they will I don't know. 96 00:06:46,230 --> 00:06:51,050 OK so the next one that we're going to take care of is a property that is very poorly named. 97 00:06:51,150 --> 00:06:55,110 I want to make sure this is clear this is a very poorly named property. 98 00:06:55,110 --> 00:06:57,390 So the name is tokin. 99 00:06:57,460 --> 00:07:02,160 Now when you see it right here you might think that it means like oh this is the API key like the token 100 00:07:02,250 --> 00:07:04,890 API you know those terms are kind of interchangeable. 101 00:07:04,890 --> 00:07:06,430 That's not what it means at all. 102 00:07:06,520 --> 00:07:14,340 Totally right here is expecting to receive a callback function and that callback function will be called 103 00:07:14,730 --> 00:07:20,760 after we have successfully retrieved a authorization token from the Strype API. 104 00:07:21,090 --> 00:07:26,300 So remember how Strype works after the user enters their credit card details. 105 00:07:26,310 --> 00:07:29,550 Those details are sent directly to Strype by the form. 106 00:07:29,760 --> 00:07:33,540 And then Strypes sends back a token representing the charge. 107 00:07:33,540 --> 00:07:36,670 So that is what this token is referring to. 108 00:07:36,880 --> 00:07:39,890 We're talking about the token that we get back from strike. 109 00:07:40,380 --> 00:07:45,360 So this is going to be a callback function right here that gets called with a token we receive from 110 00:07:45,360 --> 00:07:46,470 strike. 111 00:07:46,500 --> 00:07:51,070 Now the reason I say this is a poorly named property is not only a fact that it uses the word token 112 00:07:51,450 --> 00:07:59,720 but traditionally with re-act components any type of callback property usually is called Like on something. 113 00:07:59,820 --> 00:08:04,950 So on token would have made way more senseor would have been a lot more clear what's going on but that's 114 00:08:04,950 --> 00:08:06,090 not what is actually called. 115 00:08:06,090 --> 00:08:07,270 It is called tokin. 116 00:08:07,380 --> 00:08:09,950 So we just do tokin now for it. 117 00:08:09,960 --> 00:08:12,660 Now let's just console log the token when we get one back. 118 00:08:12,870 --> 00:08:17,480 So I'll put in an arrow function that takes the token and logs it out again. 119 00:08:17,500 --> 00:08:21,570 Now the very last property and this one is definitely the easiest stripe key. 120 00:08:21,600 --> 00:08:23,130 I bet you can guess what this is. 121 00:08:23,250 --> 00:08:25,610 This is going to be our API key. 122 00:08:25,620 --> 00:08:31,620 It's going to be the publishable key that we just defined inside of those dot ENP files so to reference 123 00:08:31,620 --> 00:08:34,590 the key that is inside those dot inby files. 124 00:08:34,590 --> 00:08:38,430 Remember the name of the key is re-act stripe key. 125 00:08:38,430 --> 00:08:46,330 So right here at striked key will say process on EMV dot re-act stripe key. 126 00:08:47,180 --> 00:08:47,580 OK. 127 00:08:47,640 --> 00:08:48,930 So this is looking good. 128 00:08:49,200 --> 00:08:54,930 Now just to kind of throw back to the topic of what is going on with this environment variable right 129 00:08:54,930 --> 00:08:55,830 here. 130 00:08:55,830 --> 00:09:01,350 When we test this out I'm going to put a debugger statement at the very top at the render method because 131 00:09:01,440 --> 00:09:07,710 I want to see the actual javascript code that is generated by this statement or by you know this real 132 00:09:07,710 --> 00:09:08,850 block right here. 133 00:09:08,940 --> 00:09:14,430 And I think that the value of this right here like how this actually shows up in the browser might kind 134 00:09:14,430 --> 00:09:15,310 of surprise you. 135 00:09:15,570 --> 00:09:16,420 OK. 136 00:09:16,770 --> 00:09:22,350 So let's say this file and then the last thing we have to do is change over to our header and show this 137 00:09:22,350 --> 00:09:24,120 component in the header. 138 00:09:24,300 --> 00:09:27,240 So I will go over to the head component. 139 00:09:27,240 --> 00:09:35,160 I will import payment's out the top import payments from payments and then I'm going to fall find the 140 00:09:35,160 --> 00:09:38,090 case in which our user is logged in. 141 00:09:38,100 --> 00:09:40,020 So here is our render content method. 142 00:09:40,080 --> 00:09:41,880 Here's the switch statement. 143 00:09:42,240 --> 00:09:47,840 The default case is the case that that controls whenever the user is logged into our application. 144 00:09:48,090 --> 00:09:52,890 So we essentially want to show another little bit of GSX in this case right here. 145 00:09:53,340 --> 00:10:04,170 So to give us that opportunity we're going to return not just a blob of GSX right here but you know 146 00:10:04,260 --> 00:10:08,580 this is actually I just realized my project is using a version of reactor where this is not going to 147 00:10:08,580 --> 00:10:13,990 work properly and you likely are using re-act 16 which is working properly. 148 00:10:14,010 --> 00:10:15,750 So let's take a quick pause right now. 149 00:10:15,750 --> 00:10:20,310 I'm going to update my version of react and when I come back we're going to do a little change this 150 00:10:20,310 --> 00:10:21,870 line that's going to make a lot of sense. 151 00:10:22,020 --> 00:10:22,560 Quick pause. 152 00:10:22,560 --> 00:10:23,430 We're going to come back. 153 00:10:23,460 --> 00:10:27,440 We'll make sure we actually place the payments thing inside of here and make this all work. 154 00:10:27,480 --> 00:10:29,610 So we'll see you in just one minute.