Payment Integration – React and Spring Boot with Stripe API

In this article we will discuss how to accept payments on your personal website using the popular Stripe API. We will be focusing solely on the integration between our application and Stripe. Some basic knowledge of JavaScript and Spring is required to understand the technical details.

Below is a dummy checkout page created for demo purposes.

User completes checkout process and receives an alert on completion of payment

Now that we have seen what we are trying to build we will start off by creating an account with Stripe.

Stripe API

Stripe is one among the major payment processing platforms for Internet businesses. A business owner need not worry about maintenance or detecting frauds in his online business as Stripe completely takes ownership of it.

To get started we need to create an account with Stripe (stripe.com) . Once we create an account our Stripe dashboard will look like the below one.

Stripe Dashboard

There are two modes Test Mode and Live Mode. For development purposes we will be using test mode and when you want to accept real payments you will need to verify and activate your account to use Live mode.

Stripe provides us with two keys :

1. Publishable Key – Will be part of the front end client browser and cannot be hidden.
2. Secret Key – Will be part of your backend server and should always be hidden.

Below functional block diagram will give some insights on what is the process involved with these keys.

Functional Block diagram of Payment workflow

We will split this into three sections : Front End , Back End and the API service respectively .

1. Front end – react Stripe checkout Component

React is the most popular JavaScript library and makes it to easy to develop and maintain large enterprise applications. React Stripe Checkout is a pluggable Component which provides us with the button and all that happens after the user clicks on Pay is controlled by this component.

To use this component first we have to initialize it with certain values.

Stripe Checkout component

This component receives total price as an argument. We store the publishable key and price in cents as Stripe accepts the payment in cents and not dollars.

The onToken() function makes the REST API call to our own back end server (localhost in our case) to post the token object along with price. We use axios to make the post request. Note that this onToken function will only be called after receiving the token object from Stripe which happens under the hood.

Finally the actual StripeCheckout component provides us with a button which when clicked prompts for the user and card details. This is highly configurable and if we want to only collect user email and card details we can remove all other properties like the shipping and billing address from the component and our form will look like the below.

Without shipping or billing address

Now all that is left is to include the button in our Checkout page and it can be simply plug it in as shown below with the actual price being passed as an argument to it.

Pluggable button component

The PayNow button on our Checkout Page triggers the display of Pop up form. And the Pay button in the pop up form is what calls the Stripe Service and then also calls the onToken function after receiving the token. (Refer Demo Video above)

Backend server – spring boot rest api

Spring Boot and its back end ecosystem are so popular that even Netflix who had their own in-house solution are migrating to it. We will be leveraging Spring Boot to handle requests coming from our checkout page.

Below is a simple Rest Controller which accepts the request and passes it to the service.

Rest Controller

Calling the Stripe Service to make the payment request

We wire the secret key from the properties to initialize the Stripe object . We use the stripe-java maven dependency and call the charge method which it provides by passing our charge parameters. If successful we will get back the charge Id which we pass on to our front end library. For failure we will send a generic message.

stripe dashboard

Your customers payments will reflect immediately on your Stripe dashboard.

conclusion

We saw one implementation of React and Stripe checkout and there could be various other ways of doing this. Paypal is another popular API service provider which we could use as an alternative to Stripe. The entire code for this project is available in the below github repository.

Github

Feel free to leave your comments and suggestions to help improve the article.

References :

https://alligator.io/react/payments-stripe-checkout-react/

docs.spring.io

Advertisement