The Checkout widget provides a rich user interface that interacts with the GFS Checkout service in order to provide a wide range of easily configured delivery options. 

In the event that the Checkout widget is unable to access the backend GFS Servers to retrieve service information, the widget can be configured to offer a single service to allow the customer to complete their checkout. This is accomplished using the six 'default' fields defined in the table below.

Attributes

Property	Description
inc-std	Determine if the standard delivery services will be included in the checkout request. Defaults to false. (Boolean)
inc-day-def	Determine if the day definets will be included in the checkout request. Defaults to false. (Boolean)
inc-drop-point	Determine if the droppoints will be included in the checkout request. Defaults to false. (Boolean)
inc-stores	Determine if the stores will be included in the checkout request. Defaults to false. (Boolean)
use-standard	Determine if the standard (non-day-definite) options are shown if there are non-day-definite services available. Defaults to false. (Boolean)
use-calendar	Determine if the calendar (day definite) options are shown if there are day-definite services available. Defaults to false. (Boolean)
use-droppoints	Determine if the drop point options are shown, if drop point services are available. Defaults to false. (Boolean)
use-droppoints-stores	Delivery method that provide the available store based on postcode combined in with the droppoints on the same map. Defaults to false. (Boolean)
checkout-token	The Java Web Token (JWT) provided by the identity server to enable the widget to communicate with the GFS Checkout servers. The JWT must be Base64 encoded. See the security section for more information on authentication and obtaining this token. This attribute is mandatory.
checkout-request	This attribute is used to populate the cart and order details in the widget, so that the best delivery options can be presented. For more details see below. This attribute is mandatory.
checkout-results	Used to hold the 'select' value from the service. Important for close checkout API call.
sessionid	Used to store the sessionID for close checkout method.
checkout-data	Used to store the closeCheckout JSON for close checkout method. If the widget reports an error, then the value in the property close-checkout-error will be returned. If no error exists the JSON will be in the format {"closeSession":true,"selectedDeliveryOptionID":"D4S4","selectedDroppointId":null}.
default-delivery-method	Determines the initially selected delivery option, 0 for non-day-definite, 1 for day-definite or 2 for drop point. Defaults to 0.
service-sort-order	If multiple services are available within a category, determines the order in which they are presented to the customer. One of cheapestFirst, fastestFirst, expensiveFirst, slowestFirst. Defaults to cheapestFirst.
standard-delivery-title	Title displayed for the standard (non-day-definite) section. Defaults to 'Standard Delivery'.
calendar-delivery-title	Sets the title for the calendar delivery option. Defaults to 'Choose a delivery date and time'.
calendar-day-prompt	Sub-heading text displayed under the calendar control, before the services. Defaults to 'Select one of the following deliveries time:'.
calendar-day-non-prompt	Sub-heading text displayed under the calendar control, if no available service on selected date. Defaults to 'Please select a delivery date.'.
drop-point-delivery-title	Sets the title for the drop point delivery option. Defaults to "Click and Collect".
orientation	Set tabs disposition. Possible values are 'horizontal|vertical'. Also effect the droppoint/store list UI. Defaults to 'horizontal'.
initial-address	Initial address to be used for the drop point map; this may be different to the delivery address specified in the 'checkout-request' attribute.
currency-symbol	The currency symbol to use when displaying costs. Defaults to '$'.
default-description	The name of the default service to be offered to the customer in the event that the widget cannot contact the GFS Checkout servers.
default-carrier	The default carrier to be offered to the customer in the event that the widget cannot contact the GFS Checkout server.
default-price	The price of the default service to be offered to the customer in the event that the widget cannot contact the GFS Checkout server. ex.: default-price='[{"currency": "GBP", "price": 2.22}]'.
default-min-delivery-time	The minimum delivery time in days of the default service to be offered to the customer in the event that the widget cannot contact the GFS Checkout server.
default-max-delivery-time	The maximum delivery time in days of the default service to be offered to the customer in the event that the widget cannot contact the GFS Checkout server.
default-int-description	The name of the default international service to be offered to the customer in the event that the widget cannot contact the GFS Checkout servers.
default-int-carrier	The default international carrier to be offered to the customer in the event that the widget cannot contact the GFS Checkout server.
default-int-price	The price of the default international service to be offered to the customer in the event that the widget cannot contact the GFS Checkout server. ex.: default-price='[{"currency": "GBP", "price": 13.50}]'.
default-min-delivery-time	The minimum delivery time in days of the default international service to be offered to the customer in the event that the widget cannot contact the GFS Checkout server.
default-int-max-delivery-time	The maximum delivery time in days of the default international service to be offered to the customer in the event that the widget cannot contact the GFS Checkout server.
home-map-icon	Url of an image to be used for 'home' on the drop point map view.
store-map-icon	Url of an image to be used for 'stores' on the drop point map view.
allow-calendar-preselect	Determine if there will be a pre-select service for the nonDayDefinites. Defaults to true. (Boolean)
show-calendar-no-services	Display a notification message if the selected day has no available services. Defaults to false. (Boolean)
calendar-no-services	Sets a notification messages if no services on selected date. 'show-calendar-no-services' must be set to true. Defaults to 'There are no services available on this day'.
calendar-theme	Use this property to override the default calendar theme. You can choose one from the 3 pre-existing themes for the calendar. Available values are 'light-blue', 'light-grey', 'dark'.
day-labels	Sets the calendar week days. Can also be used to localize the days. Default set to day-labels='["Su","Mo","Tu","We","Th","Fr","Sa"]'. Order must remain as it is.
month-labels	Sets the calendar months. Can also be used to localize the months. Default set to month-labels='["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]'. Order must remain as it is.
disabled-dates	Disable specific dates. ex. disabled-dates="[4, 10, 12, 19, 30]". A day that have available services will override this.
disable-prev-days	Disable previous visible month days. ex.: disable-prev-days="true". Default set to false.
disable-next-days	Disable next visible month days.  Default set to false.
calendar-hight-lighted-bg	Set the background color on the calendar, for days that have deliveries. Can be HEX, RGB(A), HSL(A) or color name. Defaults to "#828181".
calendar-hight-lighted-color	Set the color on the calendar, for days that have deliveries. Can be HEX, RGB(A), HSL(A) or color name. Defaults to "#fff".
calendar-selected-day-bg	Set the background on the calendar, for the selected day. Can be HEX, RGB(A), HSL(A) or color name. Defaults to "#006df0".
show-opening-hours	This atttribute is to display the opening hours of the droppoint or the store. Default set to true.
show-distance	This atttribute is to display the distance from the home location to the selected droppoint or store. Default set to true.
is-standard-button	Show or hide the "select" button on the droppoint or store list. Default set to "true".
display-button-text	Sets the text button on the droppointor store list. Default set to "Select".
display-button-deselected-text	Sets the text button on the droppoint or store list. Default set to "Deselect".
postcode-search-result-text	Display a text, under the map search form with the latest search data. Default set to "Last searched postcode:".
droppoint-sort-list	Option to sort the droppoint list based on the following properties: distance, carriername. Defaults to distance.
show-duty-message	Show a message with the tax and duty calculated or included price for each service. Default set to true.
tax-and-duty-type	This attribute is used to define what level of duty & taxes you wish to present. This can be set to "estimate" or "charge". Estimate will populate a message with the 'tax-and-duty' value if was set and charge will add the value on each service price. Default set to "estimate".
tax-and-duty	This is the value returned from the dutyandtax API call, it is passed in the currency provided i.e. if GBP is sent GBP will return. if this value is <= 0 will be ignored. Default set to 0.

