smallcase Module Integration

A plug and play solution for smallcase transactions enabling distributors (& creators) to offer smallcases to their captive audience.

πŸ“˜

Prerequisites reads

  1. What is smallcase Distribution Module?
  2. Integration keys
  3. JWT usage

Implementation steps

Step 1 - Install SDK

To load JS SDK, or install and configure native SDK, checkout the installation step on the respective SDK integration page:

Step 2 - Initialise gateway session

Next up, you need to initialise the gateway session on SDK. Check:

Step 3 - Launch smallcase module (aka smallplug)

gatewayInstance
  .openSmallplug()
  .then(res => console.log('smallcase module closed with following response:', res);
SmallcaseGatewaySdk.launchSmallPlug(
	activity: Activity, //example: requireActivity()
	smallplugData: SmallplugData?,
  smallPlugListener = object : SmallPlugResponseListener {
    override fun onSuccess(smallPlugResult: SmallPlugResult) {
      //success callback
    }
    override fun onFailure(errorCode: Int, errorMessage: String) {
      //error callback
    }
  },
  smallplugPartnerProps: SmallplugPartnerProps?
  
class SmallplugData(
    val targetEndpoint: String?, //example: "discovery/all"
    val params: String? //example: "count=11&minInvest=0-5000"
)

class SmallplugPartnerProps(
  headerColor: String?, //example: "2C3639"
  headerOpacity: Double, //example: 1.0
  backIconColor: String?, //example: "2C3639"
  backIconOpacity: Double? //example: 1.0
)
SCGateway.shared.launchSmallPlug(
  presentingController: UIViewController, //example: self
  smallplugData: SmallplugData?,
  smallplugUiConfig: SmallplugUiConfig? { (response, error) in
  if(response != nil) {
     //success callback
   } else {
     //error callback
  }
}

class SmallplugData: NSObject {
  targetEndpoint: String? //example: "discovery/all"
  params: String? //example: "count=11&minInvest=0-5000"
}

class SmallplugUiConfig: NSObject {   
  headerColor: String? //example: "2C3639"
  backIconColor: String? //example: "2C3639"
  opacity: CGFloat? //example: 1.0
  backIconColorOpacity: CGFloat? //example: 1.0
}
Future<String?> ScgatewayFlutterPlugin.launchSmallplugWithBranding(
  SmallplugData smallplugData,
	SmallplugUiConfig smallplugUiConfig
);

class SmallplugData {
  String? targetEndpoint; //example: "discovery/all"
  String? params; //example: "count=11&minInvest=0-5000"
}

class SmallplugUiConfig {
  Color? headerColor; //example: Colors.black
	double headerOpacity; //example: 1.0
	Color? backIconColor; //example: Colors.white
  double backIconOpacity; //example: 1.0
}
try {
  const res = await SmallcaseGateway.launchSmallplugWithBranding(
    targetEndpoint, //example: "discovery/all"
    params, //example: "count=11&minInvest=0-5000"
    headerColorHex, //example: "#2F363F"
    headerOpacity, //example: 1.0
    backIconColorHex, //example: "#2F363F"
    backIconOpacity //example: 1.0
  ); 
} catch(err) {
  //error callback
}
scgateway.launchSmallplug(function(data) {    
  // success callback    
}, function(error) {
  // error callback      
}, [
  targetEndpoint, //example: "discovery/all"
  params, //example: "count=11&minInvest=0-5000"
  headerColorHex, //example: "#2F363F"
  headerOpacity, //example: 1.0
  backIconColorHex, //example: "#2F363F"
  backIconOpacity //example: 1.0
]);

This will launch the smallcase distribution user-interface where a user would be able to place a smallcase order.

1920

🚧

Your brand logo is required for custom branding

Share the PNG logo of your brand with us, if not already shared by your team:

SDKHeightWidthRemark
Web40px98 to 240pxmonochrome color preferred (to be used over white bg)
Mobile16px32 to 96pxas per your brand color

Step 4 - Handle SDK response (on close of smallcase module)

When the user closes the smallcase module, the gateway SDK returns the following response -

/*
 * if user logged in with broker before closing the smallcase module,
 * connected user auth token is shared as `smallcaseAuthToken`.
 * 
 * more about auth tokens: https://developers.gateway.smallcase.com/docs/getting-started#broker-identification
 */
{
    "success": true,
    "smallcaseAuthToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzbWFsbGNhc2VBdXRoSWQiOiI2MjUxMjY4ZDBlZjczZjJlM2I1M2UyZmEiLCJpYXQiOjE2NDk0ODU0NjksImV4cCI6MTY0OTQ4OTA2OX0.mHbSc7XFX0E-5vPx5l4BMPJC9Zv0b7wcjJmbMKmiwMQ"
}

/*
 * if user closed the flow before broker login,
 * guest auth token is shared as `smallcaseAuthToken`.
 *
 * more about auth tokens: https://developers.gateway.smallcase.com/docs/getting-started#broker-identification
 */
{
  "success": true,
  "smallcaseAuthToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJndWVzdCI6dHJ1ZX0.CqynDZ2nS3aTAF9Ohdj6TZ7PZbKiYhPw1WzGM6fgwFs"
}
/*
 * if user logged in with broker before closing the smallcase module,
 * connected user auth token is shared as `smallcaseAuthToken`.
 * 
 * more about auth tokens: https://developers.gateway.smallcase.com/docs/getting-started#broker-identification
 */
{
    "success": true,
    "smallcaseAuthToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzbWFsbGNhc2VBdXRoSWQiOiI2MjUxMjY4ZDBlZjczZjJlM2I1M2UyZmEiLCJpYXQiOjE2NDk0ODU0NjksImV4cCI6MTY0OTQ4OTA2OX0.mHbSc7XFX0E-5vPx5l4BMPJC9Zv0b7wcjJmbMKmiwMQ"
}

/*
 * if user closed the flow before broker login, this is the response -
 */
{
  "success": true,
  "smallcaseAuthToken": undefined
}

smallcaseAuthToken is a (connected user auth token) used for user identification and returning user journeys (learn more).




FAQs

How can we display investment details in our UI before opening smallcase module?

While DM provides a ready-made UI which takes all possible user journeys, it is also possible to display some parts of the UI (list of smallcases, investment overview, etc) outside of the DM flow and directly in your app / website. You can use server-side data APIs to consume investment-related data and display it in your UI (outside of the smallcase Module).

How can we directly launch smallcase module on a page other than homepage?

Based on the user journey in your product, you might want to open smallcase module on some specific page. Say, users should view the discover page by default where all smallcase are listed. The same is possible by passing the URL endpoint & additional parameters (called URL params).

Pass relevant parameters in the function call to relevant smallplug method -

class SmallplugData {
  String? targetEndpoint;
  String? params;
}

SmallplugData smallplugData = new SmallplugData();
smallplugData.targetEndpoint = "discover/all";
smallplugData.params = "count=11&minInvest=0-5000";

ScgatewayFlutterPlugin.launchSmallplug(smallplugData)
class SmallplugData(
    val targetEndpoint: String?,
    val params: String?
)

SmallcaseGatewaySdk.launchSmallPlug(
  requireActivity(),
  SmallplugData(targetEndpoint = "discover/all", params = "count=11&minInvest=0-5000") , 
  object : SmallPlugResponseListener {
    override fun onSuccess(smallPlugResult: SmallPlugResult) {
      //success callback
    }
    override fun onFailure(errorCode: Int, errorMessage: String) {
      //error callback
    }
  }
)
@objcMembers public class SmallplugData: NSObject {
    public var targetEndpoint: String?
    public var params: String?
}

SCGateway.shared.launchSmallPlug(
  presentingController: self,
  smallplugData: SmallplugData(targetEndpoint: "discover/all", params: "count=11&minInvest=0-5000")
) {  (response, error) in 

   if(response != nil) {
     //success callback
   } else {
     //error callback
   }
}
gatewayInsance.openSmallplug({
  path: "discover/all",
  params: null
});

This will launch the smallcase distribution user interface at the specified route -

960

launching smallcase module with discover route as target endpoint

Supported endpoints

Endpointsdescription
blank (default)homepage
discover/allsmallcase discovery page
smallcase/<scid>smallcase profile page displaying details about particular smallcase
smallcase/<scid>/stockssame as smallcase profile, but with "stocks & weights" tab selected by default
details/<iscid>investment details for an invested smallcase
orders/<iscid>orders related to an invested smallcase
notificationsnotifications page
feesfees page displaying fees deducted for each of their investment

Note: some endpoints requires scid / iscid

Discover page: customize default smallcase filtering and sorting

discover endpoint support multiple parameter to filter & sort smallcases by default.

additional parameters to filter & sort smallcases
Param for filteringdescriptionexample
countnumber of smallcase to display in first loadcount=10&
minInvestfilter smallcase in a range of minimum investment amountminInvest=5000-8000&
riskfilter smallcase by their volatilty (can pass more than one volatility)- risk=low&
- risk=medium&
- risk=high&
recentlyLaunchedwhether to display recently launched smallcase (< 1 year since launch)recentlyLaunched=true&

Params for sortingdescriptionexample
sortOrdersort in ascending / descending- sortOrder=1&
- sortOrder=-1&
sortBysort by popularity- sortBy=popularity&
- sortBy=minInvestAmount&
- sortBy=rebalanceDate&
- sortBy=monthlyReturns&
- sortBy=halfyearlyReturns&
- sortBy=oneYearCagr&
- sortBy=threeYearCagr&
- sortBy=fiveYearCagr&