Making Payment Function

Making payment function#

Now that we have the payment intent id and the client secret in our redux store, we are ready to make payment. Inside Checkout component, let's make a function called handlePayment. First of all, let's use an event here which will be of type Synthetic event. Inside the function, let's prevent the default behaviour by using event.preventDefault. Now to make this payment, we will require an instance of stripe and an instance of elements, so let's put stripe to be equal to useStripe and elements to be equal to useElements.

Inside the function, let's check if any of them is unavailable. If any of Stripe or elements is not loaded, we can simply return. Since this is going to be an asynchronous call, we can use async and use try catch block. Since we're using CardElements from Stripe, we will have to pass the reference of our cards, which will have all the information. So we can create a cardElement which will be equal to elements.getElement and pass CardNumberElement as a parameter. Although we're 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.

Stripe gives us a confirm card payment method to make a payment, so let's create a new variable called paymentResult which will be equal to await stripe dot confirmCardPayment. Inside, we will pass the client secret which is inside basket.clientSecret, after which we will pass an object that will have the payment method property. Inside payment method; firstly, we will have a card property where we can pass the cardElement we just created. After that, we will pass the billing details. For now, we are simply using the name on card, so let's write name to be cardName.