Zerodha Publisher API Integration : using Thyme-leaf Spring Boot

Stock trading has become very popular these days. Tech behind stock trading application has improved significantly over last few years.

Complexity of adding stock trading option in your application has reduced significantly.

This blog will help you for integrating publisher Trading API using Spring Boot and Thyme-leaf template. By using this you can place order of shares in one click on your application.

We are going to integrate Zerodha Order API by using zerodha publisher API.

Zerodha (Kite) Publisher API:

The Kite Publisher Javscript plugin lets you add one-click trade buttons to your webpage. It works like a basket + payment gateway where a popup opens and guides the user through a trade, and lands the user back on your webpage.

You can add one or more stocks to the basket (max 10) dynamically using the Javascript plugin, or embed simple static buttons using plain HTML.

Embedding buttons on websites and apps that allow users to execute trades. The Kite Publisher buttons can be integrated into your website by copy-pasting a few lines of HTML and Javascript.

With Kite Publisher, 2+ million clients of Zerodha can use the trade buttons on your website or app to execute trades.

Let’s start with the integration Zerodha publisher api for Offsite order.

Lets create a spring start project using spring boot

Give project name and package name

Add following dependencies.
1. Spring Web
2. Spring Data JPA
3. Thymeleaf

Add controller package

Folder Structure :

Let’s start with writing an api for buy and sell in zerodha .

@Controller
public class BuySellZerodhaPublisherController {
 
  @PostMapping(value = "/buysell")
  public String indexZerodha(Model model) {
 
    BasketDto basket = new BasketDto();
    List<BasketDto> list = new ArrayList<>();
 
    basket.setExchange("NSE");
    basket.setQuantity(2);
    basket.setTransactionType("BUY");
    basket.setTradingSymbol("INFY-EQ");
 
    list.add(basket);
 
    model.addAttribute("basket", list);
 
    return "zerodhabuysell";
  }
}

Here BasketDto is a DTO class :

@Data
public class BasketDto {
  private String tradingSymbol;
  private String exchange;
  private String transactionType;
  private int quantity;
}

In basketDto class tradingSymbol, exchange, transactionType and quantity are dynamic fields required for the offsite order execution feature. In BuySellZerodhaPublisherController we had set those fields. By using Model we send those details to the Thymeleaf Template i.e zerodhabuysell.html which we have return.

Integration of Thymeleaf Template i.e. zerodhabuysell.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Zerodha</title>
</head>
<body>
  https://kite.trade/publisher.js?v=3
  <script th:inline="javascript">
 
       var basket = [[${basket}]];
      KiteConnect.ready(function() {
        var kite = new KiteConnect("api_key");
        // kite.add(basket);
        basket.forEach(function (item, index) {
        var items=item;
     var tradingsymbol = items.tradingSymbol;
     var exchange =items.exchange;
     var transactiontype =items.transactionType;
     var quantity =items.quantity;
 
    kite.add({ 
        "tradingsymbol": tradingsymbol, 
        "exchange": exchange, 
        "transaction_type": transactiontype, 
        "order_type": "MARKET", 
        "quantity": quantity, 
        "variety": "regular",
        "readonly": false 
    });});
        kite.connect();
    }); 
 
        </script>
</body>
</html>

In the above thymeleaf template we used api_key. You have to generate that api_key for that you need to create a Kite Connect developer account. For that use following link :

Kite Connect developer account

After login / signup you can generate api_key. And you can use the thymeleaf template.

In the above thymeleaf template we pass a basket from buysell api. We used the publisher js plugin. It works like a basket combined with a payment gateway, where an inline popup opens on your webpage, guides the user through a trade, and lands the user back on your page. As described in the offset order execution section, it is possible to capture the request_token from this flow to start a Kite Connect session as well.

https://kite.trade/publisher.js?v=3

Include Kite Publisher on your webpage by pasting the following script tag at the end of your webpage, just before the closing </body> tag. You only need to include this once to render any number of buttons on a page.

We used the HTML5 data attributes on any HTML element and turned it into a trade button which gets invoked with a single click. The examples on the right show a link and a button being turned into trade buttons. We clicked that trade button automatically by using kite.connect();

After that you will get the login page as follows.