Thru this functionality

Table of Contents

Objective:

outline	true

Introduction and Concepts

Through this function, users can create their own widget Widget to embebed embed in web sites in order to access KIBE IBE (KIU INTERNET BOOKING ENGINE) and it´s functionalities. This document will explain how to configure and show some examples for developers

Concepts

is a guideline to get content and connect to the application.

What is a Widget?

- it It is a form on HTML with .CSS that could can be embebed displayed into an iframe on the client´s web page or other sites.

Does KIU offer a widgetWidget?

- Yes, KIU when create the KIBE for clients, supply a standard widget, but maybe this not adjust to the website customer requirements and decide to create one.

Does the custom widget takes the general configuration of the KIBE?

- The widget MUST take the configuration and content of the site in order to be accomplish with the operating and commercial intends of the client. All this information reside on the KIBE backoffice that should be completely configurated at time of widget´s creation. During this document you will see the way . KIU provides a standard Widget once IBE has created, nevertheless it might not fit the web site´s corporate requirements, such as height, width, etc.

Is the custom Widget based on the IBE´s general configuration?

Yes, indeed the widget is based on the IBE configuration and site´s content in order to accomplish operative and commercial requirements. Previously mentioned information resides on the IBE´s Back office and should been completely configured once the widget created. Within this document, you will find some examples on how to connect your custom widget with the KIBE.

How to get content to build a widget.

When a user create a form in order to build a widget for KIBE, there are some mandatory fields that should had in order to send the minimal information to make it work and get content.

To get that content and the information required for the KIBE application to work, the developers have to add the next Script into the head tag of the form.

Code Block

language	actionscript3
theme	DJango

IBE.

Tip

title	Important

In order to make a POST to the flight search services it is necessary to add the host from where the widget is going to be served to the IBE's white listed sites and which IBE environment is going to point to. This information shall be sent to webservices@kiusys.com to be authorised

Tip

title	Important

In order for the carrier can use the custom widget it is necessary to add the following information in the carrier´s settings.

CSRF_TRUSTED_ORIGINS
ALLOWED_HOSTS

Both carrier DNS/HOST.

Uploading Content to Widget

Whenever a user creates a form in order to build a widget for KIBE, there are some mandatory fields that must be included in order to send the minimal information to make it work and retrieve content.
To get this content and the information required for the KIBE application to work, developers have added the following Script into the <head> tag of the form.

Code Block

language	actionscript3
theme	DJango

 <script>
                  success: $(document).ready(function(response){
formatResponse(response);},                $.ajax({
    dataType: "jsonp"               url:  });
"[KIBE URL domain]/api/get_complete_config_widget/?callback",
               //Ejemplo sobre como consumir la data
                functionsuccess: function(response){ formatResponse(response){;},
                    $("#csrfmiddlewaretoken").val(response.csrf_token);dataType: "jsonp"
                });
   $.each(response.airports.keys.origin, function(i,e){            //Example of how to consume the data
                function $("#id_origin").append("<option value='"+ e.data +"'>"+ e.value +"</option>")formatResponse(response){
                      $("#csrfmiddlewaretoken").val(response.csrf_token);
                 })                     $.$.each(response.airports.keys.destinationorigin, function(i,e){ 
                                  $("#id_destinationorigin").append("<option value='"+ e.data +"'>"+ e.value +"</option>")               
                    })
                 }   $.each(response.airports.keys.destination, function(i,e){ 
                });         </script>