Events

Event	Description
selectedServiceChanged getStandardSelectedService getCalendarSelectedService getDroppointSelectedService	Fired when the user changes the selected delivery options. The event payload is a JSON object detailing the newly selected delivery options.
dateSelected	Fired when the user selects a day in calendar. This event will return the available services for the selected day.
prevmonth, currMonth, nextmonth	Fires when the user change the moth in the calendar. This event will return the days for the next or previous month.
droppoint-changed	Fires when the user select a droppoint in the map. This event will return the available info for the selected droppoint.
store-changed	Fires when the user select a store in the map. This event will return the available info for the selected store.

Response JSON

The widget uses a JSON object to return the selected service details via the payload of the selectedServiceChanged event and the getChosenServiceDetails method.

Example

See the Pen Main Checkout Widget by PETER LIU (@globalfreight) on CodePen.

Populating the order details

In order to present delivery options to the customer, the widget needs details of the order in order to filter the available services. This data is passed as a Base64 encoded JSON string in the 'checkout-request' attribute of the widget. The tables below detail the types that comprise the JSON. 

The Request Object

The Request object is the root for the hierarchy that is passed into the widget.

Field Name	Required	Example value
options.startDate	Mandatory	2021-01-14
options.endDate	Mandatory	2021-03-23
options.currency	Mandatory	GBP
options.droppoints.max	Optional	20
options.droppoints.radius	Optional	50000
options.stores.max	Optional	30
options.stores.radius	Optional	30000
order.delivery.origin.street	Optional	GFS, Piries Place
order.delivery.origin.city	Optional	Horsham
order.delivery.origin.state	Optional	West Sussex
order.delivery.origin.zip	Mandatory	RH12 1EH
order.delivery.origin.country	Mandatory	GB
order.delivery.destination.street	Optional	GFS, Unit 3 Taurus Park
order.delivery.destination.city	Optional	Warrington
order.delivery.destination.state	Optional	Cheshire
order.delivery.destination.zip	Mandatory	WA5 7ZT
order.delivery.destination.country	Mandatory	GB
order.packs	Optional	15
order.price	Mandatory	165.32
order.additionalData[x].name	Optional	Additionalvaluename123
order.additionalData[x].value	Optional	Mandatory for every order.additionalData[0].name provided
order.items[X].countryOfManufacture	Optional	EU
order.items[X].description	Mandatory	Item description free text
order.items[X].price	Mandatory	11.25
order.items[X].dimensions.unit	Optional	cm
order.items[X].dimensions.length	Optional	15
order.items[X].dimensions.height	Optional	56
order.items[X].dimensions.width	Optional	24
order.items[X].weight.unit	Optional	g
order.items[X].weight.value	Optional	764
order.items[X].productCode	Mandatory	ProdCode123
order.items[X].sku	Optional	SKU-123
order.items[X].quantity	Mandatory	15
order.items[X].additionalData[x].name	Optional	Additionalitemvaluename123
order.items[X].additionalData[x].value	Optional	Mandatory for every order.items[X].additionalData[0].name provided
order.items[X].hazardous[X]	Optional	Hazard-C3