WEBVTT

1
00:00:00.160 --> 00:00:01.580
Hi and welcome back.

2
00:00:01.610 --> 00:00:03.380
In this video we're going to be

3
00:00:03.410 --> 00:00:06.420
integrating Stripe
into our react native app.

4
00:00:06.450 --> 00:00:08.660
But in this lesson particularly,

5
00:00:08.690 --> 00:00:14.220
we'll be focusing on server side
integration using Express JS and node JS.

6
00:00:14.250 --> 00:00:16.340
If you skipped over the last section

7
00:00:16.370 --> 00:00:21.820
and you don't know how to use Node or
express, please go back to the section above

8
00:00:21.850 --> 00:00:26.300
and make sure that you are familiar
with using these technologies.

9
00:00:26.330 --> 00:00:28.740
Otherwise, let's continue on.

10
00:00:28.760 --> 00:00:31.140
Now I'll walk you through the process

11
00:00:31.170 --> 00:00:36.380
of integrating our server
side code with Stripe.

12
00:00:36.410 --> 00:00:40.140
For this I have a specific folder created

13
00:00:40.170 --> 00:00:45.500
called Servers and I just created
an empty folder called Stripe Payment.

14
00:00:45.530 --> 00:00:50.700
I have no files here and we're going
to create the server side code together.

15
00:00:50.730 --> 00:00:55.880
So I'll just open this up in my editor.

16
00:00:56.040 --> 00:00:57.100
Here we go.

17
00:00:57.130 --> 00:00:59.460
There are no files created here as you

18
00:00:59.490 --> 00:01:03.420
see, and we're going to do
an initial setup first.

19
00:01:03.450 --> 00:01:10.340
So let's open our terminal and make
sure that we are in the same directory.

20
00:01:10.370 --> 00:01:12.540
So open up your terminal whether it's

21
00:01:12.570 --> 00:01:19.020
inside your editor or whether it's just
a terminal that comes with your device.

22
00:01:19.050 --> 00:01:22.700
And then let's make sure that we
have several things installed.

23
00:01:22.730 --> 00:01:28.760
So first and foremost we're going
to need to install Express.

24
00:01:31.600 --> 00:01:36.600
Then we're going to have
to install body parser.

25
00:01:39.240 --> 00:01:42.180
Whoops, I spelt it wrong.

26
00:01:42.210 --> 00:01:45.660
It's like this.
Okay, great.

27
00:01:45.690 --> 00:01:50.460
Those are installed and you should be
able to see package JSON appear here.

28
00:01:50.490 --> 00:01:54.060
Now we're going to need some Babel code as

29
00:01:54.090 --> 00:01:59.660
well here just to make sure that we can
transpile our ES6 code correctly.

30
00:01:59.690 --> 00:02:02.420
So those are going to be

31
00:02:02.620 --> 00:02:18.820
npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env @babel/runtime.

32
00:02:18.850 --> 00:02:20.380
So let's install these.

33
00:02:20.410 --> 00:02:21.540
Okay, great.

34
00:02:21.570 --> 00:02:24.680
Now let's also install Nodemon so that we

35
00:02:24.710 --> 00:02:29.170
can update our server
without having to stop it.

36
00:02:29.200 --> 00:02:33.480
So now if you go to your package JSON
file, you're going to see all

37
00:02:33.510 --> 00:02:37.860
of the installations here and package
lock should have been generated for you.

38
00:02:37.890 --> 00:02:40.610
And all of our Node modules are also set.

39
00:02:40.640 --> 00:02:42.500
Great, so now we're all set with our

40
00:02:42.530 --> 00:02:47.660
initial setup and we can continue
on with our integration.

41
00:02:47.690 --> 00:02:52.880
Well, let's create index JS file here
and inside here we're going to have

42
00:02:52.910 --> 00:02:57.980
to start importing the body parser
and then we're going to have to import

43
00:02:58.010 --> 00:03:03.380
Express from express and then we're
going to have to import Stripe.

44
00:03:03.400 --> 00:03:06.180
But for this we're going to have
to install Stripe first.

45
00:03:06.210 --> 00:03:11.540
So let's do NPM install Stripe as well
inside our terminal and wait for it.

