How to Integrate the Web SDK into a Xamarin App

Integrate the Web Client SDK into your Xamarin app to collect device data cross platforms. This integration process requires a WebView which calls the Web SDK.

Prerequisites

  • Your assigned Merchant ID

  • Session ID

  • WebView

Integrating the Web SDK into a Xamarin Application

  1. In the Page.xaml for your Xamarin project, add a WebView using the following code:

    <WebView x:Name="webView" IsVisible="false"/>
  2. In the Page.xaml.cs file, create a HtmlWebViewSource Object:

    HtmlWebViewSource htmlWebViewSource = new HtmlWebViewSource();
  3. Define the htmlWebViewSource HTML method and assign the webView Source method:

        htmlWebViewSource.Html =
        $"<html>" +
        $"<body class='kaxsdc' data-event='load'>" +
        $"<script src='https://ssl.kaptcha.com/collect/sdk?m={merchantID}&s={sessionID}'</script>"> +
        $"<script type='text/javascript'>"+
        $"var client = new ka.ClientSDK();client.autoLoadEvents();"
        $"</script>" +
        $"</body>" +
        $"</html>";
        webView.Source = htmlWebViewSource;
        

    Note: The class=”kaxsdc” and data-event=”load” attributes are required to add in the body tag of the HTML string.

  4. In the script src, add the merchantID and sessionID.

    • merchantID – Kount assigned Merchant ID (example: 900900)

    • sessionID – Unique ID of the current session

  5. To initiate the DDC using a required event – like a button click event – call the following function.

        private void StartCollection(object sender, EventArgs e) {
              string merchantID = "900900"; //Kount given merchant id
              string sessionID = Guid.NewGuid().ToString().Replace("-", "");
              HtmlWebViewSource htmlSource = new HtmlWebViewSource();
              htmlSource.Html =
              $"<html>" +
              $"<body class='kaxsdc' data-event='load'>" +
              $"<script src='<https://ssl.kaptcha.com/collect/sdk?m={merchantID}&s={sessionID}'></script>"> +
              $"<script type='text/javascript'>"+
              $"var client = new ka.ClientSDK();client.autoLoadEvents();"
              $"</script>" +
              $"</body>" +
              $"</html>";
              webView.Source = htmlSource;
          }
        
    <Button Text="Click to start" Clicked="Start Collection"/>

Testing the SDK

Add the following string in a script tag of HTML source (refer to the StartCollection function) to test if the device data has been collected successfully.

private void StartCollection(object sender, EventArgs e) {
      string merchantID = "900900"; //Kount given merchant id
      string sessionID = Guid.NewGuid().ToString().Replace("-", "");
      HtmlWebViewSource htmlSource = new HtmlWebViewSource();
      htmlSource.Html =
      $"<html>" +
      $"<body class='kaxsdc' data-event='load'>" +
      $"<script src='<https://ssl.kaptcha.com/collect/sdk?m={merchantID}&s={sessionID}'></script>"> +
      $"<script type='text/javascript'>"+
      $"var KountSDK = function() {{var client = new ka.ClientSDK();client.autoLoadEvents();client.setupCallback({{'collect-begin': function(params) {{console.log('collect-begin');console.log(params);console.log(params['MercSessId]);}},'collect-end' : function(params) {{console.log('collect-end');console.log(params); console.log(params['MercSessId]);}}}});}};KountSDK();";
      $"</script>" +
      $"</body>" +
      $"</html>";
      webView.Source = htmlSource;
   }

Note: The session ID received from the call should be the same as the session ID created and sent in the Web SDK.

Was this article helpful?
6 out of 6 found this helpful