Making Payment Function
In this lesson, we're going to make a function which will make the payment
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:10] Now that we have the payment intent ID and the client secret in our Redux store , we are ready to make payment inside the checkout component. So let's make a function which will be called handle payment.
[00:11 - 00:23] So let's start writing the function handle payment. First of all, let's use an event here, which will be of type synthetic event.
[00:24 - 00:37] And it will be imported from react inside the function. Let's prevent the default behavior by using event dot prevent default.
[00:38 - 00:52] Now to make this payment, we will require an instance of stripe and an instance of elements. So what we can do is here we can write stripe, which will be equal to use stripe.
[00:53 - 01:07] And we can import it and the same way we need elements. And this will be equal to use elements which can be imported from react stripe.
[01:08 - 01:22] Inside the function, we can first of all check if any of them is unavailable. So we can check if there is no stripe or there is no elements.
[01:23 - 01:33] In this case, we can simply return. And since this is going to be an asynchronous function, we can write async and inside we can write a try catch block.
[01:34 - 01:53] And the error type any and we can simply log the error. Since we are using card elements from stripe, we will have to pass the reference of our cards.
[01:54 - 02:02] And this reference will have all the information. So what we can do is we can create a new constant and let's call it card element.
[02:03 - 02:11] And this will be equal to elements dot get element. And as a parameter, we will pass the card number element.
[02:12 - 02:26] Although we are using three different elements from stripe in our application, we don't have to pass the remaining elements which are card expiry and card cvc element. Once we pass the card number element, it will take care of the other cards as well.
[02:27 - 02:34] Stripe gives us confirm card payment method to make a payment. So what we can do is create a new variable called payment result.
[02:35 - 02:42] So let me write payment result. And this will be equal to stripe dot confirm card payment method.
[02:43 - 02:55] So since it's an asynchronous function, we can write await. And here we will use stripe dot confirm card payment.
[02:56 - 03:06] Inside as a first parameter, we will pass the client secret, which is inside basket dot client secret. So I can write basket dot client secret.
[03:07 - 03:12] And since we don't have basket, that's imported. So let's do it here.
[03:13 - 03:26] Let's use basket and import it using use app selector from the state. And from state, we will go to state dot basket.
[03:27 - 03:37] Now we can use basket dot client secret. And since this can be null, so we will pass an exclamation to tell it that it will have a value.
[03:38 - 03:52] After the client secret, we will pass an object and this object will have a payment method property. So let's write payment method.
[03:53 - 04:01] Inside payment method, firstly, we will have a card property. So card, which will be equal to the card element that we have created.
[04:02 - 04:09] And let's again pass an exclamation mark. After that, we have a property called billing details.
[04:10 - 04:16] So let's write billing details. For now, we are simply using the name on the card.
[04:17 - 04:29] So what we can do is we can write name, which is equal to the card name state, which is there inside our component. Now the payment result response will have a payment intent property with a status.
[04:30 - 04:40] If the request is successful, the status will be succeeded. So what we can do is below this payment result, we can check if it is succeeded .
[04:41 - 04:56] And for that, we will have to write a payment result dot payment intent dot status is equal to succeeded. So we can use this so that we don't commit any spelling mistake.
[04:57 - 05:08] If this is succeeded, we can use a notification, which will say your payment is successful. So what we can do is we can write notification and import it from and D.
[05:09 - 05:23] And since this is going to be a success, we can write notification dot success. And the message will be your payment is successful.
[05:24 - 05:41] Also, if the payment is successful, we want to clear the basket. So what we can do is we can since we don't have dispatch, let's import dispatch as well.
[05:42 - 05:57] So here we can write dispatch is equal to use app dispatch. And now after the notification, we can dispatch the remove basket reducer function.
[05:58 - 06:06] And we can import remove basket. But this function will only clear the basket from the reducer store.
[06:07 - 06:18] And it will still persist in our database. So we will have to create an endpoint, which will empty the basket and also remove the payment intent ID and the client secret from the database.
[06:19 - 06:24] Let's take care of it in a moment. Here after making the payment, we can push the user back to their profile.
[06:25 - 06:35] So what we can do is we can use a set timeout since we are showing a notification and we want to give clients some time to see that. So here we can use set timeout.
[06:36 - 06:50] And inside we can give it a timing of let's say one second. And this and now we want to push the user to the profile page.
[06:51 - 06:55] So again, we need to create history. So let's create history as well.
[06:56 - 07:11] Const history is equal to use history. Now inside the set timeout, we can use history dot push and we will push them to the profile page.
[07:12 - 07:25] This is when the status is succeeded, but if it's not succeeded, we can create an else condition here. Now inside we can use a notification, which will be an error this time.
[07:26 - 07:40] So let me write notification dot error. And the message this time will not be hard coded because there could be any reason for the failure.
[07:41 - 07:49] So what we can do is we can write payment result and it has an error property. So we will choose error and then error has a message.
[07:50 - 07:54] So we can write dot message. And also use an exclamation to be safe.
[07:55 - 08:00] Now we have two more things to work on. One is to make clear basket endpoint.
[08:01 - 08:07] And another task is to add course inside users purchase courses. Let's take care of them in the next lesson.