- URL: It has to be declared the KIBE domain (This data is provided by KIU at time of KIBE creation for client) followed by the parameters /api/get_complete_config_widget/. (Ex: https://kibe-dev-xx.kiusys.net/api/get_complete_config_widget/).

This URL will return the next JSON API.

Code Block

language	css
theme	FadeToGrey

{
  "passengers": {
    "max_pax_allowed": 9,
    "pax_config": [         $("#id_destination").append("<option value='"+ e.data +"'>"+ e.value +"</option>")               
         {         "max_age": null, })
       "enable": true,        }
"name": "ADULT",         "min_age": 12
      },});
      {         "max_age": 12,
        "enable": true,
   </script>

URL: The KIBE domain has to be declared (this data is provided by KIU once KIBE is created), followed by the parameters /api/get_complete_config_widget/?callback.

(e.g.: https://kibe-dev-xx.kiusys.net/api/get_complete_config_widget/?callback).

This URL will return the following response on JSON format:

Code Block

language	css
theme	FadeToGrey

{  "passengers": {
    "namemax_pax_allowed": "CHILD"9,
        "minpax_ageconfig": 2
    [
 },       {
        "max_age": 2null,
        "enable": true,
        "name": "INFANTADULT",
        "min_age": 012
      },
      {
  ]   },   "csrfmax_tokenage": "vgTgLRd6L1XKeeJdWdMSPDOhyUURzF02XJUl0CarwNc3ABHAQeWdMkmgi93QMVOI"12,
  "airports": {     "keysenable": true,
 {       "originname": ["CHILD",
        {
"min_age": 2
      },
   "code": "AEP",  {
        "datamax_age": "QUVQ"2,
          "valueenable": true,
 "BUENOS AIRES (BUE), JORGE NEWBERY AIRPORT (AEP), Argentina"
 "name": "INFANT",
       } "min_age": 0
    ],  }
    "destination]
  },
  "csrf_token": "vgTgLRd6L1XKeeJdWdMSPDOhyUURzF02XJUl0CarwNc3ABHAQeWdMkmgi93QMVOI",
  "airports": {
    "keys": {
      "origin": [
        {
          "code": "MDQAEP",
          "data": "TURRQUVQ",
          "value": "MARBUENOS DEL PLATAAIRES (MDQBUE), ASTORJORGE PIAZZOLANEWBERY AIRPORT - MERY (MDQ(AEP), Argentina"
        }
      ],
      "destination": [
        {
          "code": "LASMDQ",
          "data": "TEFTTURR",
          "value": "LASMAR DEL VEGASPLATA (LASMDQ), MCCARRANASTOR INTERNATIONALPIAZZOLA AIRPORT - MERY (LASMDQ), United StatesArgentina"
        },
        ]{
    }   },   "origin_destinationcode": {"LAS",
    "keys": [     "data": "TEFT",
 {         "originvalue": "AEP"LAS VEGAS (LAS), MCCARRAN INTERNATIONAL AIRPORT (LAS), United States"
  "destination": "MDQ",      }
     "not_flying_days_return": [],
    }
  },
  "not_flying_days_goingorigin_destination": [],
   {
    "frequency_returnkeys": [
      {
   0,           1"origin": "AEP",
          2"destination": "MDQ",
          3"not_flying_days_return": [],
          4,
          5,
          6
        "not_flying_days_going": [],
        "frequency_goingreturn": [
          0,
          1,
          2,
          3,
          4,
          5,
          6
        ],
        "directfrequency_flygoing": false [
          0,
 }     ]   }
}

Response dictionary:

Key	Description	Values / Format
Passengers	Hold and object with the configuration of the passenger types supported and max.quantity allowed.	Objecto
max_pax_allowed	This key contain the max. quantity passengers allowed.	Integer
pax_config	It is an object with with the configuration allowed for categories of passenger types. These are: ADULT, CHILD and INFANT.	Objecto
max_age	Related to the max. age allowed per passenger category. It is inside the pax_config node.	Integer / null
enable	This is a toggle that indicate if a category is enable or disable. It is inside pax_config node.	true / false
name	This is the name of the passenger category. It is inside pax_config	ADULT / CHILD / INFANT
min_age	The minimum age allowd for each category. It is inside the pax_config pax_config node	Integer
csrf_token	This is the hash for validation purposes that must be include on the form submit.	HASH
airports	It is an object that contain the information of valid airports set for customer. This information is offer for validation purposes of the form at client level. (Front-end validation).	Object
keys	Object. List of origins - destinations set on back office as allowed routes. This key is inside the object airport. Represent which origin to which destination is allowed to request content.	Object
origin	List of enable airports for origin exclusively. This field is inside Keys node.	Array
code	ISO IATA airport code for origin field. This key is inside the Origin node.	3 Alphabetical chars
data	This is internal for KIBE uses only!.	4 Alphabetical chars
value	Description associated to the airport code. This key is inside the Origin node.	Alphabetical
destination	List of enable airports for destination exclusively. This fiel is inside Keys node.	Object
code	ISO IATA airport code for origin field. This key is inside the Origin node.	3 Alphabetical chars
data	This is internal for KIBE uses only!.	4 Alphabetical chars
value	Description associated to the airport code. This key is inside the Origin node.	Alphabetical
origin_destination	Object. List of routes enables for commercialization into the back-Office of KIBE.	Object
keys	List of objects that contain the pair of airports enables to offer. This key is inside the origin_destination node.	Array
origin	ISO IATA Airport code corresponding to the origin. It is inside the Keys node.	3 Alphabetical chars
destination	ISO IATA Airport code corresponding to the destination. It is inside the Keys node.	3 Alphabetical chars
not_flying_days_return	List of week days that return flight is not enable to operate. It is inside the Keys node.	0 to 6 (0:Monday; 1; Tuesday..etc.)
not_flying_days_going	List of week´s days that origin flight is not enable to operate. It is inside the Keys node.	0 a 6 (0: Monday; 1:Tuesday....etc.)
frequency_return	List of days of a week that return flight is enable to operate. It is inside the Keys node.	0 a 6 (0: Monday; 1:Tuesday....etc.)
frequency_going	List of days of week days that the origin flight is enable to operate. It is inside the Keys node.	0 a 6 (0: Monday; 1:Tuesday....etc.)
direct_fly	Toggle that display if the flight is direct of allows connections.	true / false

Developers based on this response have the enough data to build/display content on widget fields like:

Origin - Destination: Populate the airports on the origin field and the destination field. Create a validation for pair of airports enables for search.
Travel Type: Create a routine to allow user to search one way and round trips travels depending the enabled routes.
Travelers: List of supported passenger types and the ages for limit and validate each of them.
Departure and return Date: Create field that allow user to add departure date and return date in case the Round trip flights is enabled.

Search Flights:

At time to process the form and redirect to the KIBE, into the form tag on the action attribute, the target URL must be the KIBE domain and the method tag, need to be 'POST'.

Ex

 1,
          2,
          3,
          4,
          5,
          6
        ],
        "direct_fly": false
      }
    ]
  },
  "country_settings": {
    "label_en": "Currency",
    "label_es": "Moneda",
    "currency_config": [
      {
        "country_setting": 1,
        "ISO_currency": "ARS",
        "ISO_country": "AR",
        "description_es": "Peso Argentino - ARS $",
        "description_en": "Argentine Peso - ARS $",
        "device_id": "MIA00XXW01",
        "agent_sine": "MIA00XXAB",
        "default": true,
        "enabled": true
      },
      {
        "country_setting": 2,
        "ISO_currency": "UYU",
        "ISO_country": "UY",
        "description_es": "Peso Uruguayo - UYU $",
        "description_en": "Uruguayan Peso - UYU $",
        "device_id": "MIA00XXW01",
        "agent_sine": "MIA00XXAB",
        "default": false,
        "enabled": true
      },
      {
        "country_setting": 3,
        "ISO_currency": "CLP",
        "ISO_country": "CL",
        "description_es": "Peso Chileno - CLP $",
        "description_en": "Chilean Peso - CLP $",
        "device_id": "MIA00XXW01",
        "agent_sine": "MIA00XXAB",
        "default": false,
        "enabled": false
      }
    ]
  },
  "type_of_journey": {
    "one_way": true,
    "round_trip": false
  }
}

