1
00:00:01,470 --> 00:00:06,360
I've now installed the rack stripe checkout module, so inside of order show at the very top, I'm going

2
00:00:06,360 --> 00:00:10,080
to import stripe checkout from react.

3
00:00:10,440 --> 00:00:11,410
Right, checkout.

4
00:00:13,520 --> 00:00:18,050
Then right now, I'm always going to show an instance of this thing down at the very bottom where we

5
00:00:18,050 --> 00:00:19,310
have our timer for right now.

6
00:00:20,610 --> 00:00:21,510
Don't say that, David.

7
00:00:23,130 --> 00:00:24,300
Right after all that text.

8
00:00:25,320 --> 00:00:29,530
I'm going to put in react or see me just straight checkout Erico.

9
00:00:30,960 --> 00:00:36,390
And then I'm going to make sure they pass this thing to required properties of the two required properties

10
00:00:37,260 --> 00:00:39,630
are Tolkan, which must be a callback function.

11
00:00:40,350 --> 00:00:44,550
Right now, I'm going to receive the token that we get back from this little component.

12
00:00:44,900 --> 00:00:46,230
And I'll just console's the token.

13
00:00:48,340 --> 00:00:51,280
The second thing we have to provide is our stripe publishable key.

14
00:00:51,460 --> 00:00:52,780
It's going to put in stripe key.

15
00:00:53,980 --> 00:00:56,110
I'm then going to go back over to my striped dashboard.

16
00:00:59,640 --> 00:01:04,590
Here's the publisher Wicky going to copy that and throw it in directly right there.

17
00:01:05,520 --> 00:01:10,050
Now as the name implies, publishable key means that we can safely share this with the outside world.

18
00:01:10,470 --> 00:01:14,070
So there's no security risk if someone gets their hands on this publishable key.

19
00:01:14,640 --> 00:01:19,080
Having said that, it's not always really great practice to have a hardcoded key directly inside of

20
00:01:19,080 --> 00:01:19,560
your code.

21
00:01:20,010 --> 00:01:25,500
So it'd be a little bit better if we instead extracted this thing into a separate helper file or something

22
00:01:25,500 --> 00:01:26,010
like that.

23
00:01:26,250 --> 00:01:30,360
Even as an environment variable or even a Cuban, that is secret at this point.

24
00:01:30,360 --> 00:01:34,110
I'm going to leave that up to you because we've gone to the process of creating secrets and Biman variables,

25
00:01:34,140 --> 00:01:35,760
all that stuff quite a bit throughout this course.

26
00:01:36,300 --> 00:01:40,110
Do keep in mind, though, that this will be an environment variable that's going to be used with next.

27
00:01:40,470 --> 00:01:44,520
You might want to take a look at these striped I mean, the next day has documentation and just take

28
00:01:44,520 --> 00:01:46,320
a look at how they handle environment variables.

29
00:01:46,770 --> 00:01:50,010
For me, I feel totally fine just during the key directly in here right now.

30
00:01:51,970 --> 00:01:56,380
After that, we're then going to specify the amount that we want to pay, so the amount is going to

31
00:01:56,380 --> 00:01:59,650
be on the order that we received as a prop.

32
00:02:01,300 --> 00:02:05,440
And if we forget what we will actually once reference on there, we can always go take a look at that

33
00:02:05,440 --> 00:02:06,670
order inside of our request log.

34
00:02:09,440 --> 00:02:11,750
So here it just refreshed.

35
00:02:11,780 --> 00:02:14,780
I lost my request, log on to create another order.

36
00:02:16,270 --> 00:02:17,860
There's the request for the order right there.

37
00:02:18,840 --> 00:02:23,460
So on the order that we get back or the ordered that we have as a prop, we have the ticket property

38
00:02:23,520 --> 00:02:25,080
and inside there is the price.

39
00:02:25,920 --> 00:02:26,760
So we want to take.

40
00:02:28,020 --> 00:02:33,720
Order, dot ticket, dot price, and then remember everything around stripe treats, amounts or prices,

41
00:02:33,720 --> 00:02:37,920
costs, however you want to refer to it as sense as opposed to U.S. dollars.

42
00:02:38,430 --> 00:02:41,600
So we're going to take our price and multiply it by one hundred.

43
00:02:45,200 --> 00:02:48,140
Finally, I'm going to add on a final processing of email.

44
00:02:49,250 --> 00:02:51,660
So how are we going to get the user's email inside of here?

45
00:02:52,170 --> 00:02:54,450
Well, let's remove that e-mail proper just a second.

46
00:02:54,480 --> 00:02:55,560
We will add it back in.

47
00:02:55,830 --> 00:02:58,990
But first, I want to understand how we can get the user's email inside this component.

48
00:02:59,550 --> 00:03:05,370
You might recall that a little bit ago inside of our app component, which is rendering our child components

49
00:03:05,370 --> 00:03:05,910
in this case.

50
00:03:05,940 --> 00:03:07,110
That includes order show.

51
00:03:08,720 --> 00:03:13,310
Inside of our app components, we get access to the current user and we pass that into our child component

52
00:03:13,340 --> 00:03:15,140
as a prop called current user.

53
00:03:15,800 --> 00:03:21,800
So technically, our order show components, the one that we are working on right now, receives a prop

54
00:03:21,860 --> 00:03:23,450
of current user.

55
00:03:24,520 --> 00:03:28,870
So we're going to want to take that current user prop, and you might recall that inside there is the

56
00:03:28,870 --> 00:03:30,070
user's email address.

57
00:03:30,550 --> 00:03:31,870
So we should be able to add in.

58
00:03:34,640 --> 00:03:38,690
E-mail as current user dot, email like some.

59
00:03:40,510 --> 00:03:43,020
OK, so that is all we should need to get started with Stripe.

60
00:03:43,080 --> 00:03:43,950
So let's save this.

61
00:03:45,280 --> 00:03:48,700
I can flip back over, as usual, my order has already expired.

62
00:03:49,110 --> 00:03:49,780
So let me go back.

63
00:03:49,840 --> 00:03:50,980
Create a new order.

64
00:03:53,000 --> 00:03:53,790
And now we get this.

65
00:03:53,810 --> 00:03:58,520
Pay with card button so I can click on that and that will show my little pop up window.

66
00:03:59,000 --> 00:04:01,470
Notice how the e mail is already displayed right there at the top.

67
00:04:01,490 --> 00:04:03,440
So the user does not have to enter that separately.

68
00:04:04,190 --> 00:04:07,490
Now, all we have do is put in twenty dollars and we are good to go.

69
00:04:08,330 --> 00:04:08,900
Well, don't worry.

70
00:04:08,930 --> 00:04:11,240
You do not have to put in a real credit card number here.

71
00:04:11,330 --> 00:04:15,650
It turns out that very similar to those test tokens that always work, always succeed.

72
00:04:15,920 --> 00:04:18,380
There's something very similar for credit card numbers as well.

73
00:04:18,920 --> 00:04:22,070
So let's take a pause right here and then test out this little window in just a moment.