Adding Stripe to Frontend

Adding Stripe to frontend#

Now that we have set up the payment intent part from the server side, we just need to get access to the publishable key and the clientSecret to make payments using Stripe. If we search for stripe react and open the first link, this will take us to the React Stripe.js reference page. IF we're using React stripe, we no longer have to control the payment related state from React; react stripe will take care of that. This just requires you to have basic working knowledge of React which I'm pretty sure you have by now.

Let's follow the instructions. We need to start by installing these dependencies, so let's copy this and go back to the terminal and inside the client project, paste this. Once this is installed, we can go back to the stripe docs.

Install Stripe#

xxxxxxxxxx

npm install --save @stripe/react-stripe-js @stripe/stripe-js

Next thing to focus on is the Elements Provider. This gives us access to the Element components provided by Stripe and also access the Stripe object which we will need to make a payment request to Stripe. We also need to make sure that it is in the root level of our checkout page because only then will it be available to its children. Now, we can simply copy this part and inside client project, then inside pages, let's create a new page and call it CheckoutPage.tsx and paste this. We can start with replacing this publishable key with our personal publishable key. Let's replace App with CheckoutPage and right now, we don't need the options; we can pass the clientSecret separately with the request so we can get rid of this.