WEBVTT

1
00:00:00.080 --> 00:00:01.620
Hi and welcome back.

2
00:00:01.650 --> 00:00:04.340
Today we're going to be working on Stripe

3
00:00:04.370 --> 00:00:08.820
payment integration with our mobile
application and we're going to make sure

4
00:00:08.850 --> 00:00:14.220
that we can use the API endpoints
that we created in the previous lessons.

5
00:00:14.250 --> 00:00:20.300
So the only change I made after our lesson
is that I put Stripe publishable key

6
00:00:20.330 --> 00:00:26.020
and Stripe secret key inside the constants
JS file so that I don't share

7
00:00:26.050 --> 00:00:32.220
my information regarding Stripe
with everyone who's taking this course.

8
00:00:32.250 --> 00:00:37.260
You can do so as well and place your
keys inside the constant JS file.

9
00:00:37.290 --> 00:00:41.380
You can find your keys inside
your dashboard for Stripe.

10
00:00:41.410 --> 00:00:45.380
Just navigate to your dashboard,
click on API keys and you're going to see

11
00:00:45.410 --> 00:00:47.940
your publishable key
and secret key right there.

12
00:00:47.970 --> 00:00:52.860
Just make sure that you are seeing
the keys for the development mode.

13
00:00:52.880 --> 00:00:53.380
Great.

14
00:00:53.410 --> 00:00:58.900
So in order to connect to our server,
we need to be running the server

15
00:00:58.930 --> 00:01:04.240
and to run the server we need to be inside
the root of our server project and we just

16
00:01:04.270 --> 00:01:08.020
need to make sure that we
write nodemon index.JS.

17
00:01:08.050 --> 00:01:12.210
This should run our server on port 3000.

18
00:01:12.240 --> 00:01:17.020
To check that everything is going well,
we can just open up our postman,

19
00:01:17.050 --> 00:01:22.700
we can send this create payment Intent API
endpoint request,

20
00:01:22.730 --> 00:01:27.720
click on Send and we're going to receive
a client secret key and we're going to see

21
00:01:27.750 --> 00:01:32.570
this console log right here because
we had placed console log here.

22
00:01:32.600 --> 00:01:33.060
Great.

23
00:01:33.090 --> 00:01:39.540
So the question is how do we connect our
API endpoint to our mobile application?

24
00:01:39.570 --> 00:01:41.780
So we can do that right now.

25
00:01:41.810 --> 00:01:45.160
Let's go to our donation application.

26
00:01:45.560 --> 00:01:48.260
I have my metro bundler running

27
00:01:48.290 --> 00:01:51.780
here so if I make any changes they
are going to be visible here.

28
00:01:51.800 --> 00:01:53.780
So we're going to have to set up a couple

29
00:01:53.810 --> 00:01:57.570
of functions to make sure that we
can connect to our API endpoint.

30
00:01:57.600 --> 00:02:00.180
That's going to be very quick and easy.

31
00:02:00.210 --> 00:02:04.490
Let's just navigate to our payment page
and first things first,

32
00:02:04.520 --> 00:02:08.940
we need to disable this donate button
when the form is not filled in.

33
00:02:08.970 --> 00:02:12.730
Because if the form is not filled
in then they can't donation.

34
00:02:12.760 --> 00:02:16.100
Lucky for us, Card form offers a props\

35
00:02:16.130 --> 00:02:21.700
called on form complete
and on form complete we can set a flag

36
00:02:21.730 --> 00:02:26.940
to true that will enable this
donate button to be clicked.

37
00:02:26.970 --> 00:02:35.140
So let's call this flag is ready and let's
create a setter for this as well.

38
00:02:35.170 --> 00:02:37.920
We're going to need to use useState

39
00:02:37.950 --> 00:02:41.020
for this and our initial
state is going to be false.

40
00:02:41.050 --> 00:02:45.140
Let me import useState
from react it's right here.

41
00:02:45.170 --> 00:02:48.140
Let's save this and here on form complete

42
00:02:48.170 --> 00:02:52.610
we're going to say that we
want to set is ready to true.

43
00:02:52.640 --> 00:02:57.900
Now let's use this variable for our button
and say that this is going to be disabled

44
00:02:57.930 --> 00:03:00.700
if is ready is false.

45
00:03:00.730 --> 00:03:03.420
Let's save this and right now our donate

46
00:03:03.450 --> 00:03:09.140
button is not going to be clickable
and is going to be appearing as disabled.

