Manage your Accounts

Integration Instructions

Startup Parameters
There are no startup parameters required (aside from your credentials and customer information) to launch this widget, unless your settings differ from the defaults. To ensure that the widget is loaded properly in case your settings do differ from the defaults, the following parameters can be included:

display	modal	Ensures the widget loads as a modal or full screen for mobile devices, rather than embedded into a constrained container. See more on display options.
headerStyle	0	Displays the header with text and a close/back button
closeBehavior	1	Allows the user to close the widget

The following startup parameters are also required to launch the widget. These parameters are not used in the demo - instead, demo: 2 is used to indicate that this widget is in demo mode, which does not require the following parameters.

clientId	***	Although this example uses the demo parameter rather than client id, you will need to provide your client id to launch the widget
clientSecret	***	Although this example uses the demo parameter rather than client id and secret, you will need to provide your client secret
customerId	***	You will need to pass in the customerId of the user who is using the widget. Not required for demo

Server-side function in ASP.NET Controller

[HttpGet]
public string LaunchWidget() {
    try {
    // Startup Parameters - Here you will include your clientId, clientSecret, and customerId
        var postData = new {                
            display = "modal",
            demo = 2,
            headerStyle = 0,
            closeBehavior = 1
        };

        var postJson = JsonConvert.SerializeObject(postData);

    // Specify your widget URL - This URL may be different depending on your integration
        string uri = "https://appservices.followthefrog.com/v3/test/widget/";

    // Initiate the call to retrieve the widget code
        WebClient client = new WebClient();
        client.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";

        string result = client.UploadString(new Uri(uri), "merchant=" + postJson);

    // Return the result as a string back to the client.
        // The client will inject this result into the page content
        return result;
    }
    catch (Exception e) {
        return e.Message;
    }
}

Code added to your webpage

    <!-- Widget div - This is placed directly below the BODY tag -->
    <div id="widget_demo"></div>
    
    <!-- Launch button -->
    <button class="btn btn-disabled" id="widget_button">
        <img src="/images/loading.gif" />
        Please Wait...
    </button>

Javascript

// This example uses JQuery

// Make a GET call to your server-side function
$.get('/Widgets/LaunchWidget', function (resp) {
    
    // Inject the response into the widget container
    $('#widget_demo').html(resp);

    // Handle the ready event
    Cashflow.ready = function () {

    // Change the button and set it's click event
        $('#widget_button').removeClass('btn-disabled');
        $('#widget_button').addClass('btn-success');
        $('#widget_button').html('Add Bank Account');
        $('#widget_button').on('click', Cashflow.open);
    }

    // Initialize the widget, specifying it's container name
    Cashflow.init({ target: $('#widget_demo') });

    // Handle the onEnrollmentSuccess event so we can update the interface
    Cashflow.onEnrollmentSuccess = function (id, data) {
        // Here you will add code to update your interface with the new account    
    }
});