WEBVTT

1
00:00:00.160 --> 00:00:01.860
Hello everyone and welcome back.

2
00:00:01.890 --> 00:00:03.620
Today we are actually going to be

3
00:00:03.650 --> 00:00:07.220
installing Stripe on our
donation application.

4
00:00:07.250 --> 00:00:11.220
For this, we're going to need
to follow Stripe's documentation.

5
00:00:11.250 --> 00:00:18.060
So let's make sure to open up Google
and go to Stripe, react native SDK and go

6
00:00:18.080 --> 00:00:22.140
to their GitHub and follow
their documentation.

7
00:00:22.170 --> 00:00:25.140
So installing Stripe is pretty simple.

8
00:00:25.170 --> 00:00:28.660
This is the command
that we're going to need.

9
00:00:28.690 --> 00:00:32.340
So I'm just going to quickly open
up a new terminal window here.

10
00:00:32.370 --> 00:00:34.740
I'm going to go to my desktop and navigate

11
00:00:34.770 --> 00:00:39.060
to the donation apps root
and I'm going to run this.

12
00:00:39.090 --> 00:00:41.780
The installation process
has been completed.

13
00:00:41.800 --> 00:00:42.300
Great.

14
00:00:42.330 --> 00:00:45.820
We're not using Expo so we can
completely skip this part.

15
00:00:45.850 --> 00:00:49.060
And for Android we have to use certain API

16
00:00:49.090 --> 00:00:53.900
level and compile SDK version must be 33,
which I already have.

17
00:00:53.930 --> 00:00:58.260
And now we need to add some
kind of setup for our Android.

18
00:00:58.290 --> 00:01:01.540
So let's make sure to do
that and follow the documentation.

19
00:01:01.570 --> 00:01:04.720
I'm going to make this window smaller.

20
00:01:06.240 --> 00:01:06.740
Great.

21
00:01:06.770 --> 00:01:10.290
And now we need to go to app,
build gradle file.

22
00:01:10.320 --> 00:01:12.540
So let's go to Android then app,

23
00:01:12.570 --> 00:01:17.180
then build gradle file and make sure
that we have the implementation for this.

24
00:01:17.210 --> 00:01:19.660
Implementation code is towards the end.

25
00:01:19.690 --> 00:01:22.260
So go to the end of your file and you're

26
00:01:22.290 --> 00:01:25.900
going to see a bunch of examples
of how to write implementation.

27
00:01:25.930 --> 00:01:30.000
So let's make sure to copy
this and paste it here.

28
00:01:30.160 --> 00:01:35.320
I'm going to indent it and the I'm going
to write it in the same style as it's

29
00:01:35.350 --> 00:01:39.700
written here and here, as you see,
we got to enter some version number

30
00:01:39.730 --> 00:01:45.380
and lucky for you, I know that it
should be 1.5.0. So let's save this.

31
00:01:45.410 --> 00:01:49.570
And then we got to set appropriate
styles in our styles XML file.

32
00:01:49.600 --> 00:01:52.740
And styles XML file is located inside

33
00:01:52.770 --> 00:01:58.700
Android source main res
folder, then values.

34
00:01:58.730 --> 00:02:03.020
And then we're going
to open up our styles XML.

35
00:02:03.050 --> 00:02:05.980
And here we're going to have
to change up some things.

36
00:02:06.000 --> 00:02:09.380
First of all, we're going to have
to make sure that we are using material.

37
00:02:09.410 --> 00:02:12.540
So we're not going to need
this part anymore.

38
00:02:12.570 --> 00:02:15.820
And all we're going to say is material

39
00:02:15.850 --> 00:02:23.500
component here and then we got
to put in day and night here.

40
00:02:23.530 --> 00:02:29.610
So it would be theme material
components daynight, no action bar.

41
00:02:29.640 --> 00:02:37.020
Then inside here we already have a little
code that we can just leave in as it is.

42
00:02:37.050 --> 00:02:40.260
So now we're all done with Android setup.

43
00:02:40.290 --> 00:02:44.460
And for iOS setup, they tell us
that we need to install our pods.

44
00:02:44.480 --> 00:02:45.900
So let's make sure to do that.

45
00:02:45.930 --> 00:02:52.540
Let's navigate to iOS folder
and do Pod install repo update.

46
00:02:52.570 --> 00:02:56.940
But this might give you some
errors the first time you try it.

47
00:02:56.970 --> 00:03:02.660
So just make sure to go to your iOS
folder, delete Pod file lock before then.

48
00:03:02.690 --> 00:03:05.820
This is just going to be
regenerated once you run this.

49
00:03:05.850 --> 00:03:11.060
So let's do pod install repo update
and it should go smoothly for you.

50
00:03:11.080 --> 00:03:14.780
Great.
All of my pods have been installed.

51
00:03:14.810 --> 00:03:20.980
And now all I need to do is make
sure that I reset my cache.

52
00:03:21.010 --> 00:03:22.255
So let's do

53
00:03:22.455 --> 00:03:27.120
npm start -- --reset-cache

54
00:03:27.240 --> 00:03:29.140
okay, I have Metro bundler running,

55
00:03:29.170 --> 00:03:34.020
so I got to turn that off because
my port is already in use.

56
00:03:34.050 --> 00:03:35.820
So let's do this again.

57
00:03:35.850 --> 00:03:37.100
Great.

58
00:03:37.130 --> 00:03:42.660
And now let's press I,
and this should open my simulator.

59
00:03:42.680 --> 00:03:43.100
Great.

60
00:03:43.130 --> 00:03:48.940
We shouldn't need this anymore, so I'm
going to move my editor right here.