47
00:03:09.170 --> 00:03:10.180
Great.

48
00:03:10.210 --> 00:03:15.380
Stripe offers several cards
that you can use for testing.

49
00:03:15.410 --> 00:03:18.660
And I'm going to show you
what these cards are here.

50
00:03:18.690 --> 00:03:24.610
I'm going to navigate to my dashboard
and I'm going to turn on the test mode.

51
00:03:24.640 --> 00:03:27.700
I'm going to click on developers.

52
00:03:27.730 --> 00:03:30.100
And here we're going to see that there are

53
00:03:30.130 --> 00:03:35.900
several cards given and we can copy these
card numbers for testing

54
00:03:35.930 --> 00:03:41.100
Successful Payments, failed Payments
or Requires Authentication payments.

55
00:03:41.130 --> 00:03:45.480
Now we're not going to be requiring any
kind of authentication so we're just going

56
00:03:45.510 --> 00:03:51.340
to be using Successful Payment and Failed
payment cards to test our implementation.

57
00:03:51.370 --> 00:03:57.900
So I'm just going to copy this number,
go back to my simulator,

58
00:03:57.930 --> 00:04:04.340
paste it here and then I'm just going to
enter some other random information here.

59
00:04:04.370 --> 00:04:06.420
And here you're going to see that Donate

60
00:04:06.450 --> 00:04:10.740
button was enabled because
our form has been completed.

61
00:04:10.770 --> 00:04:16.020
Now, once we click on Donate button,
we are actually not connected to any API

62
00:04:16.040 --> 00:04:19.780
endpoints and we need to make
sure that we do that.

63
00:04:19.800 --> 00:04:21.340
So let's set that up.

64
00:04:21.360 --> 00:04:22.980
First of all, once we're going to click

65
00:04:23.010 --> 00:04:26.300
on Donate button,
we should make sure that this button is

66
00:04:26.330 --> 00:04:31.260
not clickable again, so that we
don't process users payments twice.

67
00:04:31.280 --> 00:04:36.140
For this, we're going to have to make sure
that we have a loading state where we take

68
00:04:36.160 --> 00:04:40.820
care of the button if
the payment is still processing.

69
00:04:40.840 --> 00:04:42.740
Lucky for us, again,

70
00:04:42.770 --> 00:04:51.540
Stripe offers a hook that returns to us
two different variables confirm Payment,

71
00:04:51.570 --> 00:04:55.860
which is going to have information
about how the payment was processed

72
00:04:55.890 --> 00:05:00.660
and the second property is going to be
loading property that is going to be

73
00:05:00.690 --> 00:05:07.860
boolean, either false or true, whether the
payment is still being processed or not.

74
00:05:07.890 --> 00:05:11.100
So let's set those up
with destructuring.

75
00:05:11.130 --> 00:05:13.940
So one is going to be
called Confirm Payment.

76
00:05:13.970 --> 00:05:19.100
Second one is going to be called Loading
and we're going to use Confirm Payment

77
00:05:19.130 --> 00:05:24.140
that is going to be imported
from Stripe react native right here.

78
00:05:24.160 --> 00:05:26.620
So let's save this and let's make sure

79
00:05:26.650 --> 00:05:32.940
that if a payment is processing,
we're going to be disabling this button.

80
00:05:32.970 --> 00:05:35.580
So the form is going to be disabled if

81
00:05:35.600 --> 00:05:42.180
the form is not filled in or
if the form is loading.

82
00:05:42.210 --> 00:05:43.100
Great.

83
00:05:43.130 --> 00:05:47.540
Now let's go back to this
confirmation of the payment.

84
00:05:47.570 --> 00:05:50.260
We're going to use this later in our

85
00:05:50.290 --> 00:05:54.900
functions to make sure that our
confirmation of the payment has been

86
00:05:54.920 --> 00:05:59.940
processed and we show an appropriate
response to the user.

87
00:05:59.970 --> 00:06:03.500
So let's set up a function that handles

88
00:06:03.530 --> 00:06:06.940
the payments that we're
going to be making. For this

89
00:06:06.970 --> 00:06:08.940
we're going to call

90
00:06:08.970 --> 00:06:14.140
a function on Press and it's going
to be called Handle Payment.

91
00:06:14.160 --> 00:06:15.500
So we're going to have to make sure

92
00:06:15.530 --> 00:06:19.860
that we create this function and it's
going to be an Asynchronous function

93
00:06:19.890 --> 00:06:23.260
because we're going to be
making an API call.