46
00:03:11.560 --> 00:03:13.220
Great, it's been installed so we can

47
00:03:13.250 --> 00:03:20.660
import Stripe from Stripe and we
shouldn't need these braces here.

48
00:03:20.690 --> 00:03:26.220
And then we're going to have to get
the publishable key and secret key.

49
00:03:26.250 --> 00:03:30.180
So let's set up empty variables for those

50
00:03:30.210 --> 00:03:34.360
so far and I'm going to show
you where to find them.

51
00:03:37.400 --> 00:03:41.240
stripe secret key.

52
00:03:41.880 --> 00:03:43.220
So let's save this.

53
00:03:43.250 --> 00:03:48.980
And now I'm going to show you where
to find those so let's go to stripe.com

54
00:03:49.010 --> 00:03:52.060
I'm going to go to my dashboard.

55
00:03:52.090 --> 00:03:54.700
I'm going to open the test mode and click

56
00:03:54.730 --> 00:04:02.220
on Developers
and then you can click on the API keys.

57
00:04:02.250 --> 00:04:05.100
And here next to Publishable Key

58
00:04:05.130 --> 00:04:09.260
and Secret Key you should
be able to see your keys.

59
00:04:09.290 --> 00:04:15.580
Just make sure that viewing test data is
on for you and that you save your secret

60
00:04:15.610 --> 00:04:20.100
key somewhere because it
can only be revealed once.

61
00:04:20.130 --> 00:04:26.820
So once you have those, please just copy
paste them and put them inside here.

62
00:04:26.840 --> 00:04:31.140
I'm not going to put mine here because
this is a personal information.

63
00:04:31.160 --> 00:04:33.860
So I'm just going to put it later on.

64
00:04:33.890 --> 00:04:38.540
Once we're going to be testing our setup
and you're not going to be able to see it,

65
00:04:38.570 --> 00:04:42.140
but just copy and paste
your credentials here.

66
00:04:42.160 --> 00:04:42.540
Great.

67
00:04:42.570 --> 00:04:47.980
So then we're going to have to define
an application that is going to use express

68
00:04:48.010 --> 00:04:54.660
and then let's say that we want to use
request response and the next function

69
00:04:54.690 --> 00:04:59.180
here and the we're going
to use body parser.

70
00:04:59.210 --> 00:05:05.940
And make sure that all of our
requests are parsed as JSON.

71
00:05:05.970 --> 00:05:07.780
And then we're going to make sure

72
00:05:07.800 --> 00:05:14.540
that next function is appropriately
called with all of these parameters.

73
00:05:14.570 --> 00:05:16.420
So this is just going to make sure

74
00:05:16.450 --> 00:05:23.460
that all of our data is already parsed and
passed as JSON to the other functions.

75
00:05:23.480 --> 00:05:25.380
This just allows us to easily access

76
00:05:25.410 --> 00:05:29.700
the data sent by the client
in our route handlers.

77
00:05:29.720 --> 00:05:30.260
Great.

78
00:05:30.290 --> 00:05:36.500
So after that we are going to have
to create a Payment Intent endpoint

79
00:05:36.530 --> 00:05:41.180
and this is going to be an endpoint
that accepts information.

80
00:05:41.210 --> 00:05:45.300
And since we're not going to be altering
any kind of information and we're just

81
00:05:45.330 --> 00:05:49.940
going to be getting the information, we're
going to have to use a post request.

82
00:05:49.970 --> 00:05:54.860
So let's just set up a post request
and call this

83
00:05:54.890 --> 00:06:02.580
Create Payment Intent Endpoint and it's
going to be an asynchronous call that is

84
00:06:02.600 --> 00:06:10.100
going to accept a request and response
and we're going to write some code here.

85
00:06:10.130 --> 00:06:15.980
A Payment intent represents a payment
that the customer intends to make.

86
00:06:16.010 --> 00:06:20.500
It is needed for Stripe to handle
the payment process securely,

87
00:06:20.530 --> 00:06:25.580
including authentication,
confirmation and capturing the funds.

88
00:06:25.600 --> 00:06:27.980
By creating a Payment intent,

