1
00:00:02,090 --> 00:00:04,710
So we are getting closer to finishing this.

2
00:00:04,710 --> 00:00:09,260
Now we want to populate line items with correct data.

3
00:00:09,260 --> 00:00:10,870
And for this, of course, we want to use

4
00:00:10,870 --> 00:00:15,020
the data from our cart. Now this of course means

5
00:00:15,020 --> 00:00:19,210
that we need that cart data, and thankfully we do have it

6
00:00:19,210 --> 00:00:22,840
stored here in this cart constant. We created this at the

7
00:00:22,840 --> 00:00:25,470
beginning of add order and it comes directly

8
00:00:25,470 --> 00:00:29,480
from res locals. So this is our cart, which we then also

9
00:00:29,480 --> 00:00:32,800
use for storing the data in our own database.

10
00:00:32,800 --> 00:00:36,210
And I cleared the session cart here. But the constant,

11
00:00:36,210 --> 00:00:39,840
where I stored the cart before, still exists as long as

12
00:00:39,840 --> 00:00:42,360
this function execution hasn't finished.

13
00:00:42,360 --> 00:00:45,490
And therefore we can use this cart constant down there

14
00:00:45,490 --> 00:00:47,980
to populate the line items.

15
00:00:47,980 --> 00:00:52,160
Now for that, let's understand that here we need an array,

16
00:00:52,160 --> 00:00:54,503
an array of objects that look like this.

17
00:00:55,720 --> 00:00:59,560
Now cart actually has an items property,

18
00:00:59,560 --> 00:01:02,870
which contains an array. But the cart items have the

19
00:01:02,870 --> 00:01:06,100
wrong format. Now, what we can do here is we can set

20
00:01:06,100 --> 00:01:11,100
line items equal to cart.items.map as we did it before

21
00:01:12,270 --> 00:01:15,480
in this course, because you learnt that map is a function

22
00:01:15,480 --> 00:01:19,210
you can execute on an array. It's a built in function,

23
00:01:19,210 --> 00:01:23,610
part of the JavaScript API, so to say. That allows you to

24
00:01:23,610 --> 00:01:27,790
transform all the items in an array to new items.

25
00:01:27,790 --> 00:01:30,540
And this allows us to transform the cart items

26
00:01:30,540 --> 00:01:32,593
to items that have this structure.

27
00:01:33,930 --> 00:01:36,280
For this we pass a function tube map,

28
00:01:36,280 --> 00:01:39,120
a function that will be executed for us.

29
00:01:39,120 --> 00:01:41,980
A function that gets to concrete item automatically

30
00:01:41,980 --> 00:01:43,970
as a parameter value.

31
00:01:43,970 --> 00:01:47,950
And then for every function execution, for every item and

32
00:01:47,950 --> 00:01:51,893
cart items, we return such an object here.

33
00:01:53,070 --> 00:01:55,270
And we can now remove these square brackets.

34
00:01:57,140 --> 00:01:59,960
And now we just have to populate the data here correctly.

35
00:01:59,960 --> 00:02:02,880
For example, name and product data should now be

36
00:02:02,880 --> 00:02:07,880
item.product.title. So the item we get here,

37
00:02:08,220 --> 00:02:11,550
an item from cart.items, they are the product data and then

38
00:02:11,550 --> 00:02:15,360
the title. Now for the price we need the price of a single

39
00:02:15,360 --> 00:02:18,630
product, because we specified a quantity separately.

40
00:02:18,630 --> 00:02:23,630
And therefore here I'll send item.product.price

41
00:02:23,660 --> 00:02:26,620
And I'll add a plus in front of it to be super safe,

42
00:02:26,620 --> 00:02:30,370
that we're really sending a number. And for quantity

43
00:02:30,370 --> 00:02:33,030
I'll send item.quantity

44
00:02:34,240 --> 00:02:37,080
That is how we store the quantity for a single item in

45
00:02:37,080 --> 00:02:40,380
our cart. And we do this for all the cart items.

46
00:02:40,380 --> 00:02:43,310
And therefore we send all the cart item data to

47
00:02:43,310 --> 00:02:46,210
Stripe here to create this session.

48
00:02:46,210 --> 00:02:49,560
We then redirect to Stripes pages, where this session

49
00:02:49,560 --> 00:02:52,100
will be waiting for our customers so to say,

50
00:02:52,100 --> 00:02:54,140
this session we created here.

51
00:02:54,140 --> 00:02:56,850
Then the customer will be able to make the payment,

52
00:02:56,850 --> 00:02:59,720
and then we'll be redirected back here.

53
00:02:59,720 --> 00:03:01,473
That is the idea.

54
00:03:02,350 --> 00:03:06,120
Now with that, lets see whether this works.

55
00:03:06,120 --> 00:03:11,120
If we start our server again, and I'm back in the Shop.

56
00:03:12,740 --> 00:03:14,960
I'm going to add this keyboard and then

57
00:03:14,960 --> 00:03:16,803
twice the Magic Trackpad.

