How To Use Stripe in React.js

Stripe in React.js Building service-rendering web applications such as E-commerce sites and other Software as a Service (SaaS) web applications requires the inclusion of a payment method that will enable you to collect payment from users securely.

One of the best mediums for securely processing payments from users on web applications is the Stripe payment platform. In this article, I will show why it is ranked among the best payment platforms and how you can use it in your React.js application.

What is Stripe

Stripe is a payment processing platform that serves as a third-party payment processor or a payment gateway platform. Therefore, Stripe is used by business owners to process customers’ debit cards and credit cards for payment of goods or services online.

Stripe is trusted and used by over 500 million global organizations, companies, and major brands, ranging from startup brands to fortune 500. Some of the most popular brands using the Stripe payment platform are Lyft, Amazon, and Shopify.

One of the reasons Stripe has gathered a lot of users since it was created is because of its ability to process 135 currencies over the world.

Also, Stripe is an easy-to-use tool that can be easily integrated because its online developers’ tool, JSON, is very impressive with easy guides and is public.

Stripe can be used in many transactions to transfer money from a customer account to a business owner’s bank account. For example, Stripe is used in online retail shops to securely capture a customer’s debit card or credit card details through a processor, which will collect transaction funds from a customer’s account to a temporal merchant account. Finally, these processed funds would transferred to a business owner’s bank account.

What is Stripe

Stripe is compatible with major backend programming languages such as Python, PHP, and Ruby and popular backend frameworks such as Node.js.

You need to get a REST API key to use Stripe in your application. These API keys can be access from your Dashboard when you open a Stripe account, and there are two types of API keys. One of these keys is a test key that can be used in a developer environment for testing, while the other is meant for use if you want your application to go live.

The production API key will be given to you when you link your bank account to your Stripe account and activate your account.

In the next sections, I will show you how you can connect your Stripe-powered server-side Node.js application to a frontend React.js application, but first, let’s create and set up our project.

Before that, head over to dashboard.stripe.com/register. To create your stripe account. You can activate it if you want a live API key, but for now, the test API key will be just fine

Create and Set Up Your Project

The first step you will take is to create a project folder. Inside this folder, you will create a React.js application that will be the front end of your project. So, run the command below at the same level as your project folder to create the React.js application:

npx create-react-app Stripe-payment

The command above will create a folder named Stripe-payment, with all the files and folders required to start and run a React.js application for you in your project folder.

Inside this React.js folder, you need to install some packages. these packages are important in connecting a React.js application to a Stripe API. So, run the command below to install these packages:

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

You also need a backend application that will work as a server for you. In this case, we are going to make use of Node.js. So, create a new folder at the same level as your React.js application and name it Server.

Then navigate into the Server folder, and initialize a node.js application with the command below:

npm init --yes

The above command will create a package.json file with default settings like the package name, version, and licensing. You will also install some packages that will enable you to set up a backend server for Stripe in this application.

So run the command below to install these packages:

npm install body-parser cors dotenv stripe-js express

With this, we done with setting up the important things in our project. The next step is to create the front end of and server application. Stripe in React.js

Set Up the Frontend Application for Stripe

The first step is to create a folder and name it Components, this folder will contain the components in our frontend application. Our application will have a PaymentForm component and a Stripe component, create a Stripe.jsx file and a PaymentForm.jsx file inside the Components folder. We are going to start with the Stripe component, so inside the Stripe.jsx file, add the code below to create a Stripe component.

Inside this component, you are going to wrap the PaymentForm component with the Stripe Elements provider. Stripe Elements provider will allow you to make use of Stripe Elements components inside the PaymentForm component. You also need to initialize a Stripe object, and to do this, you will make use of loadStripe, so import loadStripe and the Elements provider with the code below.

Application for Stripe

Now, you can initialize the Stripe object with loadStripe by creating and passing your publishable key from stripe into the loadStripe function, which you called in a variable. Also, you can import the PaymentForm component (which we are yet to create) inside the Stripe component and wrap it with the Elements provider. So, add the code below to your Stripe component.

Remember to use your publishable key from the stripe. You can get your publishable key from your dashboard, go to developers and, check under API keys. Then replace the API key from the code above with our API key.

With this, we are done with the Stripe component, now we can move over to the PaymentForm component, so go inside your PaymentForm.jsx file and write the code below to create a PaymentForm component.

Inside the PaymentForm

Inside the PaymentForm component, we are going to create a payment form with elements from the stripe. So add the code below to import these elements and axios to make a post request to your backend server.

Now, you have to check if the transaction succeeds, so make use of the useState hook to create the success state, then you have to create a stripe variable with the useStripe hook that you imported from stripe-react-js along with the Elements components. Stripe in React.js