89
00:06:28.010 --> 00:06:34.340
we initiate the payment process and ensure
that the payment is processed securely.

90
00:06:34.360 --> 00:06:40.100
So inside this route we'll
accept several things.

91
00:06:40.130 --> 00:06:42.900
We're going to need an email of the user.

92
00:06:42.920 --> 00:06:44.340
We're going to need the currency

93
00:06:44.360 --> 00:06:51.700
that they're using for the payment
and we're also going to need the amount.

94
00:06:51.730 --> 00:06:53.060
So we're going to get this

95
00:06:53.090 --> 00:06:58.320
from Request Body using the destructuring
and once we have those we're just going

96
00:06:58.350 --> 00:07:07.060
to use Stripe and say that we're using
Stripe here using the Stripe Secret key.

97
00:07:07.090 --> 00:07:15.540
And then we're going to say that API
version that we're using is 2020-08-27.

98
00:07:15.570 --> 00:07:21.660
So after that we'll create a new String
customer using the provided email.

99
00:07:21.690 --> 00:07:26.300
So let's create Constant customer here

100
00:07:26.330 --> 00:07:31.500
and then await on the response
from Stripe customers.

101
00:07:31.530 --> 00:07:34.380
Create email.

102
00:07:34.410 --> 00:07:36.100
Once we're done with this,

103
00:07:36.130 --> 00:07:42.900
we're going to have to set up some kind
of parameters for our payment intent.

104
00:07:42.920 --> 00:07:46.580
The parameters that we're going to need

105
00:07:46.600 --> 00:07:55.420
is first of all going to be the amount
which is sent in already.

106
00:07:55.450 --> 00:08:01.080
Let's just make sure that it is going
to be an integer

107
00:08:02.680 --> 00:08:07.040
so we can just do it like this
and then we're going to have to give it

108
00:08:07.070 --> 00:08:10.960
the currency
and then we're going to have to give it

109
00:08:10.980 --> 00:08:17.180
the customer id and we can get it
from the customer that we generated here.

110
00:08:17.210 --> 00:08:23.940
And then we're going to have to pass
in payment method options and the payment

111
00:08:23.970 --> 00:08:29.420
method option that we are going
to pass is going to be a card.

112
00:08:29.450 --> 00:08:38.820
So let's create a card here and
we're going to need a request 3D Secure

113
00:08:38.850 --> 00:08:42.980
and we're going to set
it to Automatic here.

114
00:08:43.010 --> 00:08:46.220
And let's explain what
this does in this case.

115
00:08:46.250 --> 00:08:49.020
We're setting the request 3D Secure option

116
00:08:49.050 --> 00:08:54.700
to Automatic which means that Stripe will
handle 3D Secure authentication

117
00:08:54.730 --> 00:08:58.860
automatically if it's
required by the card issuer.

118
00:08:58.890 --> 00:09:02.700
So payment method types define the types

119
00:09:02.730 --> 00:09:07.220
of payment methods that can be
used with this payment intent.

120
00:09:07.250 --> 00:09:12.400
So we're going to have
to define this here as well.

121
00:09:14.240 --> 00:09:17.620
And we're just going
to pass in an empty array.

122
00:09:17.650 --> 00:09:20.820
Whoops this should be types my bad.

123
00:09:20.850 --> 00:09:24.620
And we're going to define
an empty array in our case.

124
00:09:24.650 --> 00:09:27.140
And since it's going to be empty,

125
00:09:27.170 --> 00:09:33.140
it's going to default to an array
of cards inside the Stripe.

126
00:09:33.160 --> 00:09:34.500
But we can just leave it empty.

127
00:09:34.530 --> 00:09:38.380
We don't have to be so specific because
Stripe will handle this for us.

128
00:09:38.410 --> 00:09:43.060
And then we're going to have to use a Try
catch block to create the payment intent

129
00:09:43.080 --> 00:09:49.140
and send the client secret to the client
or send an error if it fails.

130
00:09:49.170 --> 00:09:53.180
So let's do this and I'll
explain what it does on the way.

131
00:09:53.200 --> 00:09:56.620
So this is the try catch

132
00:09:56.650 --> 00:10:02.860
and we're going to get an error here
and if we get any errors, we want to

133
00:10:02.890 --> 00:10:12.540
return a response from the server that is
going to indicate what this error is.

134
00:10:12.560 --> 00:10:17.260
So we're going to get the message
from Stripe like this.

135
00:10:17.290 --> 00:10:19.260
And if we don't have an error,

136
00:10:19.290 --> 00:10:23.660
then we have to get the payment
intent information from Stripe.

137
00:10:23.690 --> 00:10:25.540
So let's say wait

138
00:10:25.560 --> 00:10:33.940
on that and make sure that we call payment
intents and that we create this intent

139
00:10:33.970 --> 00:10:38.780
using the params that we created here so
that we pass it to the Stripe server.

140
00:10:38.810 --> 00:10:40.660
And then once we get this back,

141
00:10:40.690 --> 00:10:48.220
all we want to do is make sure that we
return a response from our server

142
00:10:48.250 --> 00:10:55.980
that includes the client secret that this
payment intent generated for us.

143
00:10:56.010 --> 00:11:00.420
Okay, now let's talk about
what client secret is.

144
00:11:00.450 --> 00:11:06.380
The client secret is a unique Identifier
for the payment intent that is used

145
00:11:06.410 --> 00:11:11.060
by the client side code to securely
confirm and complete the payment.

146
00:11:11.080 --> 00:11:16.060
We're going to be using this on the react
native side on our mobile application

147
00:11:16.080 --> 00:11:19.580
to make sure that we can
complete the payment.

148
00:11:19.610 --> 00:11:21.780
And it should be kept secret and only

149
00:11:21.810 --> 00:11:25.300
shared with the client
as part of the payment.

150
00:11:25.330 --> 00:11:28.340
So we have written all of the code that we

151
00:11:28.370 --> 00:11:32.100
need and all we need to do is make
sure that we listen to some port.

152
00:11:32.130 --> 00:11:38.260
So let's make it 42 42 port and then once
we start listening,

153
00:11:38.290 --> 00:11:47.300
we can console log that node
server is listening on port 42 42.

154
00:11:47.330 --> 00:11:48.460
Great.

155
00:11:48.490 --> 00:11:59.000
So now that we have all of these, we can
start our nodemon for the index JS file.

156
00:11:59.720 --> 00:12:04.980
Okay, we are having some issues
with the import because I totally forgot

157
00:12:05.010 --> 00:12:10.140
to mention that we need
a Babel RC file for this.

158
00:12:10.170 --> 00:12:15.140
So let's create the Babel RC file.

159
00:12:15.170 --> 00:12:20.660
Let's create new file, call it babelrc.

160
00:12:20.690 --> 00:12:28.660
Let's open up the JSON and say that our
presets is going to be an array that just

161
00:12:28.690 --> 00:12:38.200
says use Babel preset environment and then
we're also going to need the plugins.

162
00:12:38.400 --> 00:12:40.620
This is also going to be an array that is

163
00:12:40.650 --> 00:12:46.760
going to use Babel plugin
transform runtime.

164
00:12:47.080 --> 00:12:49.700
Great, let's save this.

165
00:12:49.730 --> 00:12:55.980
Let's do npm install one more time
and the let's do node one index JS

166
00:12:56.010 --> 00:13:01.460
and let's make sure that our
package JSON has type module set.

167
00:13:01.480 --> 00:13:05.820
Okay?
And 40 to 42 port is already in use.

168
00:13:05.850 --> 00:13:10.920
So I'm just going to use port 3000

169
00:13:13.400 --> 00:13:16.180
and make sure that this
outputs it as well.

170
00:13:16.210 --> 00:13:16.940
Okay, great.

171
00:13:16.970 --> 00:13:22.780
So now we have all of this information
and I'm going to pause for a bit and I'm

172
00:13:22.810 --> 00:13:28.560
going to enter my Stripe Publishable key
and string secret key inside here and then

173
00:13:28.580 --> 00:13:33.860
we're going to go on with
Postman to test our setup.

174
00:13:33.890 --> 00:13:40.100
Please make sure that before you test this
with Postman, you also have grabbed your

175
00:13:40.130 --> 00:13:44.260
publishable key and Stripe
secret key as mentioned before.

176
00:13:44.290 --> 00:13:47.720
Great, so now let's go to postman.

177
00:13:49.240 --> 00:13:51.780
Let's make sure that we
grab the URL correctly.

178
00:13:51.810 --> 00:13:59.800
It should be our http localhost 3000

179
00:14:00.200 --> 00:14:02.740
and the endpoint should be

180
00:14:02.770 --> 00:14:08.740
Create Payment Intent and it's
going to be a post request.

181
00:14:08.770 --> 00:14:13.100
We're going to send in raw data
that's going to be in JSON format.

182
00:14:13.130 --> 00:14:21.100
And let's say that email is going to be
Nata at Vache me

183
00:14:21.130 --> 00:14:25.700
and that currency is going to be usd

184
00:14:25.730 --> 00:14:33.340
and that amount is going to be $50.

185
00:14:33.370 --> 00:14:41.420
Now for $50, you're going to see me type
in 5000 here because Stripe actually grabs

186
00:14:41.450 --> 00:14:46.060
the last two digits and makes
it converted into cents.

187
00:14:46.080 --> 00:14:52.820
So Stripe will actually read this as $50
even though we send the amount in as 5000.

188
00:14:52.850 --> 00:15:01.100
Great, so now if I click on send,
I'm getting back the client secret key.

189
00:15:01.130 --> 00:15:04.180
And once we have the client secret key,

190
00:15:04.210 --> 00:15:06.940
this means that everything
happened successfully.

191
00:15:06.970 --> 00:15:11.500
And now we have to initiate a second kind

192
00:15:11.530 --> 00:15:16.820
of API call that would usually be
handled by the react native side.

193
00:15:16.840 --> 00:15:18.780
So we're going to use this client secret

194
00:15:18.810 --> 00:15:26.460
key to complete the payment and we're
going to see that right now at 06:57 P.m.

195
00:15:26.490 --> 00:15:29.460
Which was like 1 minute ago.

196
00:15:29.490 --> 00:15:36.460
nata@vache email created a payment
intent and it is still pending.

197
00:15:36.490 --> 00:15:37.580
It's incomplete.

198
00:15:37.610 --> 00:15:40.340
It's going to be in incomplete state

199
00:15:40.370 --> 00:15:44.940
until we use React native client
to complete this payment.

200
00:15:44.970 --> 00:15:51.340
But you do see here that with our test
we have created an incomplete payment.

201
00:15:51.370 --> 00:15:56.000
So if I were to send in one more,

202
00:15:56.640 --> 00:16:02.020
we are supposed to get
another client secret key.

203
00:16:02.050 --> 00:16:12.020
And if I were to refresh this page,
we should see now $51 appear here at 06:58

204
00:16:12.050 --> 00:16:18.980
P.m. With the same email address
just with the different secret key.

205
00:16:19.010 --> 00:16:21.820
So that's all for today's lesson.

206
00:16:21.850 --> 00:16:27.940
We have just created a server side
integration with Stripe and provided more

207
00:16:27.970 --> 00:16:33.000
details on how the JSON body parser
middleware works, the purpose of creating

208
00:16:33.030 --> 00:16:36.020
a payment intent,
the role of payment method,

209
00:16:36.050 --> 00:16:39.780
options and types,
and the importance of the client secret.

210
00:16:39.810 --> 00:16:43.160
Next, we'll write code inside our React

211
00:16:43.190 --> 00:16:47.820
native project to make sure
that our payments can go through.

212
00:16:47.850 --> 00:16:54.940
And you're going to see how Stripe UI
looks are entering card information

213
00:16:54.970 --> 00:17:00.540
details and how we can test if
everything is working as expected.

214
00:17:00.570 --> 00:17:02.420
So I'll see you in the next video.

215
00:17:02.450 --> 00:17:05.140
Hope this video was exciting for you.

216
00:17:05.170 --> 00:17:12.010
We're about to finish up our payment
integration for the donation application.

217
00:17:12.040 --> 00:17:14.640
Thanks so much for watching.
See you in the next video.