Styling

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

User interaction

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

• External changes
• Internal changes

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 the widget with a call to the disable method.
• Make an AJAX request to the /delivery-checkouts API. The web shop backend will normally act as a proxy for this type of call so that a secret API key can be sent to the REST API.
• When a response arrives, call the updateList method and then enable the widget with a call to the enable method.

// 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: