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.

Create a REST API With Spring Boot

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.

<dependency> 
  <groupId>com.stripe</groupId> 
  <artifactId>stripe-java</artifactId> 
  <version>5.21.0</version> 
</dependency>

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.

package com.stripe.demo.client;

import com.stripe.Stripe;
import com.stripe.model.Charge;
import com.stripe.model.Customer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import java.util.HashMap;
import java.util.Map;
@Component
public class StripeClient {
    @Autowired
    StripeClient() {
        Stripe.apiKey = "your stripe api key";
    }
    public Customer createCustomer(String token, String email) throws Exception {
        Map<String, Object> customerParams = new HashMap<String, Object>();
        customerParams.put("email", email);
        customerParams.put("source", token);
        return Customer.create(customerParams);
    }
    private Customer getCustomer(String id) throws Exception {
        return Customer.retrieve(id);
    }
    public Charge chargeNewCard(String token, double amount) throws Exception {
        Map<String, Object> chargeParams = new HashMap<String, Object>();
        chargeParams.put("amount", (int)(amount * 100));
        chargeParams.put("currency", "USD");
        chargeParams.put("source", token);
        Charge charge = Charge.create(chargeParams);
        return charge;
    }
    public Charge chargeCustomerCard(String customerId, int amount) throws Exception {
        String sourceCard = getCustomer(customerId).getDefaultSource();
        Map<String, Object> chargeParams = new HashMap<String, Object>();
        chargeParams.put("amount", amount);
        chargeParams.put("currency", "USD");
        chargeParams.put("customer", customerId);
        chargeParams.put("source", sourceCard);
        Charge charge = Charge.create(chargeParams);
        return charge;
    }
}

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.

package com.stripe.demo.controller;
import com.stripe.demo.client.StripeClient;
import com.stripe.model.Charge;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@CrossOrigin("*")
@RequestMapping("/api/payment")
public class PaymentGatewayController {
    
    private StripeClient stripeClient;
    @Autowired
    PaymentGatewayController(StripeClient stripeClient) {
        this.stripeClient = stripeClient;
    }
    @PostMapping("/charge")
    public Charge chargeCard(@RequestHeader(value="token") String token, @RequestHeader(value="amount") Double amount) throws Exception {
        return this.stripeClient.chargeNewCard(token, amount);
    }
}

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

npx create-react-app stripedemo-react

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

npm i react-stripe-checkout

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

npm i 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.

import React from "react";
import Stripe from "react-stripe-checkout";
import axios from "axios";
function App() {
async function handleToken(token) {
console.log(token);
await axios.post("http://localhost:8080/api/payment/charge", "", {         headers: {
  token: token.id,
  amount: 500,
},}).then(() => {
   alert("Payment Success");
   }).catch((error) => {
   alert(error);
   });
}
return (
<div className="App">
<Stripe
stripeKey="pk_test_****************************"
token={handleToken}
/>
</div>
);
}
export default App;

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!