Response Dictionary

Key	Description	Values / Format
Passengers	Supported passenger types and maximum quantity allowed.	Object
max_pax_allowed	Maximum quantity of passengers allowed.	Integer
pax_config	Supported passenger types (ADULT, CHILD and INFANT).	Object
max_age	Maximum age allowed per passenger category. It is within the pax_config node.	Integer / null
enable	Toggle that indicates if a category is enabled or disabled. It is within the pax_config node.	true / false
name	Name of the passenger category. It is within the pax_config node.	ADULT / CHILD / INFANT
min_age	Minimum age allowed for each passenger category. It is within the pax_config node.	Integer
csrf_token	Hash for validation purposes that must be included in the form submit.	HASH
airports	Object that contains the information of valid airports set for customer. This information is offered for validation purposes (Front-end validation).	Object
keys	List of origins-destinations set on Backoffice as allowed routes. This key is within the object airports. It represents which origin to which destination is allowed to request content.	Object
origin	List of enabled origin airports only. This field is within keys node.	Array
code	ISO IATA origin airport code. This key is within the origin node.	3 Alphabetical chars
data	This is for internal KIBE purposes only.	4 Alphabetical chars
value	Associated description of the airport code. This key is within the origin node.	Alphabetical
destination	List of enabled destination airports only. This field is within keys node.	Object
code	ISO IATA destination airport code. This key is within the destination node.	3 Alphabetical chars
data	This is for internal KIBE purposes only.	4 Alphabetical chars
value	Associated description of the airport code. This key is within the destination node.	Alphabetical
origin_destination	List of enabled commercial routes set in the KIBE Backoffice.	Object
keys	List of objects that contains the offered pair of airports enabled. This key is within the origin_destination node.	Array
origin	ISO IATA origin airport code. It is within the keys node.	3 Alphabetical chars
destination	ISO IATA destination airport code. It is inside the keys node.	3 Alphabetical chars
not_flying_days_return	List of week days for return flights not enabled to operate. It is within the keys node.	0 to 6 (0: Monday; 1: Tuesday, etc.)
not_flying_days_going	List of week days for origin flights not enabled to operate. It is within the keys node.	0 to 6 (0: Monday; 1: Tuesday, etc.)
frequency_return	List of week days for return flight enabled to operate. It is within the keys node.	0 to 6 (0: Monday; 1: Tuesday, etc.)
frequency_going	List of week days for origin flights enabled to operate. It is within the keys node.	0 to 6 (0: Monday; 1: Tuesday, etc.)
direct_flight	Toggle that displays if the flight is direct or allows connections.	true / false
date_from	First available date for route. The field is within keys node.	DD/MM/YYYY
date_to	Last available date for route. The field is within keys node	DD/MM/YYYY
country_setting	Object that contains configurations for currency and countries	Object
label_es	Label for Spanish that contains information of currency/country	50 alphanumeric characters
label_en	Label for English that contains information of currency/country	50 alphanumeric characters
currency_config	Is an object with the configuration needed by the field DESCRIPTION of the country_settings table records allowed in RES for the parameters: DEVICE, USER, ISO_COUNTRY and ISO_CURRENCY	Object
country_setting	Code for country settings registry. The field is within currency_config object	Numeric
ISO_currency	Currency code for quotation in KIU RES. The field is within currency_config object	3 alphabetic characters
ISO_country	Country code for quotation in KIU RES. The field is within currency_config object	2 alphabetic characters
description_es	Spanish description of the registry. The field is within currency_config object	50 alphanumeric characters
description_en	English description of the registry. The field is within currency_config object	50 alphanumeric characters
device_id	Device id used in KIU RES. The field is within currency_config object	10 alphanumeric characters
agent_sine	User id used in KIU RES. The field is within currency_config object	9 alphabetic characters
default	Field that declares default registry. The field is within currency_config object	true / false
enabled	Field that declares whether the registry is displayed or not. The field is within currency_config object	true / false
type_of_journey	Contains object with the default type of journey.	Object
one_way	Controls default selection of One Way trip at the front end.	true / false
round_trip	Controls default selection of Round Trip trip at the front end.	true / false

