Widget

To use the widget on a page the javascript file containing the widget code must be included. There are two possible javascript files to include. Both are UMD modules which means that they can be included either with a simple script tag or using a module loading system like RequireJS. The difference between the files is that one doesn't contain ReactJS and instead expects global variables window.React and window.ReactDOM to reference the react and react-dom modules respectively.

The javascript file without ReactJS can be accessed at:

https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.min.js

The javascript file with all dependencies bundled can be accessed at:

https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout-all.min.js

Once one of the files has been included on the page you can access it depending on your method of inclusion. If you use a module loading system, refer to the standard way of accessing modules in that system. If you include the module with a script tag the module can be accessed through a global variable window.UnifaunCheckout.

To display the widget on a page and to get notified when a buyer makes choices in the widget, an instance of the widget must be created. An instance is created with the createAt function exported from the module.

var widget = UnifaunCheckout.createAt(containerElement, config;)

As argument containerElement pass an element selector as a string or a DOM element. The widget UI will be injected as a child to the containerElement.

The config argument must be a javascript object with any of these keys:

Once a widget instance has been created it can be used to control the widget. The methods available on the widget are:

A default style sheet can be injected into the page by setting the installCSS property in the widget configuration or by calling the installCSS method on the widget instance. The source of the injected style sheet in the form of a SASS file can be accessed at:

https://api.unifaun.com/rs-extapi/v1/delivery-checkouts-widget/unifaun-checkout.scss

There are two types of user interaction that affect the widget:

External changes

When first created and every time the user makes changes to one of the input variables sent to the /delivery-checkouts API this sequence of actions should occur:

// Disable widget while AJAX request is in progress.
widget.disable();
fetch(url).then(function(response) {
    return response.json();
}).then(function(data) {
    //Update the widget with new data.
    widget.updateList(data);
}).catch(function() {
    //Handle error
}).then(function() {
    //Always enable widget
    widget.enable();
});

Internal changes

Whenever the user selects one of the delivery checkout options or updates any value connected to the selected option, the resultCallback function in the widget configuration will be called. The callback function will receive a single argument in the form of a javascript object with the following properties: