1 00:00:00,480 --> 00:00:00,970 Awesome. 2 00:00:00,990 --> 00:00:06,480 We have a law that says your order is complete and technically it is halfway complete. 3 00:00:06,480 --> 00:00:13,530 I guess because we didn't set up the order in the API but of course we didn't complete the transaction. 4 00:00:13,560 --> 00:00:19,080 This is what we're going to do in this video where instead of working in the front end we're gonna head 5 00:00:19,080 --> 00:00:25,700 over to our back end and this would be the case where for sure you need to have your back in the strappy 6 00:00:25,710 --> 00:00:28,410 application open in your text better. 7 00:00:28,530 --> 00:00:34,860 So we're gonna head over and I'm gonna grab my strappy project and then I'm gonna stop the server. 8 00:00:34,860 --> 00:00:41,800 Remember that was control C and we're going to start by installing the stripe package. 9 00:00:41,880 --> 00:00:49,470 So first let's type NPM dash dash save or I guess first then there's dash save and we're looking for 10 00:00:49,470 --> 00:00:51,090 the stripe package. 11 00:00:51,320 --> 00:00:58,350 Let's around the command and then once we do that we're gonna head over to API then. 12 00:00:58,350 --> 00:01:05,220 Product or I'm sorry order my apologies or not the product then we'll look for the controllers and then 13 00:01:05,220 --> 00:01:06,070 we have order. 14 00:01:06,070 --> 00:01:14,640 J Yes again we look for the API folder then within the API folder we have the order folder then we look 15 00:01:14,640 --> 00:01:20,010 for controllers and then or J us that's where we are going to write our code. 16 00:01:20,070 --> 00:01:24,390 Please make sure that you are actually located within that file because if you're not. 17 00:01:24,390 --> 00:01:26,280 Then again it's not gonna make sense. 18 00:01:26,340 --> 00:01:28,660 We have installed our package. 19 00:01:29,170 --> 00:01:30,500 And let me clear everything. 20 00:01:30,510 --> 00:01:36,920 And again I'm gonna start up the dev server so overrun NPM run develop. 21 00:01:37,110 --> 00:01:39,570 And first we're going to import strike. 22 00:01:39,870 --> 00:01:45,600 So since we have installed the package I'm going to close the sidebar I guess in this case I maybe can 23 00:01:45,600 --> 00:01:48,700 zoom in a bit more so we're going to create a new variable. 24 00:01:48,760 --> 00:01:54,080 And remember since it is a node project of course our imports are going to be bit different. 25 00:01:54,090 --> 00:02:00,320 We're gonna go with a require then we're looking for the stripe and then we would want to right away 26 00:02:00,330 --> 00:02:03,060 invoke it with our secret key. 27 00:02:03,060 --> 00:02:08,410 So I'm gonna head over to my dashboard and I'm gonna look for again my keys. 28 00:02:08,550 --> 00:02:10,840 In this case I'm looking for the secret. 29 00:02:11,100 --> 00:02:14,840 Now it might ask me to authenticate which we can do. 30 00:02:14,940 --> 00:02:19,440 And then once we do that then of course we're gonna have access to Aki please use your key. 31 00:02:19,470 --> 00:02:23,440 By the time you're going to be watching this I'm gonna use already a different key. 32 00:02:23,490 --> 00:02:27,270 So these keys are gonna be removed and I'm going to copy the key. 33 00:02:27,780 --> 00:02:33,800 We're gonna head over to our back end and then as a string we're gonna pass in Aki. 34 00:02:33,870 --> 00:02:34,990 Awesome. 35 00:02:35,040 --> 00:02:42,450 We have our setup then we have our module exports where we would like to export a function and the function 36 00:02:42,480 --> 00:02:46,260 is going to be create and it is going to be a synchronous function. 37 00:02:46,650 --> 00:02:52,050 So we're gonna write a sync and then as a parameter we're getting a context. 38 00:02:52,140 --> 00:02:53,820 So why do we need a context. 39 00:02:53,820 --> 00:02:54,730 Well let's think about it. 40 00:02:54,750 --> 00:02:58,840 If we had all back to our front end would passing in our values correct. 41 00:02:58,980 --> 00:03:03,590 We passing the name total items as well as stripe token I.D.. 42 00:03:03,990 --> 00:03:10,350 So wouldn't it make sense that we would be able to access them somehow in our backend and also the same 43 00:03:10,350 --> 00:03:11,900 goes for user talking. 44 00:03:11,970 --> 00:03:17,880 So this is exactly what we're gonna do with the context we're gonna have our context parameter and then 45 00:03:17,880 --> 00:03:21,270 within the function body we're just going to access the items. 46 00:03:21,930 --> 00:03:23,600 So we're gonna go for the same ones. 47 00:03:23,610 --> 00:03:32,400 So name total then we would want items then stripe token AI D. 48 00:03:32,780 --> 00:03:40,080 And that is going to be coming from context then a request request and then body. 49 00:03:40,080 --> 00:03:45,090 Now I'm not gonna console log because my way each and every time I need to stop and start a server. 50 00:03:45,230 --> 00:03:46,190 So just understand. 51 00:03:46,190 --> 00:03:51,020 Again we have context parameter and then whatever items we pass then. 52 00:03:51,020 --> 00:03:57,750 So in our case name total items and stripe token I.D. we can access it by looking at context request 53 00:03:57,770 --> 00:04:00,760 body and we also would want the user correct. 54 00:04:00,770 --> 00:04:02,810 So we're going to go with context or I'm sorry. 55 00:04:02,810 --> 00:04:12,860 I'm gonna go with variable I.D. so I'm going to the structure I'll D I.D. from context state and user 56 00:04:13,200 --> 00:04:19,640 not where I have my user I.D. and first before we set up our order because eventually we're gonna set 57 00:04:19,640 --> 00:04:25,640 up our order we're gonna communicate with stripe and we're gonna make sure that we set up our charge 58 00:04:26,030 --> 00:04:32,720 so I'm gonna set it up as a variable by the name of charge it is going to be a synchronous so I can 59 00:04:32,720 --> 00:04:41,420 just add a weight so I'm gonna wait once the promise settles and we're gonna go with stripe charges 60 00:04:41,420 --> 00:04:48,920 of course that is coming from my variable because I instantiated the stripe so I have stripe charges 61 00:04:48,980 --> 00:04:55,700 and then we have a method by the name of create within the method we passing the object and the object 62 00:04:55,700 --> 00:05:01,190 is looking for following properties we're looking for the amount however for the amount we need to multiply 63 00:05:01,190 --> 00:05:08,210 this by hundred so we're gonna go with total whatever our total is and multiplied by hundred knots just 64 00:05:08,300 --> 00:05:14,900 what stripe requires then we also have a currency Currency property and in here we would want to pass 65 00:05:14,900 --> 00:05:23,420 the USD so you say dollars and we also have a source of Stripe token I.D. So we have a source property 66 00:05:23,780 --> 00:05:30,120 where we have stripe token I.D. Why are we using that value here. 67 00:05:30,140 --> 00:05:31,880 Because of course that is our token. 68 00:05:31,880 --> 00:05:39,500 So like I said from the front end we pass our strike Tarquin I.D. to our back end and now within the 69 00:05:39,500 --> 00:05:47,390 back end using the secretly now essentially we are making our transaction and we also have a description. 70 00:05:47,390 --> 00:05:53,750 So I'm gonna add a comma and then within the description property I'm just gonna passing some kind of 71 00:05:53,750 --> 00:05:59,510 string value I'm going to say order and then let's get let's say today's date. 72 00:05:59,540 --> 00:06:02,940 So new date new date. 73 00:06:03,140 --> 00:06:04,320 Let's invoke it. 74 00:06:04,610 --> 00:06:07,610 And then also we're going to I don't know show the user name. 75 00:06:07,610 --> 00:06:08,870 So by. 76 00:06:09,010 --> 00:06:16,650 And then again we can access the variable since I'm using temporary literal so context state user and 77 00:06:16,700 --> 00:06:18,980 then we have a user name. 78 00:06:18,980 --> 00:06:20,810 So that of course is gonna be my user name. 79 00:06:21,350 --> 00:06:27,130 And if there's gonna be an error we're not going to be able to in fact set up our order on our back 80 00:06:27,130 --> 00:06:27,360 end. 81 00:06:27,360 --> 00:06:31,610 However if everything goes correct then we're gonna create a new order. 82 00:06:32,150 --> 00:06:38,800 So I'm going to say here const order and then since this returns a promise I'm just gonna set up a weight 83 00:06:39,240 --> 00:06:39,820 that I need. 84 00:06:39,820 --> 00:06:49,660 Type strappy and services then order and then we have a create method and then within the create method. 85 00:06:49,660 --> 00:06:58,230 Now we're passing the rest of the fields where we have a name Doro items and then we also had a user. 86 00:06:58,310 --> 00:06:59,970 So we need to set up our user. 87 00:07:00,050 --> 00:07:02,890 And now we're going to set our user equal to I.D.. 88 00:07:02,990 --> 00:07:05,630 Remember we do structured it from context. 89 00:07:05,630 --> 00:07:06,440 Site user. 90 00:07:06,590 --> 00:07:07,740 We got our I.D.. 91 00:07:07,820 --> 00:07:11,080 So now we're passing it when we're creating the order. 92 00:07:11,090 --> 00:07:16,560 And lastly once we have set up our awesome which is going to return our order. 93 00:07:16,610 --> 00:07:19,960 So we're just gonna type return water. 94 00:07:19,970 --> 00:07:25,570 We're going to serve it and we're gonna head over to our front end to make a proper charge. 95 00:07:25,580 --> 00:07:27,660 So now this is gonna be complete order. 96 00:07:27,680 --> 00:07:31,880 All right then let's say we're gonna add some items here. 97 00:07:31,880 --> 00:07:37,440 We're gonna go again with this one maybe this one added to the cart some more amount. 98 00:07:37,520 --> 00:07:43,940 Then again we're gonna roll back the products and let's select this guy and let's set on all three of 99 00:07:43,940 --> 00:07:44,500 them. 100 00:07:44,580 --> 00:07:52,100 And now we're gonna head over to checkout I'm still the same user so I'm just gonna type in some random 101 00:07:52,180 --> 00:07:57,260 a bigger lure and then let's add the proper values. 102 00:07:57,260 --> 00:08:03,620 So we have card values then we have some kind of month of course then card security code as well as 103 00:08:03,620 --> 00:08:04,310 the zip code. 104 00:08:05,150 --> 00:08:08,500 So let's go with the zip code and let's submit the order. 105 00:08:08,690 --> 00:08:11,880 And just to show this is how our error is going to look like. 106 00:08:12,170 --> 00:08:18,820 And like I mentioned previously if there is going to go something wrong with our stripe charge we're 107 00:08:18,830 --> 00:08:20,540 not gonna create a new order. 108 00:08:20,960 --> 00:08:27,290 So there was an error with our stripe charge and we did not create the error and just show you if we're 109 00:08:27,290 --> 00:08:33,160 gonna head over to our orders you're going to see that we still have this one order where we didn't 110 00:08:33,170 --> 00:08:35,060 have the proper user. 111 00:08:35,060 --> 00:08:41,090 So if something is gonna go with your stripe orders if something is gonna go bananas then you're not 112 00:08:41,090 --> 00:08:42,700 going to create any more. 113 00:08:42,730 --> 00:08:43,610 And now let's fix it. 114 00:08:43,880 --> 00:08:48,720 So we're gonna head over back to our backend and we just need to add math around. 115 00:08:48,770 --> 00:08:52,630 So we always always just need to make sure that we have the integer. 116 00:08:52,940 --> 00:08:59,210 So we're gonna go with the math around and then let's pass in our total multiplied by hundred. 117 00:08:59,400 --> 00:09:01,520 Like so let's save it. 118 00:09:01,520 --> 00:09:02,780 And now let's test it again. 119 00:09:02,990 --> 00:09:05,630 So now we saw how our error is gonna look like. 120 00:09:05,630 --> 00:09:11,630 And again since we're not wiping out the values or anything like that I can just close the alert and 121 00:09:11,630 --> 00:09:12,560 let's try it again. 122 00:09:12,890 --> 00:09:18,680 So let's say we're gonna try to submit the order and in this case I have my order is complete. 123 00:09:18,680 --> 00:09:25,070 So first of all alert is working then we're gonna head over not to our backend but in fact our dashboard 124 00:09:25,490 --> 00:09:26,780 lets refresh. 125 00:09:26,780 --> 00:09:34,280 Now we're gonna have some random big or so I can see already that again my order has been created and 126 00:09:34,280 --> 00:09:35,350 that's a good sign. 127 00:09:35,360 --> 00:09:40,050 And then in this case not only I have the card items I also have the user. 128 00:09:40,070 --> 00:09:45,230 So this is the correct user that created the charge and of course lastly we can just head over to our 129 00:09:45,230 --> 00:09:49,770 dashboard to our stripe dashboard and just see whether we created the charge. 130 00:09:50,090 --> 00:09:53,170 And I can see that I have created some charges already today. 131 00:09:53,180 --> 00:09:58,400 Then if I would want to have a specific charge I can just head over to the balance I have let's say 132 00:09:58,400 --> 00:10:01,390 three payments and then I look for my last one. 133 00:10:01,400 --> 00:10:07,430 So of course this would be the amount and you can see that it was created by John so successfully we're 134 00:10:07,430 --> 00:10:10,340 done setting up our payments using stripe.