You also need to create elements variable that you will use in your application to collect and process user’s payment details, and you will create this variable with the useElements hook that you imported from stripe-react-js.

So add the code below in your PaymentForm component to create the success state, the stripe variable, and the elements variable.

With these, we can create a handleSubmit function that will be called when the user submits the payment form, but for now, set up the payment form with its fields that will collect the user’s card details with the code below.

From the code

From the code above, you checked if the transaction was successful. If it was unsuccessful, you will keep displaying the payment form, but if the transaction succeeds. You will display the “Payment successful” text. Create the handleSubmit function with the code below. Stripe in React.js

From the code above, you created a payment method of type card with the stripe variable that you created. Then you checked if the transaction was successful without errors. If there is no error, then your application will send a post request to the localhost:4000/payment URL with the product’s amount.

Stripe uses cents for the USD transaction amount, so you must input the equivalent amount of USD in cents. So, since our product will sell for 100 USD, the equivalent amount is 10,000 cents. If there is an error, then your application will display an error message. Stripe in React.js

From the code

Finally, in the PaymentForm.jsx file, add the code below to give some basic styles to your payment form. Then add a general style for your entire application with the code below inside your index.css file.

To render your form, you can now import the Stripe component in App.js and then conditionally render it if the customer clicks to buy your product. To check if the customer clicked to buy your product, you also need to create a state for this.

You can call this state showForm. This state will be set to false initially, but when the customer clicks on the BUY button, it will be set to true, then the payment form will come up.

You also need an image for your product. Your customers will need to see what they are about to purchase. You can use a product page for this purpose if you already have a product page.

So, import useState, Stripe component, and the image of what you want to sell with the code below inside your App.js file.

Now you can create the showForm State and use it to display the payment form with the code below conditionally.

You can now save the App.js, Stripe.jsx, and PaymentForm.jsx files, and then run your application with the command below:
npm start And you should see something like this in the browser.

And if you click on the “BUY” button, you will taken to the payment form. And then you should see something similar to the one below.

This form is not working until you build the backend server. But we done with the front end. You can now open the server folder and create an index.js file

Set Up the Backend Application for Stripe

We will begin this section by importing those libraries we installed in the Server folder earlier. We will use them to create a server app that will run on port 4000. So, use the code below to import the libraries.

All right, with the code above, you imported the express library on line 1. You make use of the express library in creating a server app, then on line 2, you import the dotenv library, which you will use for storing your secret key in an environment variable file. You also imported the stripe library, which you will use in creating your payment intents. Then finally, you import the cors library, which is important for resource sharing between the frontend application and your server application.

index.js

The next step in the index.js file is to create a server app with the express library and then make use of the body-parser and cors libraries in this server app, so add the code below into your index.js

Now you have a running server app that uses the body-parser library to send JSON responses and cors for resource sharing. Also, your server app is running port 4000. So, if you run the command, node index.js, it will trigger your index.js file, and you should see “Server is running” in the console of your terminal.

Good. Now you can create the post endpoint that will create your payment intents and the details of. Your customers’ transactions by adding the code below. Just beneath that, the line of code you made use of in the cors 

From the code above, you created a payment post URL and passed the cors library to it, and an arrow function. Inside this arrow function, you created a try, catch block.

Under the try block, you created a payment descript containing the transaction amount. And other important details about the user’s transaction if it was successful. So, now save the index.js file and run the command below to start your server application.

If your server is still running, you can cancel it and run the command above. Go to the browser and refresh your React.js application.

index.js

Fill in the Stripe test card numbers 4242 4242 4242 4242, as your card number, and a random date as your card expiry date number, and then 424 as your card CVC number.

When you click the “BUY” button, you will shown the “Payment Successful” text. Which means that your transaction was successful.

But if you try to use another random number as your card number, you will get an error in the console. This is because you are still in test mode. By default, when you create a Stripe account without activating it with your bank account. You will given test account for test. You need to activate your Stripe account and get a live API key if you want a live account.

Now, if you go back to your Stripe dashboard and go to your payments page. You will see all the transactions that your users have made, including this one you just did. Stripe in React.js

And if you click on any of the transactions, you will get a detailed description for each of them. You also get a refund button at the top right corner that you can use to return. Customers’ funds if there is a problem in a transaction. Stripe in React.js

Conclusion

Stripe is an important payment processing platform that helps business owners easily collect payments. For their online goods and services from customers.

Stripe is easy to use and can be us with popular backend languages and Frameworks. And I just show you how to use it in a React.js application connect to a Node.js backend server.

I also discussed Stripe and how it can help businesses grow faster. So, in this article, you learned how to use Stripe in React.js and also how to set up Stripe in a Node.js backend application.