58
00:03:17,650 --> 00:03:20,593
And then I'm going to log in with my user here.

59
00:03:24,660 --> 00:03:25,493
Like this.

60
00:03:26,940 --> 00:03:31,940
And now here if I click Buy Products, this fails.

61
00:03:32,290 --> 00:03:34,780
And it actually crashes because Stripe

62
00:03:34,780 --> 00:03:39,670
is complaining about my URL. It's not a valid URL.

63
00:03:39,670 --> 00:03:41,310
And if we dig through the error message,

64
00:03:41,310 --> 00:03:45,430
we find out that Stripe is talking about the success URL.

65
00:03:45,430 --> 00:03:49,620
So it doesn't like my success and cancel URLs in the end.

66
00:03:49,620 --> 00:03:52,660
And actually what it's complaining about here is that this

67
00:03:52,660 --> 00:03:56,567
should start with http://

68
00:03:56,567 --> 00:04:01,567
http:// and then Stripe considers this

69
00:04:01,700 --> 00:04:06,150
to be a valid URL. So with this change made,

70
00:04:06,150 --> 00:04:09,340
if I go back and I click Buy Product again,

71
00:04:09,340 --> 00:04:13,210
it crashes again. But I'm showing this on purpose

72
00:04:13,210 --> 00:04:17,399
because these are all errors you can absolutely run into,

73
00:04:17,399 --> 00:04:19,713
and you should know how to debug and fix them.

74
00:04:20,630 --> 00:04:24,390
Now we see, that again, thankfully Stripe gives us a helpful

75
00:04:24,390 --> 00:04:28,250
error message. And it tells us that Checkout, the service

76
00:04:28,250 --> 00:04:31,360
we are offering here. This service offered by Stripe

77
00:04:31,360 --> 00:04:34,280
does not currently support usd prices with more than

78
00:04:34,280 --> 00:04:35,593
2 decimal places.

79
00:04:36,760 --> 00:04:40,080
Now this is an expected crash here, because I mentioned

80
00:04:40,080 --> 00:04:44,220
earlier that we had a problem with the unit_amount_decimal.

81
00:04:44,220 --> 00:04:47,570
If we have a look at the error sent by Stripe,

82
00:04:47,570 --> 00:04:50,780
thankfully it contains a very helpful error message.

83
00:04:50,780 --> 00:04:52,700
We see that currently Checkout,

84
00:04:52,700 --> 00:04:56,150
this service provided by Stripe, does not support

85
00:04:56,150 --> 00:04:59,920
usd prices with more than 2 decimal places.

86
00:04:59,920 --> 00:05:03,543
And we passed in 59.99 here.

87
00:05:04,520 --> 00:05:07,551
Now this has only two decimal places, right?

88
00:05:07,551 --> 00:05:11,008
Yeah. But Stripe converts it to this. Because actually what

89
00:05:11,008 --> 00:05:15,804
unit_amount_decimal does is it takes the price you pass in

90
00:05:15,804 --> 00:05:20,804
and translates this into a pure decimal price,

91
00:05:21,100 --> 00:05:25,860
smaller than $1. So this is the unit you could use if you

92
00:05:25,860 --> 00:05:29,180
have super small prices, which you want to charge,

93
00:05:29,180 --> 00:05:30,763
which are smaller than $1.

94
00:05:32,650 --> 00:05:36,510
What we actually need here is unit_amount like this.

95
00:05:36,510 --> 00:05:40,100
Which however does not want a decimal number,

96
00:05:40,100 --> 00:05:43,150
but instead an integer number, where the price is

97
00:05:43,150 --> 00:05:45,260
expressed in cents.

98
00:05:45,260 --> 00:05:47,223
That's simply how Stripe works.

99
00:05:48,060 --> 00:05:51,280
Of course we can easily convert our price to cents though,

100
00:05:51,280 --> 00:05:53,663
by multiplying it with 100.

101
00:05:55,070 --> 00:05:57,760
We can also call toFixed(2) first

102
00:05:57,760 --> 00:06:01,270
to ensure that we only have two decimal places at most.

103
00:06:01,270 --> 00:06:04,030
Then we convert this to a number, thanks to the plus.

104
00:06:04,030 --> 00:06:06,610
And then we multiply this with 100

105
00:06:06,610 --> 00:06:09,230
to get the price as an integer number,

106
00:06:09,230 --> 00:06:10,890
so the price in cents.

107
00:06:10,890 --> 00:06:14,070
And that is what we send with unit_amount then.

108
00:06:14,070 --> 00:06:15,670
And that is what Stripe needs here

109
00:06:15,670 --> 00:06:17,813
to process the price correctly.

110
00:06:19,286 --> 00:06:21,260
With that if you go back and click

111
00:06:21,260 --> 00:06:23,820
Buy Products again, now this works.

112
00:06:23,820 --> 00:06:27,423
And now we are redirected to a page provided by Stripe.

113
00:06:28,360 --> 00:06:31,650
If you check the URL, we are now on Stripe's website,

114
00:06:31,650 --> 00:06:33,653
not on our own website anymore.

