1
00:00:01,260 --> 00:00:05,960
I just watched my timer count down to zero, eventually hit zero, and then updated automatically over

2
00:00:05,960 --> 00:00:06,980
to order expired.

3
00:00:07,460 --> 00:00:10,010
So I'd say that the timer is working out pretty well.

4
00:00:10,880 --> 00:00:16,130
Now, the last thing to do on this order show page is make sure that we have a page button whenever

5
00:00:16,130 --> 00:00:17,000
user clicks on pay.

6
00:00:17,090 --> 00:00:21,500
We need to show this little pop up right here where the user will enter in their credit card expiration

7
00:00:21,500 --> 00:00:21,800
number.

8
00:00:21,830 --> 00:00:22,460
All that stuff.

9
00:00:23,240 --> 00:00:26,330
Remember that you and I are not going to be responsible for this form.

10
00:00:26,720 --> 00:00:28,970
Instead, we're going to make use of a library from Stripe.

11
00:00:29,270 --> 00:00:31,130
That's going to show this form automatically.

12
00:00:31,460 --> 00:00:34,070
It's going to handle the credit card expiration date data.

13
00:00:34,160 --> 00:00:34,820
All that stuff.

14
00:00:35,360 --> 00:00:38,690
Once the user submits all that, it's going to give back to us a token.

15
00:00:39,350 --> 00:00:43,640
You might remember discussing that token along with Stripe when we were putting together our payment

16
00:00:43,640 --> 00:00:44,150
service.

17
00:00:44,690 --> 00:00:49,490
So after a user submits this thing, we're going to get back a token on the react side of our application

18
00:00:49,970 --> 00:00:52,670
and we will make a post request off to our payment service.

19
00:00:52,970 --> 00:00:56,600
And a payment service will then be responsible for billing the user's credit card.

20
00:00:58,860 --> 00:01:00,070
Now, to actually show this model.

21
00:01:00,120 --> 00:01:02,600
We're going to install a library off of NPM.

22
00:01:02,880 --> 00:01:05,190
So let's go take a look at the documentation for that right away.

23
00:01:06,430 --> 00:01:10,260
At NPM Jasco AM, I'm going to do a search for React Stripe.

24
00:01:10,580 --> 00:01:11,080
Check out.

25
00:01:13,760 --> 00:01:14,690
Here's the first result.

26
00:01:15,790 --> 00:01:18,690
And so if you want to, you could definitely take a look at the documentation here.

27
00:01:19,200 --> 00:01:21,360
It is pretty easy and straightforward to use.

28
00:01:21,960 --> 00:01:25,820
All you really have to do is import this library as stright.

29
00:01:25,840 --> 00:01:26,370
Check out.

30
00:01:27,670 --> 00:01:32,470
We're then going to show it as though it were a react component at a very minimum, we have to provide

31
00:01:32,500 --> 00:01:37,660
a callback function to the token prop that is going to be invoked anytime a user submits their payment

32
00:01:37,660 --> 00:01:38,350
information.

33
00:01:38,620 --> 00:01:40,840
And this thing gets a token back from the stripe API.

34
00:01:41,740 --> 00:01:44,020
So we are going to provide this callback right here.

35
00:01:44,080 --> 00:01:45,310
That's going to receive that token.

36
00:01:45,340 --> 00:01:48,280
And that's where you and I are going to make our post request to our payment service.

37
00:01:49,210 --> 00:01:51,220
The other required property is these striped key.

38
00:01:51,790 --> 00:01:56,440
That is the published publishable key, which we can get from our striped dashboard.

39
00:01:57,190 --> 00:02:02,020
So if you go back to your stripe dashboard ad dashboard, that striped dot com, you can find developers

40
00:02:02,020 --> 00:02:04,240
on the left API keys.

41
00:02:04,570 --> 00:02:06,870
And that is the publishable key right there that we want.

42
00:02:09,870 --> 00:02:11,460
Those are the two required properties.

43
00:02:11,490 --> 00:02:14,520
But there are several other properties that we probably want as well.

44
00:02:16,350 --> 00:02:19,230
So you can see a big list of all the other properties we can pass in.

45
00:02:20,130 --> 00:02:24,210
The other one that you and I are probably going to want to provide is a mount that's gonna make sure

46
00:02:24,210 --> 00:02:28,500
that we get the user's credit card authorization for a very specific amount of money.

47
00:02:29,540 --> 00:02:32,240
We might also want to pass in the e-mail of the user as well.

48
00:02:32,780 --> 00:02:37,100
If we pass in the email, that's just gonna make sure that the form kind of repopulates the users email

49
00:02:37,370 --> 00:02:40,400
as opposed to require them to enter in their email again separately.

50
00:02:41,450 --> 00:02:41,630
All right.

51
00:02:41,660 --> 00:02:42,470
So those in mind.

52
00:02:42,590 --> 00:02:46,520
Let's go over to our terminal, we're going to install reac striped checkout and then make use of it

53
00:02:46,550 --> 00:02:48,200
inside of our order show component's.

54
00:02:49,470 --> 00:02:50,230
So back to my terminal.

55
00:02:50,700 --> 00:02:52,440
I'll change into our client directory.

56
00:02:53,410 --> 00:02:55,940
And then do an NPR install for React Gripe.

57
00:02:56,210 --> 00:02:56,620
Check out.

58
00:02:59,880 --> 00:03:01,150
Get going to let it do its thing.

59
00:03:01,600 --> 00:03:05,950
We'll come back together in the next video and make use that inside of our order show component.