94
00:06:23.290 --> 00:06:27.740
So we're going to have to await
on the response of the API call.

95
00:06:27.770 --> 00:06:33.300
Now let's create Handle Payment function
here that is also going to be asynchronous

96
00:06:33.330 --> 00:06:36.420
and is going to take
in no arguments at all.

97
00:06:36.450 --> 00:06:40.920
And then we're going to have to get
the client secret key because that's what

98
00:06:40.950 --> 00:06:44.300
we need to make sure that we
can process the payment.

99
00:06:44.330 --> 00:06:49.460
This is the first step
to make an intent of payment.

100
00:06:49.480 --> 00:06:54.020
And for that we have already made
a function on our server side.

101
00:06:54.040 --> 00:06:58.340
So we just need to make sure
that we can connect to our API.

102
00:06:58.360 --> 00:07:01.660
So let's say that we want
to get the client secret.

103
00:07:01.680 --> 00:07:03.540
And for this we're going to be calling

104
00:07:03.570 --> 00:07:08.180
a function that is going to be
called Fetch Payment Intent

105
00:07:08.210 --> 00:07:11.180
client secret.
Great.

106
00:07:11.210 --> 00:07:13.260
So we need to be making this function

107
00:07:13.290 --> 00:07:17.100
first of all, so let's make
sure that we make it here.

108
00:07:17.130 --> 00:07:23.300
And it's also going to be an asynchronous
function that is going to await on the API

109
00:07:23.330 --> 00:07:26.820
call that we make to our server
that's currently running.

110
00:07:26.850 --> 00:07:31.500
So let's expect some kind
of a response from our server.

111
00:07:31.530 --> 00:07:38.620
Let's make sure that we await on it
and let's fetch the results of this API.

112
00:07:38.650 --> 00:07:43.500
The API URL is going to be http localhost

113
00:07:43.530 --> 00:07:47.220
3000 because that's the port
that I'm running my server on.

114
00:07:47.250 --> 00:07:52.460
And our endpoint was called
create Payment intent.

115
00:07:52.480 --> 00:07:56.380
Now we got to pass some parameters to it.

116
00:07:56.400 --> 00:07:57.900
First of all, we got to let it know

117
00:07:57.920 --> 00:08:04.460
that the method of the API is post because
we're sending in some information.

118
00:08:04.480 --> 00:08:06.900
So we got to make sure that we match up

119
00:08:06.920 --> 00:08:10.420
with the request type that we
set up on our server.

120
00:08:10.450 --> 00:08:15.700
And then we need to make sure that we
send in some parameters using the body.

121
00:08:15.730 --> 00:08:18.900
And these parameters actually
need to be in JSON format.

122
00:08:18.920 --> 00:08:21.860
So let's make sure that we use JSON stringify

123
00:08:21.890 --> 00:08:26.180
method here and let's see what we're
going to be needing for this function.

124
00:08:26.210 --> 00:08:30.260
So we need an email, we need a currency,
and we need an amount.

125
00:08:30.290 --> 00:08:32.500
So let's get started with email

126
00:08:32.530 --> 00:08:36.320
first.
To get the email of the user that we are

127
00:08:36.350 --> 00:08:39.180
logged in with,
we're going to have to make sure that we

128
00:08:39.200 --> 00:08:43.380
use the user object created
in our redux store.

129
00:08:43.410 --> 00:08:47.580
So let's use selector to get information

130
00:08:47.610 --> 00:08:53.140
from our redux store and say that we
need to get the user state.

131
00:08:53.160 --> 00:08:54.780
And then here we're going to send

132
00:08:54.810 --> 00:08:58.420
in an email that is going
to be the user's email.

133
00:08:58.440 --> 00:09:04.020
The I think I'm just going to process
the payments as USD dollars.

134
00:09:04.050 --> 00:09:06.060
And then we need to send in an amount

135
00:09:06.080 --> 00:09:10.820
that's dependent on which item
we're donating with.

136
00:09:10.850 --> 00:09:15.980
So we're just going to use the donation
item information here to get the price.

137
00:09:16.010 --> 00:09:20.620
And we're going to make sure that we
multiply it by 100 because the last two

138
00:09:20.650 --> 00:09:25.500
digits again in USD is going
to be converted to the cent.

139
00:09:25.530 --> 00:09:32.940
So $1.34 should become 134.
Great.

140
00:09:32.970 --> 00:09:35.100
So now that we have this,

141
00:09:35.130 --> 00:09:40.300
let's make sure that we can get some
kind of response from the server.

142
00:09:40.320 --> 00:09:46.860
So first of all, let's get this response
and say that our

143
00:09:46.890 --> 00:09:52.920
client secret is going to be awaiting
on the response from the server and we're

144
00:09:52.940 --> 00:09:59.060
going to convert the response into JSON
and then we can console log this client

145
00:09:59.080 --> 00:10:02.740
secret right here and we
can even return it.

146
00:10:02.770 --> 00:10:08.180
Let's just test it out and see
if this is working correctly.

147
00:10:08.200 --> 00:10:10.700
So let's open our Metro bundler.

148
00:10:10.730 --> 00:10:16.400
Let's write in the test
number that was all 42s.

149
00:10:17.920 --> 00:10:25.660
Let's click on donate
and now we're getting an undefined value

150
00:10:25.690 --> 00:10:30.140
so we get to investigate
and see what's happening here.

151
00:10:30.170 --> 00:10:36.580
First of all, let's make sure that we
are getting our request on our server.

152
00:10:36.610 --> 00:10:44.220
So let's go to our server
and we see that we're getting some invalid

153
00:10:44.250 --> 00:10:51.660
request errors and this might be because
we're sending in an invalid integer.

154
00:10:51.690 --> 00:10:58.300
So our request actually didn't receive any
kind of parameters through the body and we

155
00:10:58.330 --> 00:11:01.620
can see it right here because
we had it console logged here.

156
00:11:01.650 --> 00:11:03.500
So we're doing something incorrectly.

157
00:11:03.530 --> 00:11:05.700
Let's go back to our donation app.

158
00:11:05.730 --> 00:11:07.460
Let's see what we're doing here.

159
00:11:07.490 --> 00:11:08.580
We have the method,

160
00:11:08.610 --> 00:11:14.740
we have the body and what we might be
missing here might be headers to let

161
00:11:14.770 --> 00:11:19.260
the server know that we are
sending this as JSON format.

162
00:11:19.290 --> 00:11:22.460
So let's set the content

163
00:11:22.490 --> 00:11:28.260
type here and make sure
that application is set to JSON.

164
00:11:28.290 --> 00:11:37.460
Let's save this
and then let's call the donation again.

165
00:11:37.490 --> 00:11:43.340
I'm just going to click on this and here
we see that we receive all the parameters

166
00:11:43.370 --> 00:11:48.580
on our server and now let's see if
on Metro bundler we received the client

167
00:11:48.610 --> 00:11:52.580
secret and we did which means
that everything was successful here.

168
00:11:52.610 --> 00:11:53.700
This is great.

169
00:11:53.730 --> 00:11:56.980
So now that we have the client secret key,

170
00:11:57.010 --> 00:12:02.940
we got to make sure that we handle
the payment from the user correctly.

171
00:12:02.970 --> 00:12:05.740
So all we need to do for that is make sure

172
00:12:05.770 --> 00:12:14.020
that we call the confirm payment method
given by the hook that we created here.

173
00:12:14.050 --> 00:12:17.620
So let's create a call that is going

174
00:12:17.650 --> 00:12:25.460
to get back any errors returned
by the stripe or the payment

175
00:12:25.490 --> 00:12:31.700
intent information
and then let's await on confirm payment

176
00:12:31.730 --> 00:12:36.740
and let's send in the client secret
that we received and let's make sure

177
00:12:36.770 --> 00:12:44.820
that we say that our payment
method type is a card. Great,

178
00:12:44.850 --> 00:12:45.980
let's save this.

179
00:12:46.010 --> 00:12:48.660
And here we can say that if we receive

180
00:12:48.690 --> 00:12:53.320
an error then we need to alert the user

181
00:12:55.360 --> 00:12:59.660
that error has occurred

182
00:12:59.690 --> 00:13:05.080
with your payment and then let's provide

183
00:13:05.360 --> 00:13:09.780
the error localized message that we're

184
00:13:09.810 --> 00:13:15.060
going to receive from stripe directly
indicating what kind of error occurred.

185
00:13:15.080 --> 00:13:19.000
And if there are no errors,
then we need to make sure that we send

186
00:13:19.030 --> 00:13:26.920
in an alert to the user letting them know
that their payment was successful

187
00:13:29.240 --> 00:13:32.872
and let's say that the payment

188
00:13:33.072 --> 00:13:36.140
was confirmed successfully.

189
00:13:36.170 --> 00:13:38.960
Let's save this,

