Publisher JS Plugin

The Superr Publisher JavaScript plugin allows you to incorporate one-click trade buttons into your webpage. It functions similarly to a basket with a payment gateway, where an inline popup appears on your webpage, guiding users through the trading process and returning them to your page. As mentioned in the section on offsite order execution, it is also possible to retrieve the request_token from this flow to initiate an Superr Connect session.

Using the JavaScript plugin, you can dynamically add one or more stocks to the basket (up to a maximum of 10), or you can embed simple static buttons using plain HTML.

Getting Started

<script src="https://developers.stoxkart.com/publisher.js" />

To include the Superr Publisher plugin on your webpage, simply paste the following script tag at the end of your webpage, just before the closing </body> tag. This code needs to be included only once to render any number of buttons on a page.

HTML Buttons

<superr-button
  data-superr="your-api-key"
  data-exchange="NSE"
  data-tradingsymbol="TATAMOTORS"
  data-action="BUY"
  data-quantity="1"
  data-order_type="LIMIT"
>
  Buy TATAMOTORS
</superr-button>

You can use the custom <superr-button> HTML5 tag to render branded Superr buttons that initiate a trade with a single click. These branded buttons function similarly to social media buttons, and you can include as many as you desire on a page.

Dynamic buttons with JavaScript

// initialize a new SuperrConnect instance with your api key
const superr = new SuperrConnect("your-api-key");
 
// add as many stocks as you want
superr.add({
  exchange: "NSE",
  token: "3456",
  order_type: "LIMIT",
  product_type: "DELIVERY",
  quantity: 1,
  disclose_quantity: 0,
  price: 3475,
  trigger_price: 0,
  stop_loss_price: 0,
  validity: "DAY",
  action: "SELL",
  tradingsymbol: "TATAMOTORS",
});
 
const button = document.querySelector("#custom-button-demo");
 
// one way to make the button dynamic
superr.link(button);
 
// other way to do this
button.addEventListener("click", () => {
  superr.connect();
});

You can create a basket of stocks and utilize the plugin to generate an Superr button that executes the trade, or you can associate the basket with your own button (or any HTML element).

The plugin loads its assets asynchronously, so it is crucial to initialize your custom SuperrConnect calls only after the plugin has been fully loaded. To accomplish this, you should utilize the SuperrConnect.ready() function.

Note

Include your custom code after the publisher.js inclusion. Also, make sure to wrap your code in SuperrConnect.ready()

Paremeters

Methods