1
00:00:00,270 --> 00:00:06,450
Once we have obtained our API keys we are ready to integrate stripe into our app to accomplish let's

2
00:00:06,450 --> 00:00:12,780
strap uses something called stripe elements where we have a script that provides a start object and

3
00:00:12,780 --> 00:00:15,810
using the methods that are available on that object.

4
00:00:15,870 --> 00:00:19,520
We set up our card input since we are using react.

5
00:00:19,560 --> 00:00:24,930
We can use a package called react striped elements that essentially provides these straight elements

6
00:00:25,020 --> 00:00:27,300
via React Components.

7
00:00:27,300 --> 00:00:33,720
So again we have access to API keys awesome van and we're going to look for stripe elements and you

8
00:00:33,720 --> 00:00:38,820
can technically search docs but I can tell you honestly that is much faster if you just head over to

9
00:00:38,820 --> 00:00:44,690
your search engine typing stripe elements and then look for the link that has the docs right.

10
00:00:44,700 --> 00:00:50,760
So this is just gonna be a nice representation but look for the link that has the docs click on a link

11
00:00:51,090 --> 00:00:52,790
and then you're going to navigate there.

12
00:00:52,980 --> 00:00:59,660
We have right away few options and they right away provide the email CSX as well as javascript.

13
00:00:59,670 --> 00:01:04,500
Keep in mind that this is one little javascript but you could still use it as a side note let's say

14
00:01:04,500 --> 00:01:10,190
in a salt course since swell doesn't have the wrapper doesn't have any kind of library that is there

15
00:01:10,190 --> 00:01:13,920
for you essentially doesn't provide the swell components.

16
00:01:13,920 --> 00:01:17,010
That's when we use nice vanilla javascript.

17
00:01:17,010 --> 00:01:22,950
So again you could technically just use one analogy yes but it's just gonna be a bit faster if we use

18
00:01:22,950 --> 00:01:25,830
the react type elements and you can check out the code.

19
00:01:26,040 --> 00:01:31,510
So this would be the email and India email what we're looking for is this script tag.

20
00:01:31,680 --> 00:01:35,850
So we're looking for a script tag just because we need access to a stripe.

21
00:01:35,850 --> 00:01:39,610
Then we have some CSI us we can just omit and by the way we will.

22
00:01:39,720 --> 00:01:43,860
We're not going to use the services they provide as well as then we have these javascript.

23
00:01:43,860 --> 00:01:49,830
Like I said you initiate the stripe because you have access to a stripe object and then you start using

24
00:01:49,830 --> 00:01:52,310
the methods that are available.

25
00:01:52,470 --> 00:01:59,250
Now what we're gonna do is we're going to install a package by the name of React strap elements.

26
00:01:59,400 --> 00:02:01,680
Again you can just head over and search.

27
00:02:01,800 --> 00:02:04,740
But keep in mind that everything is already installed.

28
00:02:04,800 --> 00:02:10,290
I'm just showing you where you can find the command type react strap elements then look for the package

29
00:02:11,400 --> 00:02:16,500
and then keep on scrolling down and the install is as straightforward as it gets.

30
00:02:16,500 --> 00:02:21,570
We just have npm install and then there's dash save react stripe elements.

31
00:02:21,690 --> 00:02:25,980
So I'm gonna head over back to my front end and I'm gonna set up two things.

32
00:02:25,980 --> 00:02:31,740
This script as well as install the package which again by the way if you're using the order then of

33
00:02:31,740 --> 00:02:33,280
course it is already installed.

34
00:02:33,540 --> 00:02:40,080
So I'm gonna head over then I'm gonna stop my server like so I'm going to clear everything and I'm gonna

35
00:02:40,080 --> 00:02:43,120
install right away the react right elements.

36
00:02:43,140 --> 00:02:45,510
So let me copy and paste the command.

37
00:02:45,510 --> 00:02:51,240
And then while I mean selling the package I'm also gonna have to order back the stripe elements and

38
00:02:51,240 --> 00:02:52,650
I'm gonna get my age the email.

39
00:02:52,710 --> 00:02:57,600
You could have technically again just get the script tag from here but I'm just gonna head over back

40
00:02:57,600 --> 00:03:03,000
to strapped elements just to show you how it's going to look like and we're gonna grab our script we're

41
00:03:03,000 --> 00:03:07,710
gonna grab the script then we're not gonna copy and paste it here.

42
00:03:07,710 --> 00:03:12,990
We're gonna open up the sidebar we're looking for the public and then within the public we're looking

43
00:03:12,990 --> 00:03:18,160
for the index and then I'm gonna scroll up a bit and then let's say right before the title I'm going

44
00:03:18,160 --> 00:03:22,890
gonna copy and paste my stripe Save everything and I'm going to start up the server.

45
00:03:23,010 --> 00:03:30,870
So I'm going to type in NPM start and in the next video we're gonna start setting up our ReACT stripe

46
00:03:30,930 --> 00:03:31,470
elements.