115
00:06:34,758 --> 00:06:37,550
Now here we have to enter our credit card data.

116
00:06:37,550 --> 00:06:41,120
And this interface and the validation of all the data,

117
00:06:41,120 --> 00:06:43,380
that's now all provided by Stripe,

118
00:06:43,380 --> 00:06:45,423
which is of course pretty convenient.

119
00:06:47,070 --> 00:06:51,190
Here we also see the details about our products.

120
00:06:51,190 --> 00:06:53,410
And now here we can enter some dummy data,

121
00:06:53,410 --> 00:06:55,890
since we are in test mode.

122
00:06:55,890 --> 00:06:59,070
In real mode you would have to enter real data, of course.

123
00:06:59,070 --> 00:07:01,470
But for testing, we can enter testing data,

124
00:07:01,470 --> 00:07:03,773
and no real transaction will be made.

125
00:07:04,790 --> 00:07:07,330
Now for this, we can check out the official docs.

126
00:07:07,330 --> 00:07:10,190
There if we scroll down, we find some testing data

127
00:07:10,190 --> 00:07:13,240
that we can use,

128
00:07:13,240 --> 00:07:15,880
and I'll use this default credit card number here

129
00:07:15,880 --> 00:07:17,860
for a successful charge.

130
00:07:17,860 --> 00:07:20,120
Again, this is just testing data.

131
00:07:20,120 --> 00:07:22,860
But I'll use this credit card number here.

132
00:07:22,860 --> 00:07:25,780
Enter some email address here. This doesn't matter.

133
00:07:25,780 --> 00:07:27,343
No email will be sent.

134
00:07:28,300 --> 00:07:33,300
Enter any expiration date in the future, and any CVC code,

135
00:07:34,240 --> 00:07:38,280
any name, any country, and then click pay.

136
00:07:38,280 --> 00:07:40,710
And now Stripe will process this data,

137
00:07:40,710 --> 00:07:43,000
this testing data here. And you'll see,

138
00:07:43,000 --> 00:07:45,693
we are redirected back to our success page.

139
00:07:47,040 --> 00:07:51,020
Now as the owner of this Shop, who also owns this

140
00:07:51,020 --> 00:07:54,870
Stripe account, which is connected to our code here.

141
00:07:54,870 --> 00:07:57,670
As this owner, we can now go to our dashboard,

142
00:07:57,670 --> 00:08:01,030
our Stripe dashboard. And under Payments,

143
00:08:01,030 --> 00:08:04,110
if we have a look at that, we should see that payment

144
00:08:04,110 --> 00:08:06,273
that was made a couple of seconds ago here.

145
00:08:07,710 --> 00:08:10,000
I got a couple of older payments here as well,

146
00:08:10,000 --> 00:08:11,670
which don't matter to us here.

147
00:08:11,670 --> 00:08:15,030
These are from other projects. But here is the charge

148
00:08:15,030 --> 00:08:18,890
I just made. This charge here at the very top.

149
00:08:18,890 --> 00:08:21,450
And this is how we can integrate Stripe

150
00:08:21,450 --> 00:08:24,610
to handle payments into our website.

151
00:08:24,610 --> 00:08:27,440
And with that, we now have a real online shop.

152
00:08:27,440 --> 00:08:30,410
Because we now don't just allow users to add

153
00:08:30,410 --> 00:08:32,850
items to a cart, but we then actually

154
00:08:32,850 --> 00:08:35,403
also allow them to make a purchase.

155
00:08:36,669 --> 00:08:40,580
Of course, one thing I would like to fix about the Shop now,

156
00:08:40,580 --> 00:08:44,580
is I want to only show this Buy Products button

157
00:08:44,580 --> 00:08:47,200
if we have items in the cart.

158
00:08:47,200 --> 00:08:49,730
This is not related to payments specifically.

159
00:08:49,730 --> 00:08:52,140
It would have been a good fix before as well.

160
00:08:52,140 --> 00:08:54,360
But, I will add it now at least.

161
00:08:54,360 --> 00:08:58,830
And for this in my Cart views, in cart ejs,

162
00:08:58,830 --> 00:09:00,790
where I do show this form.

163
00:09:00,790 --> 00:09:03,630
I of course want to make sure that I don't just check if

164
00:09:03,630 --> 00:09:06,880
the user is authenticated. But in addition,

165
00:09:06,880 --> 00:09:11,880
I also check if locals.cart.totalQuantity > 0.

166
00:09:15,120 --> 00:09:18,070
If there is nothing in the cart, I don't want to show this.

167
00:09:19,170 --> 00:09:21,860
Now, if I reload, I don't see the button.

168
00:09:21,860 --> 00:09:24,500
Now I just want to tweak the error message a little bit,

169
00:09:24,500 --> 00:09:26,570
because I am logged in.

170
00:09:26,570 --> 00:09:31,570
I will say Log in and add items to the cart to proceed.

171
00:09:34,950 --> 00:09:38,593
So let's save this and reload, and now this looks better.