61
00:03:48.960 --> 00:03:49.500
Great.

62
00:03:49.530 --> 00:03:52.580
Now that this is complete
and my application is rendered,

63
00:03:52.610 --> 00:03:58.100
let's just go to our payment page and make
sure that our Stripe installation worked.

64
00:03:58.130 --> 00:04:03.100
And for this, we're going to navigate
to the payment JS file in our donation

65
00:04:03.130 --> 00:04:11.420
application, and we are going to import
stripe provider from Stripe.

66
00:04:11.450 --> 00:04:13.980
This is just a wrapper component

67
00:04:14.010 --> 00:04:18.260
that we're going to use
to use stripe components.

68
00:04:18.280 --> 00:04:20.260
So let's just use stripe provider.

69
00:04:20.280 --> 00:04:23.700
And this will ask you
for your Publishable key.

70
00:04:23.720 --> 00:04:27.340
Now let's talk about where you
can find your Publishable key.

71
00:04:27.360 --> 00:04:31.940
Your Publishable Key can be found
inside your dashboard.

72
00:04:31.970 --> 00:04:36.420
Make sure that you enable test mode,
and then just click on APIs,

73
00:04:36.440 --> 00:04:38.820
and you're going to see your
Publishable key right there.

74
00:04:38.840 --> 00:04:42.140
It's going to be a string
that you have to put in here.

75
00:04:42.160 --> 00:04:46.740
So your Publishable key
will be placed here.

76
00:04:46.770 --> 00:04:53.940
But since this is a sensitive information,
I already created an importable constant

77
00:04:53.970 --> 00:04:58.260
for me to use this without using
what my Publishable key is.

78
00:04:58.280 --> 00:05:01.340
So I'm quickly going to be importing this.

79
00:05:01.360 --> 00:05:03.940
I'm going to navigate here as well,

80
00:05:03.970 --> 00:05:09.460
and we're getting no error,
so our installation seems to be working.

81
00:05:09.480 --> 00:05:13.620
But to verify that,
let's create a card form

82
00:05:13.650 --> 00:05:18.620
that is a component of stripe,
which was imported right here.

83
00:05:18.640 --> 00:05:20.980
So make sure that this is
imported for you as well.

84
00:05:21.000 --> 00:05:21.920
I'm going to save it.

85
00:05:21.950 --> 00:05:26.300
And here we're going to see a weird
thing pop up because it has no styling.

86
00:05:26.330 --> 00:05:30.820
So let's give it some styling and make
sure it has enough height to render so we

87
00:05:30.850 --> 00:05:34.220
can just create a new style
and call it card form.

88
00:05:34.250 --> 00:05:38.140
Go here, create a card form
and give it some height.

89
00:05:38.170 --> 00:05:40.680
Let's say it's going
to be vertical scale 150.

90
00:05:40.710 --> 00:05:42.680
And here we go.

91
00:05:42.710 --> 00:05:45.700
We see our card form rendered here.

92
00:05:45.720 --> 00:05:47.660
Let's make sure that it has some margin

93
00:05:47.690 --> 00:05:52.580
top, which is going to be
vertical scale twelve, let's say.

94
00:05:52.600 --> 00:05:56.580
And on ios, everything
seems to be working fine.

95
00:05:56.600 --> 00:06:02.380
We're not going to hook it up with our
APIs yet, but what I do want to do,

96
00:06:02.410 --> 00:06:06.460
since this is a new nothing,
is that I want to make sure that this

97
00:06:06.480 --> 00:06:09.780
implementation is working for you
on Android as well,

98
00:06:09.800 --> 00:06:13.260
just in case we're getting any errors
and you need some guidance on that.

99
00:06:13.290 --> 00:06:18.600
So I'm going to run this
on Android as well.

100
00:06:19.480 --> 00:06:21.380
You should do so as well.
Okay.

101
00:06:21.410 --> 00:06:22.900
My code is building.

102
00:06:22.920 --> 00:06:26.020
My donation app is opening.
Great.

103
00:06:26.040 --> 00:06:27.420
I'm already logged in,

104
00:06:27.450 --> 00:06:33.060
so I'm just going to click on this item,
for example, where I'm donating $13.

105
00:06:33.090 --> 00:06:36.620
I'm going to click on donate
and here we go.

106
00:06:36.650 --> 00:06:39.440
I see my card number here and all

107
00:06:39.470 --> 00:06:42.220
of the same form,
except for it has a little bit

108
00:06:42.250 --> 00:06:45.540
of different styling for Android,
which is completely fine.

109
00:06:45.570 --> 00:06:50.700
So it seems to be working
fine on Android as well.

110
00:06:50.730 --> 00:06:54.380
Let's just make sure that zip
code is not hidden here.

111
00:06:54.410 --> 00:06:59.020
Do we need to give it a little
bit more height, such as 200?

112
00:06:59.040 --> 00:07:01.860
Yep.
Zip code was hidden because of the height.

113
00:07:01.880 --> 00:07:03.220
So let's make sure that we have

114
00:07:03.250 --> 00:07:08.380
an appropriate height set so all of our
fields are visible to the users.

115
00:07:08.410 --> 00:07:10.580
That's all for today.

116
00:07:10.600 --> 00:07:17.060
We have created stripe integration,
and we haven't hooked it up with our APIs

117
00:07:17.090 --> 00:07:22.820
yet or created any functions that would
actually let us donate any kind of money.

118
00:07:22.850 --> 00:07:25.180
But we're going to do
this in the next lesson.

119
00:07:25.200 --> 00:07:27.680
Thanks so much for watching,
and see you in the next video.