1
00:00:01,050 --> 00:00:10,050
And once our public key is in the browser and Jess, let's finally start working on our controller and

2
00:00:10,050 --> 00:00:15,520
first thing we want to do is go to app jazz and we want to set up a route.

3
00:00:15,930 --> 00:00:19,680
Now, the rock needs to match whatever we have here in the patch.

4
00:00:20,310 --> 00:00:22,650
So name is really up to you and Mike.

5
00:00:22,830 --> 00:00:25,370
And I'm the type, therefore, in app.

6
00:00:25,450 --> 00:00:26,990
Yes, I'm a server.

7
00:00:27,000 --> 00:00:32,870
I'm going to create a poster child for the stripe, not the Methodist post.

8
00:00:32,890 --> 00:00:36,000
So we need to use that post online.

9
00:00:36,010 --> 00:00:37,310
The route is stripe.

10
00:00:37,590 --> 00:00:38,280
If you want to name it.

11
00:00:38,280 --> 00:00:39,290
Definitely be my guest.

12
00:00:39,300 --> 00:00:43,190
Just make sure that in the app you do the same thing.

13
00:00:43,470 --> 00:00:48,240
So I'm going to navigate here and I'm looking for app then post.

14
00:00:48,540 --> 00:00:51,360
And as far as the route, it's going to be a stripe.

15
00:00:51,720 --> 00:00:53,780
And here I want to set up the controller.

16
00:00:54,510 --> 00:01:00,240
So in the story you'll find the controllers folder and in there you're looking for Strib, Controller

17
00:01:00,480 --> 00:01:01,230
Jass.

18
00:01:01,590 --> 00:01:05,519
So let's just start with the basic structure and then we'll go from there.

19
00:01:05,810 --> 00:01:08,850
So in here, let's just go with Consed and Stripe.

20
00:01:09,180 --> 00:01:18,180
It's going to be a async Barack and rise and let's just go with log or you know, before we log anything,

21
00:01:18,180 --> 00:01:28,800
let's just send back the rest, not sand and stripe around when we want to go with module, not exports.

22
00:01:29,400 --> 00:01:32,450
And we'll just export stripe down.

23
00:01:32,460 --> 00:01:37,500
Once we have exported the stripe back in the app Jass, we're going to import it.

24
00:01:37,920 --> 00:01:44,580
So I guess I'm going to do that above the controllers where I'm going to go with CONSED and let's call

25
00:01:44,580 --> 00:01:45,630
it Stripe.

26
00:01:46,660 --> 00:01:51,460
Controller controller that is equal to require.

27
00:01:52,530 --> 00:01:59,580
Then we go to levels up or one level up in the controllers and we look for striped controller and where

28
00:01:59,580 --> 00:02:04,680
I have the post, I'll go with comma and I'll pass in the striped controller.

29
00:02:05,250 --> 00:02:05,670
Now what?

30
00:02:05,670 --> 00:02:13,720
You'll notice the moment we run everything that if we cancel that body, we'll get a bunch of cool values.

31
00:02:14,190 --> 00:02:19,890
So for starters, let's just go with a log and then Barack dogsbody online.

32
00:02:19,890 --> 00:02:25,320
You want to go back to the front end, so localhost three thousand and just refresh.

33
00:02:25,680 --> 00:02:33,810
And what you'll notice in the console is a object with a purchase as well as total amount and shipping

34
00:02:33,810 --> 00:02:33,970
fee.

35
00:02:34,320 --> 00:02:36,240
So let me go to one more time.

36
00:02:36,600 --> 00:02:37,830
What's happening.

37
00:02:38,070 --> 00:02:39,270
I have indexed them.

38
00:02:39,280 --> 00:02:47,820
I like I said, so this is where we have the form where we'll send the payment to the stripe, correct

39
00:02:47,820 --> 00:02:50,140
from the front and we'll send the payment to the stripe.

40
00:02:50,640 --> 00:02:58,170
But before we can do anything, once this page loads, we want to communicate to our own back end.

41
00:02:58,710 --> 00:03:04,540
And that's why in the browser abcess, we have this code where this is the purchase.

