Below is a dummy checkout page created for demo purposes.
Now that we have seen what we are trying to build we will start off by creating an account with Stripe.
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.
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 :
- Publishable Key – Will be part of the front end client browser and cannot be hidden.
- 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.
We will split this into three sections : Front End , Back End and the API service respectively .
1. Front end – react Stripe checkout Component
To use this component first we have to initialize it with certain values.
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.
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.
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.
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.
Your customers payments will reflect immediately on your Stripe dashboard.
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.
Feel free to leave your comments and suggestions to help improve the article.