Based on this response, developers have enough data to build display content on Widget fields

Origin and destination
Available routes/dates
Types of passengers
Quantity of passengers
Type of travel (One Way or Round Trip)
Currency/country

Form

Submit [ POST ]

The form will communicate with KIBE through a simple SUBMIT of the carrier's HOST

Authorisation Form

For making a POST / SUBMIT in KIBE's form, it's mandatory to received the field csrfmiddleware token with the API's HASH in the field csrf_token. If the HASH is not received, KIBE will respond to the request with 403 Forbidden.

Expected Fields

KIBE application will expect the following fields in order to proceed with the flight search/quotation

Field names should be respected when the POST is done in order to have a proper quotation and flight search

Field Name	Description	Values/Format
csrfmiddlewaretoken	Authorisation HASH	HASH
one_way	If oneway parameter will be sent as true, if roundtrip it won't be sent.	True
origin	IATA airport code for origin	4 alphabetic characters
destination	IATA airport code for destination	4 alphabetic characters
departure_date	Departure date	DD/MM/YYYY
return_date	Arrival date, if it is oneway this field should be empty.	DD/MM/YYYY
adults	Amount of adult passengers, at least one should be sent for search and quotation	Numeric
minors	Amount of child passengers, if none it should be sent as 0	Numeric
infants	Amount of infant passengers, if none it should be sent as 0.	Numeric
country_setting	Unique identification of the country setting registry	Numeric

WebAssembly

To ensure that purchase requests are only from a certified URL and only from a browser. The use of a component responsible for generating an immediate token to send it in the submit of the form is implemented. This is valid for use only once. Therefore, in order to resend a valid token, it is necessary to update the browser.

The token generated by webassembly has a finite validity, configurable from the kibe backend. By default it has 180 seconds. This means that once the search has been performed and the list of available flights has been obtained, the screen can be updated or the date changed with the carousel, for 3 minutes (configurable time).

To insert this functionality, you need:

Add wasm-load class to the form element used to send the data to kibe:
- It should be:

