1
00:00:00,240 --> 00:00:05,240
And once we have installed react strapped elements next we're going to set up our checkout page.

2
00:00:05,640 --> 00:00:11,280
And in this video I'm going to do all the code first and then we're going to kind of talk it over of

3
00:00:11,280 --> 00:00:15,870
what is actually happening because I think it's just gonna be a bit more straightforward.

4
00:00:15,900 --> 00:00:21,960
We're gonna head on up to our imports first we're gonna get everything that we would need from react

5
00:00:21,970 --> 00:00:27,830
strip elements so we're gonna go with import and then the elements we're looking for our card element.

6
00:00:28,000 --> 00:00:32,630
Then we would also want a stripe provider.

7
00:00:32,760 --> 00:00:35,430
Then also we would want elements.

8
00:00:35,440 --> 00:00:40,380
And lastly also want a inject stripe that is coming from.

9
00:00:40,560 --> 00:00:47,370
React strike elements then make sure that you have the props available because it's just gonna be very

10
00:00:47,370 --> 00:00:50,100
useful once we start working with handle submit.

11
00:00:50,220 --> 00:00:55,440
If you didn't in the previous videos make sure you have the props and then we're gonna get her off the

12
00:00:55,500 --> 00:00:56,590
export default.

13
00:00:57,000 --> 00:01:01,320
So we're going to remove export default and you're gonna see in a second why.

14
00:01:01,350 --> 00:01:02,280
So I'm gonna remove it.

15
00:01:02,280 --> 00:01:08,510
I'm not gonna say it because then I'm just gonna get a big fat error and we're gonna scroll down and

16
00:01:08,520 --> 00:01:13,890
we're going to set up a new component so we're gonna scroll down and it's gonna be a component by the

17
00:01:13,890 --> 00:01:15,390
name of card form.

18
00:01:15,480 --> 00:01:16,800
The naming is really up to you.

19
00:01:16,980 --> 00:01:22,440
And I'm just gonna call my card form then we're gonna use inject stripe.

20
00:01:22,440 --> 00:01:28,170
So one of the things that we imported and we're gonna pass in our current form now our current form

21
00:01:28,170 --> 00:01:31,280
is where it is within the checkout component.

22
00:01:31,410 --> 00:01:38,000
So we need to pass a no check on and then we need to set up one more component that is just gonna turn

23
00:01:38,330 --> 00:01:40,110
all the stripe functionality.

24
00:01:40,110 --> 00:01:42,750
So we're gonna call this again how we would want.

25
00:01:42,750 --> 00:01:49,830
I'm gonna go with stripe and I'm gonna call this a wrapper then since it is a component essentially

26
00:01:49,830 --> 00:01:56,460
it's just gonna return a bunch of stuff and we're gonna start by returning a stripe provider strip provider

27
00:01:56,880 --> 00:02:04,170
then within the stripe provider we need to have the elements elements component and then within the

28
00:02:04,170 --> 00:02:08,450
elements component we are grabbing the component that we just created.

29
00:02:08,440 --> 00:02:17,640
So however you named it I named my one card form like so that we make sure that I type it out correctly.

30
00:02:17,850 --> 00:02:20,550
And then as 40 stripe provider.

31
00:02:20,550 --> 00:02:25,710
And like I said the moment I save it I'm gonna get an error because I'm not exporting anything from

32
00:02:25,710 --> 00:02:34,260
my component but then where we have the stripe provider component we have the API key prop and we're

33
00:02:34,260 --> 00:02:39,250
gonna head over to our stripe dashboard and we're looking for publishable key.

34
00:02:39,360 --> 00:02:46,920
So just click to copy and then stripe provider API key prop and we're passing in as a string.

35
00:02:46,920 --> 00:02:51,750
So let's just posturing and then also we need to make sure that we export it.

36
00:02:51,900 --> 00:02:59,010
And I'm gonna export as defaults so export and default and then we're using of course our stripe wrapper

37
00:02:59,340 --> 00:03:05,880
not the checkout one because again we use inject stripe to create a card form and now we're returning

38
00:03:06,150 --> 00:03:09,560
the card form from our stripe wrapper.

39
00:03:09,630 --> 00:03:17,250
Let's save it and then we're gonna head over and in our J sex in the checkout we're going to add a stripe

40
00:03:17,250 --> 00:03:22,800
element and the component we're looking for is the card element because currently our application didn't

41
00:03:22,800 --> 00:03:27,200
break but we're also not showing our input our card input.

42
00:03:27,240 --> 00:03:35,100
So where we have these stripe elements right after the comment we're gonna have the card element component

43
00:03:35,490 --> 00:03:42,300
and then I'm just gonna add some success or class name card element and we're just gonna close out our

44
00:03:42,300 --> 00:03:46,940
component so let's close it out and we're gonna have our form again.

45
00:03:47,070 --> 00:03:51,810
It's just gonna take a bit let's say I don't know half a second not something because please keep in

46
00:03:51,810 --> 00:03:54,600
mind that all this is happening dynamically.

47
00:03:54,600 --> 00:03:59,730
Essentially we're getting this input where we can start adding the card information again.

48
00:03:59,760 --> 00:04:01,320
Let's go over the basics.

49
00:04:01,680 --> 00:04:08,830
So essentially we imported our components then once we imported the components we have inject stripe.

50
00:04:08,970 --> 00:04:13,230
That is a higher order component which by the way is not unique to strike.

51
00:04:13,320 --> 00:04:19,740
We have seen this pattern before by the way we worked with context similar way in the react Beach Resort

52
00:04:19,740 --> 00:04:20,370
project.

53
00:04:20,640 --> 00:04:26,300
And then what happens is we pass in whatever component we have which in our case is the checkout.

54
00:04:26,310 --> 00:04:31,890
So essentially where are we going to have this form then we set it equal to some kind of variable since

55
00:04:31,890 --> 00:04:37,320
we're getting back our component and then we set up one more component and then within that component

56
00:04:37,620 --> 00:04:44,220
we have stripe provider with an API key then we have the elements component and then within the elements

57
00:04:44,250 --> 00:04:48,200
whatever component we create in our case that was the card form.

58
00:04:48,240 --> 00:04:56,340
So once we have this setup then within our actual component that has the form we need to use the card

59
00:04:56,430 --> 00:05:02,720
element that is the component that we're looking for and that adds the functionality and again like

60
00:05:02,740 --> 00:05:07,770
I already previously mentioned we need to have the props because when we're gonna be submitting the

61
00:05:07,770 --> 00:05:12,890
form when we're gonna be trying to get our token we're gonna access the props.

62
00:05:12,970 --> 00:05:15,150
And that's the reason why we pass in the props.

63
00:05:15,150 --> 00:05:20,280
And remember initially how I said that it's not going to make sense because we have the component and

64
00:05:20,280 --> 00:05:22,820
you're wondering well where are we getting the props from.

65
00:05:22,830 --> 00:05:29,850
Well now you see we set up of course her wrappers and then from the strap components we are getting

66
00:05:29,850 --> 00:05:34,620
our props and we're going to use our props to get the token and complete the transaction.