WEBVTT

1
00:00:00.160 --> 00:00:01.660
Hello and welcome back.

2
00:00:01.680 --> 00:00:05.380
As you see we are back
to our donation application.

3
00:00:05.410 --> 00:00:08.140
If you want to get the latest code that we

4
00:00:08.170 --> 00:00:11.820
have written for the donation app,
please refer to the resources of this

5
00:00:11.840 --> 00:00:14.260
lesson and you're going
to be able to download it.

6
00:00:14.290 --> 00:00:16.220
And please set that up,

7
00:00:16.240 --> 00:00:20.980
open it on your simulator,
make sure that your Metro bundler is

8
00:00:21.010 --> 00:00:24.500
running, and we're going to be
making a payment page today.

9
00:00:24.520 --> 00:00:25.900
Together.

10
00:00:25.920 --> 00:00:28.180
So here we have our screens,

11
00:00:28.210 --> 00:00:32.020
we have home login registration
and single donation items so far.

12
00:00:32.050 --> 00:00:37.420
So let's create one more screen
and let's call this directory payment.

13
00:00:37.450 --> 00:00:42.100
We're going to be needing payment
JS file here for our screen.

14
00:00:42.130 --> 00:00:45.860
We're also going to be creating
some styles for this page.

15
00:00:45.890 --> 00:00:48.500
So let's create style JS file.

16
00:00:48.530 --> 00:00:50.820
And as usual since we have this open,

17
00:00:50.850 --> 00:00:55.620
we're going to import style
sheet from react native.

18
00:00:55.650 --> 00:00:57.780
We're going to create a constant style

19
00:00:57.810 --> 00:01:02.420
and we're going to use
stylesheet to create our styles.

20
00:01:02.450 --> 00:01:06.400
Let's export this by default and go back

21
00:01:06.430 --> 00:01:11.900
to our payment page where we're going
to be importing React from React.

22
00:01:11.920 --> 00:01:13.660
We're going to be needing
several things here.

23
00:01:13.690 --> 00:01:17.490
So we're going to need safe
area view from react native.

24
00:01:17.520 --> 00:01:19.290
So let's import that.

25
00:01:19.320 --> 00:01:24.740
We're also going to need
a constant for payment. So far

26
00:01:24.770 --> 00:01:34.100
we're going to be returning null
and let's export default payment.

27
00:01:34.130 --> 00:01:36.850
Now since we're creating a payment page,

28
00:01:36.880 --> 00:01:43.280
we're going to modify our routes JS file
inside the navigation and here we're going

29
00:01:43.310 --> 00:01:49.360
to be defining a new
constant called payment.

30
00:01:50.360 --> 00:01:51.140
Great.

31
00:01:51.170 --> 00:01:56.380
And let's go to our main navigation
and inside our authenticated flow,

32
00:01:56.410 --> 00:02:02.320
let's put in one more screen
that's going to be called payment.

33
00:02:03.200 --> 00:02:06.060
Great.
So we're going to use this payment page

34
00:02:06.090 --> 00:02:11.540
for our stripe integration
and we're going to have to make sure

35
00:02:11.570 --> 00:02:17.220
that after user navigates
to this page and clicks on donation

36
00:02:17.250 --> 00:02:20.940
button, they're redirected
to the payment page.

37
00:02:20.970 --> 00:02:23.100
So to do that, we're going to have to go

38
00:02:23.130 --> 00:02:28.420
to the single donation item and we're
going to have to make sure that

39
00:02:28.450 --> 00:02:31.060
first of all, we don't need
these many descriptions.

40
00:02:31.090 --> 00:02:32.020
Whoops.

41
00:02:32.050 --> 00:02:37.320
So let's just leave one and we're going
to have to make sure that on express

42
00:02:38.360 --> 00:02:48.160
our users can navigate
to the payment page.

43
00:02:51.720 --> 00:02:57.980
So let's import routes here,
save this file and now if we click here,

44
00:02:58.010 --> 00:03:00.540
we're going to be
redirected to a new page.

45
00:03:00.560 --> 00:03:00.900
Great.

46
00:03:00.930 --> 00:03:05.980
So now that we have this page get up,
we might want to style this page.

47
00:03:06.010 --> 00:03:11.880
So let's make sure that we create
state area view here.

48
00:03:12.960 --> 00:03:20.380
And let's put a view container here
because we probably are going to need it.

49
00:03:20.410 --> 00:03:23.100
Let's make sure that this
is also scrollable.

50
00:03:23.130 --> 00:03:28.260
Let's put our view inside here.
Great.

51
00:03:28.290 --> 00:03:29.820
And now we need to style this.

52
00:03:29.850 --> 00:03:39.060
And let's make sure that we grab global
style background white styles here.

