Review your Order

Payment Options

Integration Instructions

Startup Parameters
The startup parameters are sent in your POST message to retrieve the widget code. For more information, see our page on startup options.

display	fill	Ensures the widget fills the container it is placed in, rather than full screen or modal
headerStyle	3	Removes the header, for appearance purposes
closeBehavior	0	Prevents the user from closing the widget or performing any action once successfully enrolled

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_DemoEmbedded() {
    try {
        // Startup Parameters - Here you will include your clientId, clientSecret, and customerId
        var postData = new {                
            display = "fill",
            demo = 2,
            headerStyle = 3,
            closeBehavior = 0
        };

        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

<!-- Loading Message -->
<div id="widget_demo_embedded_loading">
    <img src="~/images/Loading_Green.gif" />
    <span>Loading banks, please wait...</span>
</div>

<!-- Widget Container -->
<div id="widget_demo_embedded_widget"></div>

Javascript

// This example uses JQuery

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

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

        // Launch the widget immediately after it is loaded
        Cashflow.open();

        // Hide the loading message
        $('#widget_demo_embedded_loading').hide();
    }

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

CSS

/* Specify the dimensions of the widget on your page */
#widget_demo_embedded_widget {
    height: 200px;
    width: 100%;
    max-width: 750px;
    min-width: 300px;
}

/*  Loading message while the widget is loading */
#widget_demo_embedded_loading {
    padding-left: 20px;
}