Hello and welcome back.
As you see we are back to our donation application.
If you want to get the latest code that we
have written for the donation app, please refer to the resources of this
lesson and you're going to be able to download it.
And please set that up,
open it on your simulator, make sure that your Metro bundler is
running, and we're going to be making a payment page today.
Together.
So here we have our screens,
we have home login registration and single donation items so far.
So let's create one more screen and let's call this directory payment.
We're going to be needing payment JS file here for our screen.
We're also going to be creating some styles for this page.
So let's create style JS file.
And as usual since we have this open,
we're going to import style sheet from react native.
We're going to create a constant style
and we're going to use stylesheet to create our styles.
Let's export this by default and go back
to our payment page where we're going to be importing React from React.
We're going to be needing several things here.
So we're going to need safe area view from react native.
So let's import that.
We're also going to need a constant for payment. So far
we're going to be returning null and let's export default payment.
Now since we're creating a payment page,
we're going to modify our routes JS file inside the navigation and here we're going
to be defining a new constant called payment.
Great.
And let's go to our main navigation and inside our authenticated flow,
let's put in one more screen that's going to be called payment.
Great. So we're going to use this payment page
for our stripe integration and we're going to have to make sure
that after user navigates to this page and clicks on donation
button, they're redirected to the payment page.
So to do that, we're going to have to go
to the single donation item and we're going to have to make sure that
first of all, we don't need these many descriptions.
Whoops.
So let's just leave one and we're going to have to make sure that on express
our users can navigate to the payment page.
So let's import routes here, save this file and now if we click here,
we're going to be redirected to a new page.
Great.
So now that we have this page get up, we might want to style this page.
So let's make sure that we create state area view here.
And let's put a view container here because we probably are going to need it.
Let's make sure that this is also scrollable.
Let's put our view inside here. Great.
And now we need to style this.
And let's make sure that we grab global style background white styles here.
And my global styles was automatically imported for me.
And we need to make sure that our flex is
set to one otherwise we're going to be seeing white container only here.
So let's set global style flex here as well.
And now whole our page is white.
So here let's import the header component to make sure that we show to the user
that they are on the payment page making donation.
Great. And now we're going to need some kind
of styling for our scroll view container as well.
So let's style our scroll view and say that we're styling its content.
So let's call this style style payment container.
I'll make it like this.
Let's import style from style.
Let's go to our styles
and say that we need margin horizontal and it's going to be horizontal scale 24.
Great. This makes it more beautiful.
And now we want to tell the user the amount that they are donating.
So we're going to have to make sure
that we show this on our payment page and we can get the amount for the donation
somewhere from the selected donation item which is here.
So we can just copy this selector,
paste it here so that we have information for the selected donation item and we can
use this to show the user how much they are donating.
So let's create a text container here
and say that first of all, let's import this from react native
you are about to donate and then let's use this donation item
information and we can just use price here and here.
We're going to see that they are about
to donate $1.34. Let's make sure that we have some kind of margin top for this
and let's call this style donation amount description.
Let's go to style JS
and make this have margin top of vertical scale twelve.
Great. So below this we're going to place our
stripe card form and they're going to have to have a way of submitting the payment.
Therefore we're going to need a button.
So let's import a button here
and it can be from our components and let's call it donate.
Great. Let's place this out of the scroll view so
that it's always going to be at the bottom of our page.
And we're going to have to make sure that this has the same margin horizontal.
What we could do is actually create
a style and use style button and we can create the button
style here and it will also have margin horizontal of 24.
Okay, since this is a custom component, we can't just pass styles to it like that.
So let's put it in a view container
and make sure that we apply the style here.
Great.
Now our donation button has the margins it needed.
So now all we need to do is place
the stripe integration right here and set up a couple of functions.
And we're going to do all of this in the next video.
Thanks so much for watching.