Credit card payments with Stripe using Spring Boot and ReactJS

Hello Guys, I’m Senura Vihan Jaydeva. Today I will guide you to implement an Online Payment Gateway using Stripe, Spring Boot, and ReactJS.

What is Stripe?

Stripe is a cloud-based service that enables businesses and individuals to receive payments over the internet and offers both client-side libraries (JavaScript and native mobile) and server-side libraries (Java, Ruby, Node.js, etc.).

Stripe provides a layer of abstraction that reduces the complexity of receiving payments. As a result, we don’t need to deal with credit card details directly — instead, we deal with a token symbolizing an authorization to charge.

General Flow

Create a Stripe Account

Right, First all we have to create a stripe account. For testing purposes, you can create a free account.

Here the link for the stripe https://stripe.com

After creating a stripe account, I’m going to set up a spring boot project.

I assume you are familiar with Spring Boot. If you are not please follow the link mentioned below.

When initializing the spring boot project make sure to add spring web dependency.

After initializing a spring project make sure to add stripe dependency in pom.xml.

Now I’m going to create a package called “client” and inside the client package let’s create a class called StripeClient.

Inside the StripeClient class implement the following code as mentioned below.

Here you can see that we have to give the stripe API key. You can find it from the Stripe dashboard.

Under the Developers tab, you can see an option called API keys. There you can see the Publishable Key and Secret key. Copy the Secret key and paste it into the StripeClient constructor.

After the I’m going to create another package called the controller and inside the controller, create a class called PaymentGatewayController. Inside it implement the following code.

Okay, now we are done with the backend part. Let’s move onto the front end.

First I’m going to create a react application using

Then I’m going to install a package called react-stripe-checkout. It makes us easier to implement the rest.

From the front end, we are going to send an HTTP request to the backend. For that, we need another package called Axios.

Right, after install all the above packages let’s move on to the app.js file.

Then implement the following code inside the app.js file.

Make sure to copy and paste the Publishable key to the stripeKey from the stripe dashboard as I mentioned above.

Now start both ReactJS and spring boot applications. Then you will navigate to a page like below.

Click on the Pay With Cart button. Then popup box will appear.

Here make sure to enter the above details in the input fields. ( You can give any email address ).

4242 4242 4242 4242 credit card number is used to test the stripe payment gateway.

If the payment is a success you will able to see an alert. Not only that you can check the payment details in the Stripe dashboard.

Github Links:-

Frontend: https://github.com/senuravihanjayadeva/stripedemo-react

Backend: https://github.com/senuravihanjayadeva/stripedemo-springboot

This is the end of this tutorial. Hope you learned something today. Good Bye!

Software Engineering undergraduate of Sri Lanka Institute of Information Technology | Physical Science Undergraduate of University of Sri Jayewardenepura