190
00:13:39.120 --> 00:13:46.060
make sure that you import alert from react
native and here instead of else we should

191
00:13:46.080 --> 00:13:51.140
actually use payment intent to make
sure that this went in successfully.

192
00:13:51.170 --> 00:13:54.540
So let's use payment intent right here.
Great.

193
00:13:54.570 --> 00:14:00.700
Now let's click on donate
it's eight three right now.

194
00:14:00.730 --> 00:14:02.780
This payment was successful.

195
00:14:02.810 --> 00:14:05.940
I'm going to go to my Stripe dashboard.
Great.

196
00:14:05.970 --> 00:14:07.980
So once I click on payments here,

197
00:14:08.010 --> 00:14:14.220
we're going to see that $1.34 was
successfully completed on April 18.

198
00:14:14.250 --> 00:14:17.620
Eight three, which was three minutes ago.

199
00:14:17.650 --> 00:14:18.980
This is great.

200
00:14:19.010 --> 00:14:27.020
And if we were to go to our simulator
and go back and select school supplies

201
00:14:27.050 --> 00:14:32.580
kit let's say, try to donate,
enter 42 card number.

202
00:14:32.610 --> 00:14:40.020
That is a test card number provided
by Stripe and click on donate again.

203
00:14:40.050 --> 00:14:42.180
This is going to be processing.

204
00:14:42.210 --> 00:14:44.820
The payment was completed successfully.

205
00:14:44.850 --> 00:14:48.820
We can go back here, refresh the page,

206
00:14:48.850 --> 00:14:54.180
and here we're going to see that $13.08
was successfully completed.

207
00:14:54.210 --> 00:14:59.340
Now let's test our
integration with failed payment.

208
00:14:59.370 --> 00:15:01.700
So I'm going to copy this number,

209
00:15:01.730 --> 00:15:07.900
go to my simulator and make sure to select
all of this and paste my new number in.

210
00:15:07.930 --> 00:15:15.380
I'm going to click on donate and
I got payment was confirmed successfully.

211
00:15:15.410 --> 00:15:18.780
So let's go to our payments.

212
00:15:18.810 --> 00:15:26.220
And here we see that this was successfully
completed again, which is very weird

213
00:15:26.250 --> 00:15:31.740
because this was supposed to be a test
number that is supposed to fail.

214
00:15:31.770 --> 00:15:37.820
So let's make sure that our Stripe can
read that we entered a new information

215
00:15:37.850 --> 00:15:41.620
by deleting the last digit
and entering it again.

216
00:15:41.650 --> 00:15:45.140
Let's click on donate one more time

217
00:15:45.170 --> 00:15:48.580
and now we receive that error
has occurred with our payment.

218
00:15:48.610 --> 00:15:51.320
This must have been because once we pasted

219
00:15:51.350 --> 00:15:56.020
the number in, the react native
card number didn't get updated.

220
00:15:56.050 --> 00:16:01.380
So if we go back to our payments,
we're going to see that this payment has

221
00:16:01.410 --> 00:16:07.460
failed and we have responded
with the correct response.

222
00:16:07.490 --> 00:16:10.180
So if the payment is successful,

223
00:16:10.210 --> 00:16:16.060
we can just say that we want to navigate
back to the page where user was.

224
00:16:16.080 --> 00:16:23.940
So let's use navigation, go back here.

225
00:16:23.970 --> 00:16:30.180
And if we were to use 42 card number again
and clicked on donation,

226
00:16:30.210 --> 00:16:36.500
then success message was shown and our
payment was processed successfully.

227
00:16:36.530 --> 00:16:37.540
So that's all.

228
00:16:37.570 --> 00:16:42.500
This is how easy it is to integrate
with Stripe. In the next lesson

229
00:16:42.530 --> 00:16:48.420
what we're actually going to do is make
sure that we can upload our Stripe

230
00:16:48.450 --> 00:16:54.420
integration of our server side code
to Firebase to make sure that instead

231
00:16:54.450 --> 00:16:58.100
of localhost, we're connecting
with Firebase functions.

232
00:16:58.130 --> 00:17:03.140
And if you don't know what Firebase
functions are, please use a link given

233
00:17:03.170 --> 00:17:08.460
in this resource that will link you back
to the video where we went over how

234
00:17:08.490 --> 00:17:12.420
to transfer your local setup
to Firebase functions.

235
00:17:12.440 --> 00:17:13.770
Thanks so much for watching.

236
00:17:13.800 --> 00:17:14.920
I'll see you in the next lesson.