42
00:03:04,740 --> 00:03:06,830
So this is what the client is buying.

43
00:03:07,290 --> 00:03:12,780
And keep in mind that in this case, I hardcoded in the normal application goes something like this

44
00:03:13,110 --> 00:03:14,180
where you have the card.

45
00:03:14,430 --> 00:03:19,920
So this is where you can increase, decrease of the items, remove the items, whatever you want to

46
00:03:19,920 --> 00:03:20,190
do.

47
00:03:20,520 --> 00:03:28,770
So in here, you'll get the list of all the items the user is buying, as well as the subtotal shipping

48
00:03:28,770 --> 00:03:31,020
fees and all that I run.

49
00:03:31,170 --> 00:03:35,060
Once you go to the checkout, then you send this info to the back end.

50
00:03:35,370 --> 00:03:41,430
In this case, just to simplify everything, I hardcoded that normally, of course, this is dynamic

51
00:03:41,670 --> 00:03:45,230
and it's coming from some kind of state and I have the purchase.

52
00:03:45,240 --> 00:03:48,570
So this is going to be the list of items that the user is buying.

53
00:03:49,510 --> 00:03:57,640
As well as total amount and the shipping fee now why these values are so funky is not because I have

54
00:03:57,640 --> 00:03:58,980
some massive dollar amounts.

55
00:03:59,230 --> 00:04:05,310
In fact, when you work with Strib, you need to provide the smallest unit of the currency.

56
00:04:05,680 --> 00:04:09,330
Meaning if I'm doing this in dollars, these are sense.

57
00:04:09,640 --> 00:04:14,880
So when you're looking at this value, this is nineteen dollars and ninety nine cents.

58
00:04:15,160 --> 00:04:18,550
So this is not one thousand nine hundred ninety nine dollars.

59
00:04:18,579 --> 00:04:23,590
Now this is in a sense because that's what the stripe requires then.

60
00:04:24,520 --> 00:04:30,540
We keep scrolling notice, once the page loads, we go fetch one stripe.

61
00:04:30,580 --> 00:04:36,820
The method is post and then we send the purchase, the total amount, as well as the shipping fee.

62
00:04:37,000 --> 00:04:43,840
Therefore, in the console, if in the strap controller, we go with log and rock that body, we get

63
00:04:43,840 --> 00:04:44,560
all of these.

64
00:04:45,160 --> 00:04:47,770
So now in our controller, we need to do two things.

65
00:04:48,310 --> 00:04:55,030
We need to verify that the cost of the item is actually what the front and the saying.

66
00:04:55,270 --> 00:04:57,220
And I'll talk about it in more detail.

67
00:04:57,250 --> 00:05:04,330
Next video and the second thing, we want to communicate with Stripe and get that client secret.

68
00:05:04,570 --> 00:05:05,510
Now, why is that?

69
00:05:05,540 --> 00:05:11,520
Well, because if you take a look at the browser abcess, you'll notice that, yes, there is a fetch

70
00:05:11,860 --> 00:05:16,680
goalpost post method, which is off purchase total amount as well as the shipping fee.

71
00:05:17,170 --> 00:05:22,330
But if you keep checking that, that's basically what they do with the response.

72
00:05:22,750 --> 00:05:30,250
You'll notice over here that somewhere here they go with data and client secret.

73
00:05:30,670 --> 00:05:37,710
So they invoke pay with card and my passion stripe card as well as data clients.

74
00:05:38,080 --> 00:05:44,310
Therefore, we need to communicate with Stripe in the controller and get back that client secret.

75
00:05:44,620 --> 00:05:51,400
If we don't if you take a look at the front end right now and try to pay, you'll notice that it's actually

76
00:05:51,400 --> 00:05:52,080
not possible.

77
00:05:52,450 --> 00:05:55,840
So there is an error and you're right away throws it there.

78
00:05:56,140 --> 00:06:03,070
So if I go with inspect and take a look at the console, now is going to be unexpected token in JSON

79
00:06:03,520 --> 00:06:05,410
that is in our function.

80
00:06:05,750 --> 00:06:11,740
So unless we send back that response, we won't be able to pay with a card.