53
00:03:39.090 --> 00:03:42.340
And my global styles was
automatically imported for me.

54
00:03:42.370 --> 00:03:44.820
And we need to make sure that our flex is

55
00:03:44.850 --> 00:03:49.660
set to one otherwise we're going to be
seeing white container only here.

56
00:03:49.690 --> 00:03:55.220
So let's set global
style flex here as well.

57
00:03:55.250 --> 00:03:57.540
And now whole our page is white.

58
00:03:57.570 --> 00:04:03.740
So here let's import the header component
to make sure that we show to the user

59
00:04:03.770 --> 00:04:12.460
that they are on the payment page
making donation.

60
00:04:12.490 --> 00:04:15.140
Great.
And now we're going to need some kind

61
00:04:15.170 --> 00:04:18.860
of styling for our scroll
view container as well.

62
00:04:18.890 --> 00:04:25.940
So let's style our scroll view and say
that we're styling its content.

63
00:04:25.970 --> 00:04:33.600
So let's call this style style
payment container.

64
00:04:33.720 --> 00:04:36.020
I'll make it like this.

65
00:04:36.040 --> 00:04:40.140
Let's import style from style.

66
00:04:40.160 --> 00:04:43.200
Let's go to our styles

67
00:04:44.560 --> 00:04:53.660
and say that we need margin horizontal
and it's going to be horizontal scale 24.

68
00:04:53.680 --> 00:04:57.020
Great.
This makes it more beautiful.

69
00:04:57.040 --> 00:05:02.940
And now we want to tell the user
the amount that they are donating.

70
00:05:02.970 --> 00:05:05.060
So we're going to have to make sure

71
00:05:05.090 --> 00:05:12.440
that we show this on our payment page
and we can get the amount for the donation

72
00:05:12.680 --> 00:05:18.260
somewhere from the selected donation item
which is here.

73
00:05:18.280 --> 00:05:20.620
So we can just copy this selector,

74
00:05:20.650 --> 00:05:27.300
paste it here so that we have information
for the selected donation item and we can

75
00:05:27.330 --> 00:05:33.260
use this to show the user
how much they are donating.

76
00:05:33.290 --> 00:05:36.140
So let's create a text container here

77
00:05:36.170 --> 00:05:44.040
and say that first of all,
let's import this from react native

78
00:05:45.360 --> 00:05:52.580
you are about to donate
and then let's use this donation item

79
00:05:52.600 --> 00:05:58.500
information and we can just
use price here and here.

80
00:05:58.520 --> 00:05:59.860
We're going to see that they are about

81
00:05:59.890 --> 00:06:08.340
to donate $1.34. Let's make sure that we
have some kind of margin top for this

82
00:06:08.360 --> 00:06:14.960
and let's call this style
donation amount description.

83
00:06:16.280 --> 00:06:19.600
Let's go to style JS

84
00:06:21.840 --> 00:06:27.980
and make this have margin top
of vertical scale twelve.

85
00:06:28.000 --> 00:06:30.380
Great.
So below this we're going to place our

86
00:06:30.410 --> 00:06:35.300
stripe card form and they're going to have
to have a way of submitting the payment.

87
00:06:35.330 --> 00:06:37.660
Therefore we're going to need a button.

88
00:06:37.690 --> 00:06:42.380
So let's import a button here

89
00:06:42.410 --> 00:06:49.060
and it can be from our components
and let's call it donate.

90
00:06:49.090 --> 00:06:52.040
Great.
Let's place this out of the scroll view so

91
00:06:52.070 --> 00:06:56.560
that it's always going to be
at the bottom of our page.

92
00:06:56.840 --> 00:07:02.140
And we're going to have to make sure
that this has the same margin horizontal.

93
00:07:02.160 --> 00:07:03.860
What we could do is actually create

94
00:07:03.890 --> 00:07:10.500
a style and use
style button and we can create the button

95
00:07:10.530 --> 00:07:17.540
style here and it will also
have margin horizontal of 24.

96
00:07:17.570 --> 00:07:23.580
Okay, since this is a custom component,
we can't just pass styles to it like that.

97
00:07:23.600 --> 00:07:27.100
So let's put it in a view container

98
00:07:27.130 --> 00:07:31.420
and make sure that we
apply the style here.

99
00:07:31.440 --> 00:07:31.860
Great.

100
00:07:31.890 --> 00:07:36.180
Now our donation button
has the margins it needed.

101
00:07:36.210 --> 00:07:38.460
So now all we need to do is place

102
00:07:38.480 --> 00:07:42.660
the stripe integration right here
and set up a couple of functions.

103
00:07:42.680 --> 00:07:45.060
And we're going to do all
of this in the next video.

104
00:07:45.080 --> 00:07:46.040
Thanks so much for watching.