Code Block

language	xml
theme	FadeToGrey

<form class="searcher wasm-load" ...

Get url corresponding to the carrier for example: https://kibe-stage-xx.kiusys.net/static/wasm:
This url is a product of the union between the submit url and the path / static / wasm. So for any carrier, you only need to change the xx for your IATA code
Insert the link style in the html head element:

Code Block

language	xml
theme	FadeToGrey

<link rel="stylesheet" type="text/css" href="https://kibe-stage-xx.kiusys.net/static/wasm/wasm.css">

Add polyfill script tags needed to address compatibility with browsers that don't support ECMA6:
It must be in the html head element

Code Block

language	xml
theme	FadeToGrey

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=blissfuljs%2Cdefault%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces5%2Ces6%2Ces7%2CBlob%2CArray.prototype.forEach"></script>

Add the following scripts tags to the end of the body element using the previously obtained url:

Code Block

language	xml
theme	FadeToGrey

<script type="text/javascript">   document.addEventListener("DOMContentLoaded", function(event) {     var ua = window.navigator.userAgent; if ( ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1) { alert('This website does not support your current version of your web browser') }   }); </script> <script type="text/javascript"> const WASM_URL = "https://kibe-stage-xx.kiusys.net/static/wasm"; </script> <script type="text/javascript" src="https://kibe-stage-xx.kiusys.net/static/wasm/wasm_load.js"></script>

Search Flights

When processing the form in order to redirect to KIBE, the <form> tag must include:

action: Target URL must be the KIBE´s domain.
method: Must be POST.

Example:

Code Block

language	xml
theme	FadeToGrey

 <form class="searcher" id="search-form" name="searchWidgetForm" action="https://kibe-dev-xx.kiusys.net/" method="POST">

Declared this, when Once the user click over the clicks on submit button, the KIBE will gather all the parameters to execute the query: (Origin, Destination, DepartureDate, ReturnDate (If it´s exists), Adults quantity, Childs quantity, infants quantity. The result of the seach will be display into the KIBE´s result page and complete the booking flow, normally.

Anexo 1:

Validations recommended:

So far the KIBE has Departure date, Return date - If it exists - , Adult quantity, Child quantity, Infant quantity) and will then process the request and display the results into the KIBE´s environment. Once this process has been completed the regular booking-payment flow will be followed.

Suggested Validations

Despite of KIBE´s back-end validations, we strong recommend strongly advice developers to developers pay attention to some validation on the frontother front-end side that will make the process more efficient: validations that could help to process´ efficiency:

Origin - Destination:
The response of the JSON API return the response returns routes enabled for search, this routes are configured on the KIBE´s back office of the KIBE. Based on this information, developer developers can allow only search searches that include an origin with only those destination airports that match and be returned on the responseon response.
The value provided to KIBE must be the one given in the API under the name "data" and not the code.
Dates:
The supported date format supported is DD-MM-YYYY. Developer Developers can display dates on different format that feels formats in order to make the user experience more comfortable for user experience, but , they need to transform change dates on the mentioned format mentioned in order to avoid any validation error returned from by KIBE.
Departure Date:
The departure Departure date must can be from current date in advance and not beyond the day in which the request is being made up to a maximum of 330 days in futureadvanced.
ReturnDate:
The return date should be validating to be never must not be before departure date and not beyond cannot exceed 330 days in the future.
Adult Passenger:
We recommend that the to set as default value for adult passenger should be 1 and not allowed 0. This will avoid any possibility for unaccompanied passengers in "1" and that it should not allow "0". This will prevent the creation of bookings for unaccompanied minors (this should be resolved on Airline offices).
Infant passengers:
For According to industry logic, there should be at least only one infant passenger per adult for infant passenger only. If there are is more than one infant it per adult passenger, there must be more than one adult passenger for association purposes.

One way / Round trip:
The post of this value must be "one_way" with the value true or false depending if it is one way (true) or round trip (false)

Version	Old Version 14	New Version Current
Changes made by	Gerardo Nizetich (Deactivated)	Yulmah Betancourt (Deactivated)
Saved on	Feb 19, 2018	Feb 13, 2020

Page Comparison

Versions Compared

Key

Objective:

Introduction and Concepts

Concepts

How to get content to build a widget.

Uploading Content to Widget

Search Flights:

Response Dictionary

Form

Submit [ POST ]

Authorisation Form

Expected Fields

WebAssembly

Search Flights

Anexo 1:

Validations recommended:

Suggested Validations