1 00:00:00,390 --> 00:00:05,130 In the last section we spoke about some of the big considerations around building inside of that. 2 00:00:05,340 --> 00:00:10,590 We're now going to continue by talking about exactly how we're going to work with this stripe as a payment 3 00:00:10,590 --> 00:00:16,110 processor and how it's going to work inside of our application in such a way that you and I never have 4 00:00:16,110 --> 00:00:21,360 to actually accept credit card numbers on our back and server but somehow we still collect them from 5 00:00:21,360 --> 00:00:22,220 our user. 6 00:00:22,230 --> 00:00:23,660 So let's get into this. 7 00:00:24,220 --> 00:00:24,490 OK. 8 00:00:24,510 --> 00:00:29,370 So this is the flow that a user user is going to go through whenever they give us their credit card 9 00:00:29,370 --> 00:00:29,780 number. 10 00:00:29,820 --> 00:00:34,480 So this is how we're going to essentially get some money out of them up in our head. 11 00:00:34,530 --> 00:00:37,500 We're going to have that button that says something like add credits. 12 00:00:37,710 --> 00:00:44,160 Now when the user clicks on that button we are going to reach out to stripe our payment processor and 13 00:00:44,160 --> 00:00:49,850 we're going to ask Strype to generate a credit card form and show it to our users. 14 00:00:49,890 --> 00:00:56,250 So when we make use of Strype we traditionally install a plugin authored by Strype into our reactivates 15 00:00:56,310 --> 00:01:00,080 application anytime we want to accept a credit card number. 16 00:01:00,120 --> 00:01:05,790 We tell that Strype plug in to generate and show a credit card form to our users. 17 00:01:05,820 --> 00:01:10,470 So the trick here the way in which you and I are not going to handle credit cards at any time is that 18 00:01:10,470 --> 00:01:15,330 this form that we've been talking about the actual credit card form this is going to be automatically 19 00:01:15,330 --> 00:01:20,600 generated by Strype themselves and displayed to our users on our Web site. 20 00:01:20,850 --> 00:01:25,890 So that's going to be how we collect a credit card number on our site but never actually accept the 21 00:01:25,890 --> 00:01:27,560 credit card number ourselves. 22 00:01:29,380 --> 00:01:33,990 So once the form is visible to our users the user will enter their credit card details. 23 00:01:34,030 --> 00:01:39,880 So I put in the number the expiration date security code all that kind of stuff those credit card numbers 24 00:01:39,940 --> 00:01:47,900 will then be taken from the form directly by the stripe plug in and sent directly to the Strype API. 25 00:01:47,920 --> 00:01:53,380 So at no point in time during this process will you and I interact with the credit card number at all 26 00:01:53,440 --> 00:01:55,680 in any way shape or form. 27 00:01:56,200 --> 00:02:02,470 After these details are sent to the Strype API Strype will then respond with a token that represents 28 00:02:02,530 --> 00:02:05,320 the pending charge. 29 00:02:05,320 --> 00:02:08,890 So let's keep up you know we'll talk about this pending charges thing but let's continue through the 30 00:02:08,890 --> 00:02:11,080 flow and get a better sense of the entire process. 31 00:02:11,080 --> 00:02:16,120 And I'll tell you exactly what this token charge thing blah blah blah is. 32 00:02:16,390 --> 00:02:20,570 So we take that token which is essentially just a little blob of information. 33 00:02:20,830 --> 00:02:28,840 We are going to send it to our API our API will then make a follow up request over to Strype and confirm 34 00:02:28,840 --> 00:02:30,670 that the charge was successful. 35 00:02:30,670 --> 00:02:35,790 And at that point in time we will then add some credits to the users account. 36 00:02:35,910 --> 00:02:36,170 OK. 37 00:02:36,190 --> 00:02:40,630 So really the probably confusing thing about this process the part that I think is probably the most 38 00:02:40,630 --> 00:02:46,780 confusing is that sometime during this flow like this step right here we take the credit card details 39 00:02:46,780 --> 00:02:54,220 or to be accurate Strype does Strype takes us credit card details and sends them off to the API to Strype 40 00:02:54,250 --> 00:02:59,230 API then Strypes sends back this token representing the charge. 41 00:02:59,230 --> 00:03:05,170 We then send that token to our API and then make some follow up request with Strype So for some reason 42 00:03:05,230 --> 00:03:09,460 it appears that we communicate with the streite API two times. 43 00:03:09,700 --> 00:03:12,220 Well let's talk about exactly what's going on here. 44 00:03:12,340 --> 00:03:19,630 This initial exchange of credit card details with Strype can really be thought of as a sort of authorization. 45 00:03:19,630 --> 00:03:24,460 So when the user sends their credit card number off to Strype through their form and we get back this 46 00:03:24,460 --> 00:03:31,360 token thing right here you can think of that token as representing like a pending charge or an authorization. 47 00:03:31,420 --> 00:03:37,570 It's something that says hey the user has authorized your application to charge up to X dollars to their 48 00:03:37,570 --> 00:03:38,880 credit card. 49 00:03:38,890 --> 00:03:41,590 We then take that token send it back to our API. 50 00:03:41,770 --> 00:03:43,540 We figure out the final total. 51 00:03:43,590 --> 00:03:47,950 It's like the actual amount that we really want to build a customer for. 52 00:03:48,250 --> 00:03:51,370 We then build a customer using that token. 53 00:03:51,370 --> 00:03:57,100 So step one is to essentially get the OK or the go ahead and then step two is to actually go ahead and 54 00:03:57,100 --> 00:03:57,860 do it. 55 00:03:58,030 --> 00:04:02,640 Now the entire thought process here is that if we'd had all the logic for the charge on the front end 56 00:04:02,890 --> 00:04:09,550 it could be very easy for a malicious user to come in and kind of manually change the actual value that 57 00:04:09,550 --> 00:04:11,370 we want to charge them for. 58 00:04:11,410 --> 00:04:17,740 So like we might say hey our service costs $100 but a malicious user could come in and somehow say well 59 00:04:17,740 --> 00:04:23,680 I'm going to kind of arbitrarily tweak the value to $100 to $1 pay that and then give you some token 60 00:04:23,680 --> 00:04:27,640 that makes you think like yes money has been successfully charged. 61 00:04:27,640 --> 00:04:33,190 So the general idea here is that all the code that you and I run on our express server is 100 percent 62 00:04:33,190 --> 00:04:38,590 secure or you know reasonably secure and it will not be vulnerable to any users tampering with that 63 00:04:38,590 --> 00:04:39,630 process. 64 00:04:39,640 --> 00:04:45,460 So the actual charge or the actual light hey I want to collect these dollars from this user or this 65 00:04:45,460 --> 00:04:50,780 credit card is a step that occurs on our back end where the user doesn't really have a lot of say or 66 00:04:50,780 --> 00:04:53,000 a lot of control over that flow. 67 00:04:53,110 --> 00:04:56,040 Whereas they do have a lot of control on the front. 68 00:04:56,070 --> 00:04:56,410 OK. 69 00:04:56,440 --> 00:04:57,740 So this is the general flow. 70 00:04:57,790 --> 00:04:59,180 This is the overall idea. 71 00:04:59,320 --> 00:05:05,380 So I would say the high point kind of a high point of the really the big point inside of here is that 72 00:05:05,380 --> 00:05:11,050 we have to install this Strype library into our project and we're going to use that to actually collect 73 00:05:11,050 --> 00:05:13,870 a credit card from the user and make this billing stuff. 74 00:05:13,870 --> 00:05:16,040 All this credit card stuff sort of happened. 75 00:05:16,360 --> 00:05:19,960 So with that in mind we're going to take a break right now. 76 00:05:19,990 --> 00:05:22,830 When we come back we're going to sign up for the Strype API. 77 00:05:22,840 --> 00:05:24,700 We're going to create a new Strype account. 78 00:05:24,700 --> 00:05:29,650 We're then going to install Strype into our client project and start to set up the form. 79 00:05:29,650 --> 00:05:32,500 So let's continue the next section and sign up for the API. 80 00:05:32,620 --> 00:05:34,080 I'll see you in just a second.