Adding Stripe to Frontend
In this lesson, we're going to set up Stripe to our frontend
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
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:21] Now that we have set up the payment intent part from the server side, we just need to get access of the publishable key and the client secret to make payments using Stripe. And if we search for react stripe and open the first link, this will take us to the react stripe.js reference page.
[00:22 - 00:29] If you are using react stripe, we no longer will have to control the payment related state from react. That stripe will take care of that.
[00:30 - 00:37] This is requires you to have basic knowledge of react, which I'm pretty sure you have by now. So let's follow these instructions now.
[00:38 - 00:49] We need to start by installing these dependencies so we can copy it and let's go back to the code and open the terminal. Let's open the terminal.
[00:50 - 01:00] Let's stop running it and inside we can paste it. Now that this is installed, let's go back to the stripe talks.
[01:01 - 01:15] Now if we scroll up a bit, next thing to focus on is the elements provider. This gives us access to the element components provided by Stripe and also the access to the stripe object, which we will need to make a payment request to Stripe.
[01:16 - 01:43] We need to make sure that we use these elements in the root level of our checkout page because only then it will be available by its children. Now what we can do is simply copy this part and let's go back to the code and inside client, inside SRC and inside pages, we can create a new page and let's call it checkout page.
[01:44 - 01:52] Now we can paste this copied code here. What we can do is we can start by replacing this key with our own publishable key.
[01:53 - 02:02] So you can copy your own publishable key from Stripe and paste it here. I have copied mine and I will paste it here.
[02:03 - 02:18] Now let's replace app with checkout page and we can also export it. So let's write export default and this function.
[02:19 - 02:31] Now we don't need the options because we can pass the client secret separately with the request. So we can simply get rid of this from here and also from here.
[02:32 - 03:09] Now we can replace this checkout form with simply checkout and since we don't have this component, let's go to the components and create a new one and let's call it checkout. And here we will simply use checkout and return an H1 tag which will say checkout and let's simply export it.
[03:10 - 03:19] Now let's go back to the checkout page and use quick fix to import it from components. We can now register this checkout page inside app.tsx file.
[03:20 - 03:36] So let's go to the app.tsx and we can copy this and paste this. The path is checkout and the component is the checkout page.
[03:37 - 03:45] So I can write it here. This will import it automatically from the pages.
[03:46 - 03:55] And since we don't want this page available for anonymous users, we are using private route for this. Now that this is done, let's start working on the actual checkout component in the next lesson.