Credit card payments with Stripe using Spring Boot and ReactJS

What is Stripe?

General Flow

Create a Stripe Account

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;
public class StripeClient {
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;
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.*;
public class PaymentGatewayController {

private StripeClient stripeClient;
PaymentGatewayController(StripeClient stripeClient) {
this.stripeClient = stripeClient;
public Charge chargeCard(@RequestHeader(value="token") String token, @RequestHeader(value="amount") Double amount) throws Exception {
return this.stripeClient.chargeNewCard(token, amount); }}
npx create-react-app stripedemo-react
npm i react-stripe-checkout
npm i axios
import React from "react";
import Stripe from "react-stripe-checkout";
import axios from "axios";
function App() {async function handleToken(token) {console.log(token);await"http://localhost:8080/api/payment/charge", "", { headers: {
amount: 500,
},}).then(() => {
alert("Payment Success");
}).catch((error) => {
return (<div className="App"><StripestripeKey="pk_test_****************************"token={handleToken}/></div>);}export default App;



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Senura Vihan Jayadeva

Senura Vihan Jayadeva


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