Table of Contents

outline	true

Introducción y Conceptos

...

Introduction and Concepts

Through this guide, developers will be able to create their own widgets to embed in the web sites and from it, access via parameters to the E-COMMERCE booking.

Este documento es una guía para el desarrollador web, que explica como obtener y conectar el Widget desarrollado con el motor de reservas.

...

Seach flight: Dedicado únicamente para la búsqueda de vuelos y generado de reservas.

...

Otros formularios embebidos: Servicios foráneos, como reservas de hoteles, alquiler de autos, etc.
Para habilitar esta opción, se necesita enrolar la aplicación en cuestión al listado de aplicaciones pertenecientes al cliente.

Que es un widget?

Es una aplicación pequeña que se incluye en la web del cliente, con el objetivo de ampliar la funcionalidad que ofrece E-COMMERCE booking.

Ofrece KIU un widget?

Si. KIU provee de un widget integrable de forma embebida mediante un iframe cuando el producto E-COMMERCE es creado, pero, posiblemente este no contempla todos los aspectos que requiere el cliente por lo tanto, este puede desarrollar su propio widget y conectarse con E-COMMERCE, con la ayuda de nuestros servicios API REST, los cuales proveen todos los datos necesarios para armar un formulario personalizado y garantizar la compatibilidad con el resto del flujo de reserva.

Embebido de Widget via Iframe

Url para usar iframe

Esta url, es para ser usada en caso de preferir utilizar el widget que Kiu proporciona, dentro de un iframe en la pagina web del cliente.

functionalities.

This document explains how to obtain and connect the developed Widget with the booking engine, detailing the services and fields that must be considered in order to build the tool and achieve the searches to be displayed later in the next SPA, according to the selected flow.

The booking screen, is configurable, since different flows converge there, as listed below:

Search flight: Used only for flight searching and bookings generation

Manage my booking: Used to retrieve a booking previously generated and make changes to it

Web check-in: Dedicated to managing the check-in on a segment that is about to begin

What is a widget?

A Widget is a simple application that can be included on the airline's website aiming to extend the functionality to our e-commerce. We provide a widget that can be embedded using an HTML iframe tag into any website. Nevertheless, if this widget does not has all that is needed, a custom widget can be created using our API REST services. These services will provide all the necessary data to guarantee compatibility through the booking flow.

Embedded Widget via Iframe

Url for the iframe

In case you need to use KIU widget you can add it to yor code using an iframe <iframe src="https://ecommerce-xx-stage.kiusys.net/booking/widget/

De usarse esta opción, solo se necesita agregar esta url a un iframe, como el siguiente ejemplo: <iframe src="https://ecommerce-xx-stage.kiusys.net/booking/widget/"</iframe>

Widget personalizado

Formulario desarrollado totalmente por el cliente. Suponiendo que el desarrollador crea el formulario en HTML (por ejemplo), para generar el widget, hay ciertos campos mandatorios, que deben existir para poder enviar la información mínima necesaria a E-COMMERCE flightresults o pantalla que corresponda según el flujo, y de esta manera obtener resultados.

Consideraciones generales en cuanto al desarrollo del widget personalizado

E-COMMERCE, es una aplicación diseñada bajo la arquitectura cliente-servidor, en donde el cliente está desarrollado bajo el paradigma de Simple Web Application (SPA), que en resumen, cada paso del flujo, es independiente entre el resto, y obviamente es independiente del servidor backend, en donde se mantiene la lógica de negocio, que proveen de las configuraciones. Esta arquitectura, brinda al cliente, la posibilidad de estar desarrollado en cualquier tecnología, con cualquier patrón de diseño, solo debe contemplar que debe mantener comunicación con nuestro servidor, quien provee servicios para compartir información.

El Widget debe contemplar y obtener el contenido en base a la configuración de la brindada por kiu, con el objetivo de realizar las búsquedas de acuerdo a los requerimientos comerciales del cliente. Esta información reside en Backoffice y debe estar completamente configurado al momento de desarrollar e implementar el widget.
En esta guía se explica como conectarse y obtener el contenido a desplegar de acuerdo a la configuración mencionada.

Url general para implementar widget personalizado

La url a utilizar para poder consumir de los servicios necesarios para poder implementar y utilizar el widget personalizado, para por ejemplo, carrier XX y ambiente STAGE: "</iframe>

Custom Widget

Assuming that the developer builds a HTML form, there are some mandatory fields to be sent in order to access the e-commerce filghtresults SPA or any other flow.

General considerations

E-COMMERCE is a client-server application, where the client is built under the Single Page Application (SPA) model. Each step of the flow is independent of the rest, and also, independent from the backend server where the business logic resides.

The widget must obtain the content and configurations stored in the e-commerce backoffice. This guide explains how to connect and get this content.

General Url to implement a custom widget

To consume the necessary services a valid url must be used, for example, this this url it is used for xx carrier int the testing enviroment

https://ecommerce-xx-stage.kiusys.net/

...

Services

Get Applications

E-COMMERCE , es un sistema compuesto por componetizados, reutlizables entre si, sin embargo, se dividen en aplicaciones, por ejemplo, searchflight, manage my booking y webcheckin. Las aplicaciones se pueden configurar en cuanto al flujo, o simplemente, se se quiere habilitar, o no.
Por tal razón, es importante configurar las aplicaciones en el backoffice, y tener muy presente, que ante cualquier cosa, al momento de implementar el widget, necesitamos obtener el listado de aplicaciones disponibles. Para ello se hace uso de este servicio.is divided into applications searchflight, manage my booking y webcheckin. The flow of these apps is set in the backoffice. To get a list of the available applications this service can be used

Url:

https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/applications/xx

ImplementaciónImplementation:

Expand

Code Block

let headers = {
    'Content-Type': 'application/json',
    'accept': 'application/json', 
    'carrier': 'xx',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'referer': 'https://ecommerce-xx-stage.kiusys.net/searchflight/',
    'authority': 'ecommerce-xx-stage.kiusys.net'
}
var url = 'https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/applications/xx'
fetch(url, {
 	    method: 'GET',
 	    headers: headers
    }
).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(
	response => handleAppsResponse(response)
)

RespuestaResponse:

{

Expand

Code Block

title	response with the list of applications

Code Block
{ "kiu_internals":{ "duration":3.25775146484375, "id_tracking":"backendsearchflight.5b8e970fa8d1_04245c28f792435f92d1f513d4824d41" }, "response":[ "ecommerce", "manage", "webcheckin" ] }

Diccionario de respuesta:

Response: No es mas que el listado de aplicaciones o módulos dados de alta en el backoffice.

Get Flow

...

Get Flow

GetFlow is the second service to use, where you should obtain a session key and the flow configuration of the selected app. This sessionkey it's going to be used in the next request. Additionally having the flow will give us the next screen to be rendered.

Url:

https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/flow/?carrier=xx&app=ecommerce

...

Implementation:

Expand

Code Block

let headers = {
    'Content-Type': 'application/json',
    'accept': 'application/json', 
    'carrier': 'xx',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'referer': 'https://ecommerce-xx-stage.kiusys.net/searchflight/',
    'authority': 'ecommerce-xx-stage.kiusys.net'
}
var url = 'https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/flow/?carrier=xx&app=ecommerce'
fetch(url, {
 	    method: 'GET',
 	    headers: headers
    }
).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(
	response => customHandleResponseFunction(response)
)

...

Response:

Expand

Code Block

{
   "kiu_internals":{
      "duration":0.19812583923339844,
      "id_tracking":"backendsearchflight.29bad7c320a2_6a0a84986ffd41cc8fb90dee945baf21"
   },
   "response":{
      "flow":[
         {
            "id":1,
            "spaflow_id":1,
            "url":"/searchflight/",
            "zorder":0
         },
         {
            "id":2,
            "spaflow_id":1,
            "url":"/flightresults/",
            "zorder":1
         },
         {
            "id":5,
            "spaflow_id":1,
            "url":"/travellerdetails/",
            "zorder":2
         },
         {
            "id":8,
            "spaflow_id":1,
            "url":"/extraservices/",
            "zorder":3
         },
         {
            "id":6,
            "spaflow_id":1,
            "url":"/purchase/",
            "zorder":4
         },
         {
            "id":7,
            "spaflow_id":1,
            "url":"/endflow/",
            "zorder":5
         }
      ],
      "session_key":"fake-test-key.rPnZwFJPXkQ"
   }
}

...

Response dictionary:

Expand

Listado de pantallas dentro del flujo e-commerce que debe recorrer el usuario

Campofield	Campo hijo	Descripción	Valores/formato	flow	description	Value/format
flow		List of screens inside the flow	Array → Object
	spaflow_id	id del registro dentro de spa of the record inside the flow manager	Int
	url	Path de la pantalla correspondiente al flujoof the screen inside the flow	String, Ej. '/flightresults/'
	zorder	Indica el orden de la pantalla. Nos ayuda a saber a cual debemos ir, según en donde estemos posicionados	Int

Get configs

Es el servicio principal, proveedor de toda la configuración de la aplicación seleccionada.
Hay que destacar que no todas las aplicaciones necesitan de este request.
Por el momento, solo searchflight y webcheckin, necesitan ejecutar este request.
Por tal motivo, recomendamos tener este aspecto muy presente, y gestionar la funcionalidad, apoyados en un esquema de configuración, respecto a la lista de aplicaciones.
Por ejemplo:

Order of the screen

Int

Get configs

This is the main service where we will have all the selected app configuration (only for searchflight and webcheckin)

Expand

Code Block

const appsSchema = {
			ecommerce: {
			app: 'ecommerce',
			module: 'searchflight',
			needConfigs: true
		},
		manage: {
			app: 'manage',
			module: 'managebooking',
			needConfigs: false
		},
		webcheckin: {
			app: 'manage',
			module: 'retrievebooking',
			needConfigs: true
		}
	};

Este json, no es mas que una sugerencia, que sirve para configurar lo que, hasta ahora, el widget necesita.
app: sirve para setear la aplicación seleccionada
module: para definir el path url que necesita el request al backend
needConfigs: Para indicar que necesita ejecutar el getConfigsThis json is a suggestion for the developer. It shows what is needed in each app.

Url (app searchflight):

https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/configs/

...

Implementation:

Expand

Code Block

let headers = {
    'Content-Type': 'application/json',
    'accept': 'application/json', 
    'carrier': 'xx',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'referer': 'https://ecommerce-xx-stage.kiusys.net/searchflight/',
    'authority': 'ecommerce-xx-stage.kiusys.net',
    'authorization': 'Token session_key obtenido en get_sessions'
}
fetch('https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/configs/', {
 	    method: 'GET',
 	    headers: headers
    }
).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(
	response => customHandleResponseFunction(response)
)

...

Response:

Expand

Code Block

{
   "kiu_internals":{
      "duration":2645.9577083587646,
      "id_tracking":"backendsearchflight.29bad7c320a2_3f5d1423f4504527b433ede5a4cbd14c"
   },
   "response":{
      "cabin":{
         "business":true,
         "business_default":false,
         "economy":true,
         "economy_default":false,
         "economy_premium":false,
         "economy_premium_default":false,
         "first":true,
         "first_default":true,
         "id":2,
         "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
      },
      "carrier":{
         "code":"XX",
         "enable":true,
         "name":"EQUIS",
         "numcode":"001",
         "uuid":"982726d9-965b-4ea4-a22b-aa765dbe8dc7"
      },
      "country_settings":[
         {
            "currency_code":"USD",
            "default":true,
            "device_id":"AEP00XXW04",
            "enable":true,
            "id":45,
            "iso_country_code":"AR",
            "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6",
            "user_id":"AEP00XXSM"
         }
      ],
      "display_logics":[
         {
            "airport_code":true,
            "airport_name":true,
            "city_code":true,
            "city_name":true,
            "country_code":true,
            "country_name":true,
            "device_type":"m",
            "id":4,
            "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
         },
         {
            "airport_code":true,
            "airport_name":true,
            "city_code":true,
            "city_name":true,
            "country_code":true,
            "country_name":true,
            "device_type":"d",
            "id":5,
            "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
         },
         {
            "airport_code":true,
            "airport_name":true,
            "city_code":true,
            "city_name":true,
            "country_code":true,
            "country_name":true,
            "device_type":"t",
            "id":6,
            "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
         }
      ],
      "eligibilities":[
         {
            "code":"KIU",
            "enable":true,
            "id":3,
            "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
         }
      ],
      "journey_type":{
         "id":2,
         "multicity":false,
         "multicity_default":false,
         "one_way":true,
         "one_way_default":true,
         "round_trip":true,
         "round_trip_default":false,
         "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
      },
      "languages":[
         {
            "lang":"en"
         },
         {
            "lang":"es"
         }
      ],
      "passenger_types":[
         {
            "code":"ADT",
            "enable":true,
            "id":9,
            "max_quantity":6,
            "ptc":"ADT",
            "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
         },
         {
            "code":"INF",
            "enable":true,
            "id":10,
            "max_quantity":6,
            "ptc":"INF",
            "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
         },
         {
            "code":"CHD",
            "enable":true,
            "id":11,
            "max_quantity":3,
            "ptc":"CHD",
            "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
         }
      ],
      "privacy_policy":{
         "confirmation_button":false,
         "enable":true,
         "id":2,
         "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
      },
      "promo":{
         "codes":[
            {
               "code":"PROMO1",
               "id":4,
               "promo":2
            }
         ],
         "enable":true,
         "id":2,
         "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
      },
      "routes":[
         {
            "carrier":"982726d9-965b-4ea4-a22b-aa765dbe8dc7",
            "destination":{
               "city":{
                  "code":"BUE",
                  "country":{
                     "code":"AR",
                     "description":"ARGENTINA",
                     "id":17
                  },
                  "description":"BUENOS AIRES",
                  "id":35
               },
               "code":"AEP",
               "description":"AEROPARQUE JORGE NEWBERY",
               "id":79
            },
            "id":47,
            "origin":{
               "city":{
                  "code":"COR",
                  "country":{
                     "code":"AR",
                     "description":"ARGENTINA",
                     "id":17
                  },
                  "description":"CORDOBA",
                  "id":26
               },
               "code":"COR",
               "description":"PAJAS BLANCAS",
               "id":27
            }
         }
      ],
      "setting":{
         "carrier":"982726d9-965b-4ea4-a22b-aa765dbe8dc7",
         "enable":true,
         "name":"init",
         "uuid":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
      },
      "temporary_message":{
         "color":"primary",
         "details":[
            {
               "datetime":"2020-03-17T16:20:41.331326Z",
               "enable":true,
               "id":26,
               "link":"http:XX.com",
               "name":"b'U1\\x03\\x9d'",
               "show_datetime":false,
               "temporary_message":2
            }
         ],
         "id":2,
         "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6"
      },
      "translations":{
         "en":{
            "aaaa":"aaaa",
            "child":"Child",
            "descriptions":"xczvzxv",
            "descriptionseeeee":"dddddd",
            "language_description":"English",
            "lugateste":"lugatest",
            "luggage":"Luggage",
            "meal":"Meal",
            "pax":"Passenger",
            "test123":"test"
         },
         "es":{
            "aaaa":"12345",
            "child":"Ni\u00f1o",
            "descriptions":"zsvzvxdv",
            "descriptionseeeee":"dddd",
            "infant":"infante",
            "meal":"Comida",
            "pax":"Pasajero",
            "testing":"fff"
         },
         "kiu_internals":{
            "id_tracking":"kiu-translate.kiu-translate-qa_fe9212c0a9604a619fa34deab8341f61"
         }
      }
   }
}

...

Response Dictionary:

Expand

Listado de combinaciones por origen y destinos.

Campo	Campo hijo	Descripción	Valores/formato
routes	field	next level field	description	values/format
routes		List of origin destination combinations	Array → Object
	originInformación del origen. Contiene información de la ciudad y país, además del código y descripción del aeropuerto	Origin information, country, city, code, description	Object
	destinationInformación del destino. Contiene información de la ciudad y país, además del código y descripción del aeropuerto	Destination information, country, city, code, description	Object
country_settings		Configuración de país y moneda, desde backoffice. Indispensable para armar el point of sale, si queremos obtener disponibilidad. Estos datos influyen directamente en RES al momento de cotizar. Entre otras utilidades, podemos tener mas de una configuración para que el carrier pueda tener configurado un validador de pagos en USD y otro en ARS. (Por ejemplo) Country and currency configurations. This informations it is used to build the point of sale	Array → Object
	currency_code	Código de monedacurrency code	String, Ej. ‘USD’
	defaultIndica si el registro debe estar seleccionado por defecto	indicates whether is the defualt config	Boolean
	device_id	Código de 10 caracteres correspondiente a la PSS terminal_id/device_id usada para conectarse con RES	String. Ej. ‘AEP00XXW04’
	user_id	Código de 9 caracteres correspondiente a la PSS user_id/agente_id usada para conectarse con RES	String. Ej. ‘AEP00XXSM’
	enableIndica si el registro está habilitado	indicates whether is enable	Boolean
	iso_country_code	Código de paísCountry code	String. Ej. ‘AR’
display_logicsConfiguración desde backoffice que indica como mostrar los origen/destino en el formulario, por tipo de dispositivo		Backoffice configuration, indicates how to display origin and destination in the form in each device	Array → Object
	airport_code	Indica si se debe mostrar el código de aeropuerto		Boolean
	airport_name	Indica si se debe mostrar el nombre de aeropuerto		Boolean
	city_codeIndica si se debe mostrar el código de ciudad		Boolean
	city_name	Indica si se debe mostrar el nombre de ciudad	Boolean		Boolean
	country_codeIndica si se debe mostrar el código de país		Boolean
	country_name	Indica si se debe mostrar el nombre de país		Boolean
	device_type	Tipo de dispositivo: m: Teléfonomobile, d: Escritoriodesktop, t: Tabletatablet	String: Ej. ('m', ‘t', 'd’)
journey_type	Configuración de tipo de viaje. Actualmente solo están en uso one_way y round_trip.	Object		one_way	Indica si el tipo de viaje one_way está configurado, de venir en false, no debe usarseIndicate the availble and default type of journey	Object
	one_way		Boolean
	one_way_default	Indica si one_way debe estar seleccionado por defecto al momento de cargar el widget		Boolean
	round_tripIndica si el tipo de viaje		Boolean
	round_trip está configurado, de venir en false, no debe usarse	Boolean	round_trip_default	Indica si round_trip debe estar seleccionado por defecto al momento de cargar el widget	Boolean	multicity	Indica si el tipo de viaje multicity está configurado, de venir en false, no debe usarse (Actualmente no disponible)	_default	Boolean
	multicity		Boolean
	multicity_defaultIndica si multicity debe estar seleccionado por defecto al momento de cargar el widget (Actualmente no disponible)		Boolean
passenger_typesConfiguración		referente a tipos de pasajerosType of passenger configuration	Array → Object
	code	Código de tipo de pasajero, ADT: AdultosAdult, INF: InfantesInfant, CHD: menoresChild	String. Ej. 'ADT'
	enable	Indica si está habilitado para su uso		Bolean
	max_quantityIndica Máxima cantidad de pasajeros admitidos por el tipo		Int
	ptc	PTC al que pertenece el registro. Ej. MIL: Militar		String. Ej. 'MIL'
eligibilitiesListado de eligibilities para desplegar en el formulario.		List of eligibilities to display on the form	Array → Object
	code	Código del eligibilitiy		String
	enable	Indica si el eligibilitiy está habilitado para su uso		Boolean
cabinConfiguración		de cabinas, según lo configurado en backoffice. Viene de a pares, nombre de la cabina y si la misma es configurada por defecto. Por ejemplo, business y business_default. Sólo viene un key default = true. Cabin configurations	Objet
	“Business“	Nombre de la cabina. Indica si está habilitada		Boolean
	“Business_default“	Indica si la cabina está configurada por defecto.		Boolean
temporary_message	Trae la configuración de los mensajes temporales dados de alta en el backoffice	Object		color	Sirve para ser asociado a una clase con el objetivo de cambiar el color del grupo de mensajestemporary messages configured at the back office	Object
	color		String
	details	El campo details, es el que contiene el listado de mensajes a mostrar en el widget (De ser deseado).		Array -> Object
translationsTrae un listado de traducciones desplegado por index de idioma, Ej. es y value igual a un objeto de traducciones que se pueden utilizar. La idea de esta data, es poder mostrar todos los labels traducidos dinámicamente		translations foreach label	Object → Object
promoTrae la configuración de códigos promocionales disponibles, dados de alta en el backoffice		promo codes configurations	Object
	enable	Indica si está habilitado su uso	Boolean		Boolean
	codes	Listado de códigos promocionales		Array → Object
privacy_policy		Configuración proveniente del backoffice, referente a políticas de privacidadprivacy policie configured at the backoffice	Object
	confirmation_buttonIndica si debe mostrar botón de confirmación para cerrar la notificación	indicates whether confiramtion button must be shown	Boolean
	enableIndica si está habilitado su uso	indicates whether is enable	Boolean
languagesListado de idiomas disponibles		list of available languages	Array → Object

Basado en esta respuesta, el desarrollador cuenta con la suficiente información para desplegar dentro de los distintos campos del widget:

Aeropuertos de salida y arribo
Rutas habilitadas
Tipos de pasajeros soportados
Cantidad máxima permitida de pasajeros para búsquedas
Tipo de viajes soportados (Ida o Ida y vuelta)
Monedas soportadas, por país
Mensajes temporales y políticas de privacidad
Códigos promocionales
Listado de Cabinas
Traducciones

También en base a esta información puede generar filtros y validaciones del lado del cliente. Based on thius response the developer has enough information to display some fields on the widget, enable routes, different types of pax, and max quantity, types of journey, currencies, cabins, temporary messages, etc...

Url (app webcheckin):

https://ecommerce-xx-stage.kiusys.net/retrievebooking/api/v1/configs/

ImplementaciónImplementation:

Expand

Code Block

let headers = {
    'Content-Type': 'application/json',
    'accept': 'application/json', 
    'carrier': 'xx',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'referer': 'https://ecommerce-xx-stage.kiusys.net/searchflight/',
    'authority': 'ecommerce-xx-stage.kiusys.net',
    'authorization': 'Token session_key obtenido en get_sessions'
}
fetch('https://ecommerce-xx-stage.kiusys.net/retrievebooking/api/v1/configs/', {
 	    method: 'GET',
 	    headers: headers
    }
).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(
	response => customHandleResponseFunction(response)
)

RespuestaResponse:

Expand

Code Block

{
   "kiu_internals":{
      "duration":15.575170516967773,
      "id_tracking":"backend_retrieve_booking.1a3b98991b77_20b1ae1b2abf4dc5b1c0b04a1c4ddefe"
   },
   "response":[
      {
         "currency_code":"ARS",
         "default":true,
         "device_id":"AEP00XXW04",
         "enable":true,
         "id":3,
         "iso_country_code":"AR",
         "setting":"c256b8d5-dd08-45ba-a546-7057bef51199",
         "user_id":"AEP00XXSM"
      }
   ]
}

Diccionario de respuesta:

Expand

CampoField	DescripciónDescription	Valores/formato
	-	Lista con la Configuración de país y moneda, desde backoffice. Indispensable para armar elCountry and currency configurations. This informations it is used to build the point of sale.	Array
currency_code	Código de monedacurrency code	String, Ej. ‘USD’
defaultIndica si el registro debe estar seleccionado por defecto	indicates whether is the defualt config	Boolean
device_id	Código de 10 caracteres correspondiente a la PSS terminal_id/device_id usada para conectarse con RES	String. Ej. ‘AEP00XXW04’
user_id	Código de 9 caracteres correspondiente a la PSS user_id/agente_id usada para conectarse con RES	String. Ej. ‘AEP00XXSM’
enableIndica si el registro está habilitado	indicates whether is enable	Boolean
iso_country_code	Código de paísCountry code	String. Ej. ‘AR’

Por el momento, solo devuelve la configuración de country settings, necesaria para hacer la búsqueda de la reserva. Se espera que mas adelante, vengan mas configuraciones…

Get Dates (Usado para searchflight)

Devuelve el listado de fechas con disponibilidad de vuelos desde el día actual hasta los posteriores 330 días. Este servicio debe ser usado teniendo implementado los inputs de origen y destino y tipo de viaje, (este último no es requerido). De manera que una vez se seleccione el valor para los tres campos especificados anteriormente, puede ejecutar la petición http.

Parámetros:

origin: El código del aeropuerto de origen. Ejemplo: 'AEP'.

destination: El código del aeropuerto de destino. Ejemplo: 'BUE'.Returns a list of dates with the availability of flights from today up to 330 days. Origin and destination must be specified

Parameters:

origin: airport code, for example 'MAD'

destination: airport code, for example 'CUN'

Url:

https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/dates/?origin=${origin}&destination=${destination}

...

Implementation:

Expand

Este endpoint se ejecuta por get, enviado This endpoint run by GET method, with query params

Code Block

let origin = 'AEP';
let destination = 'COR';
let headers = {
    'Content-Type': 'application/json',
    'accept': 'application/json', 
    'carrier': 'xx',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'referer': 'https://ecommerce-xx-stage.kiusys.net/searchflight/',
    'authority': 'ecommerce-xx-stage.kiusys.net',
    'authorization': 'Token session_key obtenido en get_sessions'
}
fetch(`https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/dates/?origin=${origin}&destination=${destination}`, {
 	    method: 'GET',
 	    headers: headers
    }
).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(
	response => customHandleResponseFunction(response)
)

...

Response:

Expand

Code Block

{
   "kiu_internals":{
      "duration":39.411306381225586,
      "id_tracking":"backendsearchflight.29bad7c320a2_650ed89aeee64f209f6f9b4357a57a6a"
   },
   "response":{
      "ow":[
         "2020-04-03",
         "2020-04-04",
         "2020-04-05",
         "2020-04-06",
         "2020-04-07",
         "2020-04-08",
         "2020-04-09",
         "2020-04-10",
         "2020-04-11",
         "2020-04-12",
         "2020-04-13",
         "2020-04-14",
         "2020-04-15",
         "2020-04-16",
      ],
      "rt":[
         "2020-04-03",
         "2020-04-04",
         "2020-04-05",
         "2020-04-06",
         "2020-04-07",
         "2020-04-08",
         "2020-04-09",
         "2020-04-10",
         "2020-04-11",
         "2020-04-12",
         "2020-04-13",
         "2020-04-14",
      ]
   }
}

Diccionario de respuesta:

En esta respuesta obtenemos todas las fechas con disponibilidad desde el día actual hasta 330 días después.
ow: Representa las fechas disponibles para vuelos one_way
rt: Representa vuelos round_trip.
La idea de esta información, es tener lo necesario para iniciar el componente “datepicker” indicándole que fechas son las que debe habilitar. En el caso de que el componente usado no tenga este atributo y por el contrario admita fechas para des-habilitar, se puede usar este listado, comparándolo contra los 330 días, de modo que obtendríamos los días sin disponibilidad que necesitaríamos, (según el componente usado).

Post action (searchflight)

Este servicio se encarga de enviar los datos para la búsqueda de disponibilidad, una vez el usuario haya completado todos los campos mínimos requeridos. La petición debe hacerse vía POST AJAX y al obtener la respuesta, basta con hacer una re-dirección a la siguiente url según el flujo obtenido, mediante el servicio get_flow

Parámetros:

country_setting: Configuración de país seleccionada por el pasajero.
session_key: session_key obtenido en get_sessions.
journey_type: Tipo de viaje.
origin: Código de origen seleccionado por el pasajero.
destination: Código de destino seleccionado.
departure_date: Fecha de salida seleccionada por el pasajero.
return_date: Fecha de retorno, en el caso de vuelos ida y vuelta.
adults: Cantidad de pasajeros adultos.
minors: Cantidad de pasajeros menores de edad.
infants: Cantidad de pasajeros infantes.
cabin: Cabina seleccionada por el pasajero.
promo: Código promocional.

Url:

https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/action/

...

This response can be used to disable days in the datepicker input.

Post action (searchflight)

This service is used to send all the required data for a flight search. The request must be done using POST AJAX and after the response, a redirect must take place to the next step of the flow.

Parameters:

country_setting: Config selected by the passenger
session_key: previously obtained session_key (get_sessions)
journey_type: type of journey (ow/rt)
origin
destination
departure_date
return_date
adults
minors
infants
cabin
promo

Url:

https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/action/

Implementation:

Expand

Code Block

var formData = {
	country_setting: {
        "currency_code":"USD",
        "default":true,
        "device_id":"AEP00XXW04",
        "enable":true,
        "id":45,
        "iso_country_code":"AR",
        "setting":"0be29d7e-c626-4d07-b60f-6917cc890bc6",
        "user_id":"AEP00XXSM"
    },
	session_key: 'session_key previously obtenidoobtained enin get_sessions',
	journey_type: 'one_way',
	origin: 'AEP',
	destination: 'COR',
	departure_date: '2021-02-03',
	return_date: null, // siif journey_type = 'round_trip' return_date debemust completarsebe completed
	adults: 1,
	minors: 0,
	infants: 0,
	cabin: 'economy', // Sunot envío no es requerido
required
	promo: 'PROMO1' // Su envío no es requeridonot required
}
let headers = {
    'Content-Type': 'application/json',
    'accept': 'application/json', 
    'carrier': 'xx',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'referer': 'https://ecommerce-xx-stage.kiusys.net/searchflight/',
    'authority': 'ecommerce-xx-stage.kiusys.net',
    'authorization': 'Token session_key obtenido en get_sessions'
}
fetch('https://ecommerce-xx-stage.kiusys.net/searchflight/api/v1/action/', {
 	    method: 'POST',
 	    headers: headers,
        body: JSON.stringify(formData)
    }
).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(
	response => customHandleResponseFunction(response)
)

Post action (manage booking)

Este servicio se encarga de enviar los datos para la búsqueda de una reserva, una vez el usuario haya completado todos los campos mínimos requeridos. La petición debe hacerse vía POST AJAX y al obtener la respuesta, basta con hacer una re-dirección a la siguiente url según el flujo obtenido, mediante el servicio get_flow

...

This service is responsible for sending the data to search for a reservation, once the user has completed all the minimum required fields. The request must be made via POST AJAX and when obtaining the response, simply redirect to the following url according to the flow obtained, by get_flow service.

Params:

point_of_sale: Por el momento, tiene el campo “user“, el cual debe ser igual al código del carrier. (onjetoAt the moment, it has the "user" field, which must be the same as the carrier code (object)
record_locator: Código de reserva ingresado por el usuarioReservation code, inserted by user. (string)
last_name_or_grp_name: Apellido del pasajeroPassenger lastname. (string)

Url:

https://ecommerce-xx-stage.kiusys.net/managebooking/api/v1/action/

...

Expand

Code Block

var formData = {
		point_of_sale: {
		user: 'XX',
	},
	record_locator: 'UZAZHI',
	last_name_or_grp_name: 'CARRILLO'
}
let headers = {
    'Content-Type': 'application/json',
    'accept': 'application/json', 
    'carrier': 'xx',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'referer': 'https://ecommerce-xx-stage.kiusys.net/booking/',
    'authority': 'ecommerce-xx-stage.kiusys.net',
    'authorization': 'Token session_key obtenido en get_sessions'
}
fetch('https://ecommerce-xx-stage.kiusys.net/managebooking/api/v1/action/', {
 	    method: 'POST',
 	    headers: headers,
        body: JSON.stringify(formData)
    }
).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(
	response => customHandleResponseFunction(response)
)

Post action (Web checkin)

Este servicio se encarga de enviar los datos para la búsqueda de una reserva a checkear, una vez el usuario haya completado todos los campos mínimos requeridos. La petición debe hacerse vía POST AJAX y al obtener la respuesta, basta con hacer una re-dirección a la siguiente url según el flujo obtenido, mediante el servicio get_flow This service is responsible for sending the data to retrieve the reserervation to do checkin, once the user has completed all the minimum required fields. The request must be made via POST AJAX and when obtaining the response, simply redirect to the following url according to the flow obtained, by get_flow service.

Parámetros:

point_of_sale: Debe contener los datos obtenidos previamente en el Data obtained previously in get_configs service (objetoobject)
record_locator: Código de reserva ingresado por el usuarioReservation code, inserted by user. (string)
last_name_or_grp_name: Apellido del pasajeroPassenger lastname. (string)

Url:

https://ecommerce-xx-stage.kiusys.net/retrievebooking/api/v1/action/

...

Expand

Code Block

var formData = {
	point_of_sale: {
		user: "XX",
        agent_preferred_language: "es-AR",
        kiu_device_id: "AEP00XXW04",
        agent_id: "AEP00XXSM",
        preferred_display_currency: "ARS",
        country: "AR"
	},
	record_locator: 'UZAZHI',
	last_name_or_grp_name: 'CARRILLO'
}
let headers = {
    'Content-Type': 'application/json',
    'accept': 'application/json', 
    'carrier': 'xx',
    'sec-fetch-site': 'same-origin',
    'sec-fetch-mode': 'cors',
    'referer': 'https://ecommerce-xx-stage.kiusys.net/booking/',
    'authority': 'ecommerce-xx-stage.kiusys.net',
    'authorization': 'Token session_key obtenido en get_sessions'
}
fetch('https://ecommerce-xx-stage.kiusys.net/retrievebooking/api/v1/action/', {
 	    method: 'POST',
 	    headers: headers,
        body: JSON.stringify(formData)
    }
).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(
	response => customHandleResponseFunction(response)
)

...

Response (searchflight, manage my booking, web checkin):

Expand

Es importante obtener un estado 200 y que dentro de It is important to obtain a 200 status and that within response.response ['session-display'] tengamos el valor de nuestra session key mencionada anteriormente. En ese escenario sabemos que tenemos ya todo preparado para re-direccionar a la siguiente pantallawe have the value of our session key mentioned above. In this scenario we know that we have everything ready to redirect to the next screen.

Manage booking y and web checkin, puede devolver un 400, indicando que la reserva o el pasajero no existe. Es importante tener en cuenta este caso, para, en tal caso, mostrar un mensaje al usuarioyou can return a 400, indicating that the reservation or the passenger does not exist. It is important to take this case into account, in order to display an error message to the user.

Code Block

{
   "kiu_internals":{
      "duration":3.2041072845458984,
      "id_tracking":"backendsearchflight.29bad7c320a2_953a5c297e464e7191b869b658cfa32c"
   },
   "response":{
      "session-display":"https://ecommerce-xx-stage.kiusys.net/spa-session-display/show?app=ecommerce&session_key=fake-test-key.odfcPLsiwJY"
   }
}

...

Widget

...

El objetivo de este apartado es aprovechar el contenido obtenido en los servicios disponibles, para armar el formulario de búsqueda correspondiente, realizar las validaciones pertinentes y finalmente poder enviar información a la siguiente pantalla del flujo que corresponda.
Lo que a continuación se mostrará, es basado en un desarrollo sencillo, usando bootstrap, javascript y jquery.

En vista de que en este widget, debemos agregar mas de un formulario, Una manera muy sencilla de resolverlo, es implementando tabs, como los que ofrece boostraps. La idea es que al ir navegando entre pestañas, cambie el formulario y las variables de entorno necesarias, para poder hacer request al backend correspondiente

Web assembly (searchflight).

Para evitar ataques contra el servicio de shopping, usado en la pantalla flightresults, se implementó un control mediante WebAssembly, en donde generamos un token válido que debe ser enviado en el payload de https://ecommerce-xx-dev.kiusys.net/searchflight/api/v1/action/. Ya que este será validado en nuestro backend por fecha de vencimiento y datos.
En este sentido, es importante integrar correctamente algunos tags dentro del html, listados a continuación:

...

Build

The objective of this section is to take advantage of the content obtained in the available services, to create the corresponding search form, carry out the pertinent validations and finally be able to send information to the next screen of the corresponding flow.

Web assembly (searchflight).

To avoid attacks against the shopping service, used in the flightresults screen, a control was implemented through WebAssembly, where we generate a valid token that must be sent in the https://ecommerce-[carrier]-[env].kiusys.net/searchflight/api/v1/action/.. Since this will be validated in our backend by expiration date and data, in this sense, it is important to follow the following steps:

include wasm folder in your project:
Because the widget implemented by the carrier would have a different DNS than the one provided by Kiu, to generate the search screen, the client must include the wasm folder in its development, avoiding errors by CORS ORIGIN. In this way, you will be able to generate the webassembly token.
The wasm folder should be located so that the index where the widget is located can fetch the files.

View file

name	wasm.zip

Of the three files within the wasm folder, only the wasm.css file can be modified.

In order to serve the test.wasm file, it is essential to configure location and mimetypes on the configured server. For example, if we use nginx server, it is as shown in the following example:

Expand

Code Block

# path usado para resolver la carpeta wasm
location /wasm/ {
      alias /var/www/tests/custom_widget/wasm/test.wasm; # alias Ubicación de la carpeta
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Request-Method GET;
}

types {
      text/css css;
      text/html html;
      text/plain txt;
      application/wasm wasm; # mimetype para test.wasm
      image/svg+xml svg svgz;
      image/gif gif;
      image/png png;
      image/jpeg jpeg jpg;
      image/webp webp;
      image/x-icon ico;
}
gzip on; # habilita servir el archivo como comprimido
gzip_types application/wasm; # especifica el mimetype del archivo a comprimir

The file test.wasm is only served using the mimetype application/wasm wasm;. Without this configuration, it cannot be resolved. Additionally, because it is a large file, it must be compressed. For this we use gzip;

Insert WASM_URL: This is required to be used within the js loaded later. Pay special attention that it ends with '/' and that the variable is injected into the window object. (The DNS must be that of the carrier)

<script type="text/javascript"> window.WASM_URL = "https://ecommerce-xx-stage.kiusys.netairline-webpage/wasm/"; </script>

Insertar Polyfill: Hace posible la compatibilidad con navegadores de versiones antiguasEmbed Polyfill: Makes compatibility with older version browsers possible.

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

Insertar validación para Insert validation for Microsoft IE: Internet Explorer no es soportado, por tal motivo, es importante avisar al usuario que debe cambiar de medio. Por eso, se recomienda agregar el siguiente tag, pudiendo ademas modificar el alerta por uno de preferencia del clienteis not supported, for this reason, it is important to warn the user that they must change the browser. For this reason, it is recommended to add the following tag, also being able to modify the alert for one of the client's preference.

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

Insertar Insert wasm.css file: El DNS debe ser la asignada al The DNS must be that of the carrier.

<link rel="stylesheet" type="text/css" href="https://ecommerce-xx-stage.kiusys.netairline-webpage/wasm/wasm.css">

Insert wasm_load.js file: Very important tag, since it is the one that loads the WebAssembly file, responsible for generating the token. (The DNS must be that of the carrier).

<script type="text/javascript" src="https://airline-webpage/wasm/wasm_load.cssjs">

Insertar wasm_load.js: Tag muy importante, puesto que es el que hace la carga del archivo WebAssembly, encargado de generar el token. (El DNS debe ser la asignada al carrier).

<script type="text/javascript" src="https://ecommerce-xx-stage.kiusys.net/wasm/wasm_load.js"</script>

Una vez se hayan cargado los scripts descritos anteriormente, solo podremos generar el token en un solo momento, luego de que el usuario completó el formulario, por lo que debemos generar el token en el momento que el usuario hace click en el botón “search“. Agregando de alguna manera la key wasm_token, al objeto que será enviado por post al backend.
Debemos hacer uso de la funcion validateForm() (Recordar que se puede invocar una sola vez, de querer re usarla, es necesario recargar la pantalla). Suponiendo que nuestro payload está dentro una variable “formData”:
formData.wasm_token = validateForm(JSON.stringify(formData))

Posteriormente se haría el post hacia …/action.
Verificar que se envía el wasm_token

HTML

El el siguiente archivo .zip, puedes obtener una versión de inicio, para implementar un widget desde cero</script>

Once the scripts described above have been loaded, we can only generate the token in a single moment, after the user has completed the form, so we must generate the token when the user clicks on the "search" button. . Adding in some way the key wasm_token, to the object that will be sent by post to the backend.

We must make use of the validateForm() function (Remember that it can be invoked only once, if we want to reuse it, it is necessary to reload the screen). Assuming that our payload is inside a "formData" variable:

formData.wasm_token = validateForm(JSON.stringify(formData))

Later the post would be made towards… / action.
Note: Verify that the wasm_token is sent.

HTML

Note

IMPORTANT NOTE

This is meant to be used an implementation guideline for developers; it is not meant to be used within the development.

This HTML should not be used as it is. It is not adapted to work on all browsers, devices, or their versions.

This widget needs to be adjusted and a certification process is required before going live where all parties must be involved (airline, website developer, Kiu)

What will be shown next is based on a simple development, using bootstrap, javascript and jquery.

In view of the fact that in this widget, we must add more than one form. A very simple way to solve it is by implementing tabs, such as those offered by boostraps. The idea is that when navigating between tabs, change the form and the necessary environment variables, in order to make a request to the corresponding backend.

In the following .zip file, you can get the home version, to implement a widget from scratch.

View file

name	widget-booking.zip

Si se necesita probarlo en local, y no se tiene servidor corriendo, puede instalarse nodejs, y con seguir los pasos del readme, inicia. Si cuentan con un servidor nginx o se prefiere probarlo dentro de un VPS (por ejemplo), puede tomarse el archivo widgetBooking.html y utilizarlo directamente.

Link de pruebas

Por medio de este, puede probarse directamente en el dns de kiusys.com. Puede usarse dev, qa o stage. Para ello, basta con agregar via queryparams, la key env con el valor que se prefiera, así como cambiar de If you need to test it locally, you can install nodejs, and with following the readme steps, it starts. If you have an nginx server or if you prefer to test it within a VPS (for example), you can take the widgetBooking.html file and use it directly.

Test link:

Through this, it can be tested directly in the DNS of kiusys.com. You can use dev, qa, or stage. To do this, simply add via queryparams, the env key with the value you prefer, as well as change the carrier.

https://apps-dev.kiusys.com/tests/custom_widget_/booking_custom.html ?env=stage&carrier=xx

Validaciones recomendadas

Mas allá que la aplicación E-COMMERCE tiene sus propias validaciones en el backend, debemos realizar ciertas recomendaciones a los desarrolladores, sobre algunas validaciones a realizar del lado del cliente (Front-end), con el objetivo de evitar errores de búsqueda inconsistentes y generar un proceso mas eficiente.

Código de reserva - Apellido:

Debe procurarse que la reserva exista, y el apellido sea extactamente el mismo usado en la reserva. Importante, validar la cantidad de caracteres, acentos, o la letra “Ñ”, por ejemplo.

Origen - Destino:

La respuesta de Get_config devuelve la lista de rutas habilitadas para búsquedas configuradas en el backoffice. Basado en esta información, el desarrollador puede filtrar y validar las opciones que estén relacionadas y así optimizar los resultados de las búsquedas. Este filtro se realiza por ejemplo en la funcion javascript filterRoute(), Esta debe usarse en un evento onkeyup

Fechas:

El formato soportado de fechas es YYYY-MM-DD (ejemplo: 2020-04-06). El desarrollador puede desplegar en el formulario en diferentes formatos de acuerdo a la zona en la que se encuentre, pero debe considerar hacer la transformación para respetar el formato soportado y evitar de esta manera que E-COMMERCE devuelva error de formato.

Fecha de salida:

La fecha de salida debe considerarse desde la fecha actual a futuro y no mas allá de 330 días en futuro. La aplicación por estándar de la industria soporta búsquedas de disponibilidad hasta 330 días a futuro de la fecha actual. Esto lo especificamos en el apartado Get_dates, y le damos uso en la funcion javascript manageDates().

Fecha de regreso:

La fecha de regreso debe validarse contra la fecha de salida. Esta no puede ser anterior a la fecha fijada como salida y no debe ser superior a 330 días a futuro.

Pasajero adulto:

Recomendamos que el valor default sea 1. No se acepte 0, para evitar la solicitud vía canal de ventas web de menores no acompañados que lleva consigo una proceso interno de la línea aérea para su autorización. De igual manera, estas configuraciones vienen incluidas en la respuesta de Get_configs, campo passenger_types.

Pasajeros infantes:

Por una lógica propia de la industria, debe existir previamente un adulto antes de agregar un infante. Si existe mas de un pasajero Infante, debe existir la misma cantidad de adultos puesto que solamente se puede asociar un pasajero infante y solo uno a un pasajero adulto.

Envío de datos a E-COMMERCE:
El servicio Post action es usado para el envío de datos de búsqueda vía AJAX, no debe ser usado en un evento form submit, ya que no admite re-direcciones. El uso correcto de este servicio, es: una vez obtenida la respuesta con status 200, debemos hacer una re-dirección hacia la siguiente pantalla E-COMMERCE, Dicha información, la provee el servicio Get flow, utilizado de primero en el flujo de integración, cuya información debe ser guardada en el cliente.

...

Required validations

Beyond the fact that the E-COMMERCE application has its own validations in the backend, we must make certain recommendations to the developers, about some validations to be carried out on the client side (Front-end), in order to avoid inconsistent search errors and generate a more efficient process.

Reservation code - Surname:

It must be ensured that the reservation exists, and the surname is exactly the same as the one used in the reservation. Important, validate the number of characters, accents, or the letter "Ñ", for example.

Origin destiny:

The Get_config response returns the list of search-enabled routes configured in the backoffice. Based on this information, the developer can filter and validate the related options and thus optimize the search results. This filter is performed for example in the javascript function filterRoute(), This must be used in an onkeyup event

Dates:

The supported date format is YYYY-MM-DD (example: 2020-04-06). The developer can display the form in different formats according to the area in which it is located, but should consider doing the transformation to respect the supported format and thus avoid E-COMMERCE returning a format error.

Departure date:

The departure date must be considered from the current date to the future and not beyond 330 days in the future. The industry standard application supports availability searches up to 330 days in the future from the current date. We specify this in the Get_dates section, and we use it in the javascript manageDates() function.

Return date:

The return date must be validated against the departure date. This cannot be earlier than the date set as departure and must not be more than 330 days in the future.

Adult passenger:

We recommend that the default value be 1. 0 is not accepted, to avoid the request via the web sales channel of unaccompanied minors that carries with it an internal airline process for authorization. Likewise, these configurations are included in the response to Get_configs, passenger_types field.

Infant passengers:

By industry logic, an adult must first exist before adding an infant. If there is more than one Infant passenger, there must be the same number of adults since only one infant passenger and only one can be associated with an adult passenger.

Sending data to E-COMMERCE:

The Post action service is used to send search data via AJAX, it should not be used in a form submit event, since it does not support redirects. The correct use of this service is: once the response with status 200 is obtained, we must redirect to the next screen E-COMMERCE, This information is provided by the Get flow service, used first in the integration flow , whose information must be stored in the client.

To do the redirection, based on the flow, we can make use of the handlePostResponse() function, or directly, taking into account the general url, the session data obtained previously and the Post Action response. Starting from the fact that the first screen of any of the flows is the one we are in, and it would be position 0 of the list, we can simply obtain the next one, that is, position 1, and from this, obtain the corresponding path to make the re -dicection. Under that context, one option would be to use something like the following:

Code Block
let nextUrl = session.flow[1].url window.location.href = `${mainUrl}${nextUrl}?carrier=${carriercode}&lang=${language}&session_id=${session.session_key}`

ENGLISH VERSION

Througout this I hope the exposed information is of your total utility. Good luck!

Version	Old Version 2	New Version Current
Changes made by	Claudia Chenlo	Luciana Lospinnato
Saved on	Feb 05, 2021	Feb 14, 2021

Page Comparison

Versions Compared

Key

Introducción y Conceptos

Introduction and Concepts

Que es un widget?

Ofrece KIU un widget?

Embebido de Widget via Iframe

Url para usar iframe

What is a widget?

Embedded Widget via Iframe

Url for the iframe

Widget personalizado

Consideraciones generales en cuanto al desarrollo del widget personalizado

Url general para implementar widget personalizado

Custom Widget

General considerations

General Url to implement a custom widget

Services

Url:

Get Flow

Get Flow

Url:

Implementation:

Response:

Response dictionary:

Get configs

Get configs

Url (app searchflight):

Implementation:

Response:

Response Dictionary:

Url (app webcheckin):

Get Dates (Usado para searchflight)

Parámetros:

Parameters:

Url:

Implementation:

Response:

Diccionario de respuesta:

Post action (searchflight)

Parámetros:

Url:

Post action (searchflight)

Parameters:

Url:

Implementation:

Post action (manage booking)

Params:

Url:

Post action (Web checkin)

Parámetros:

Url:

Response (searchflight, manage my booking, web checkin):

Widget

Web assembly (searchflight).

Build

Web assembly (searchflight).

HTML

HTML

Validaciones recomendadas

Required validations

Sending data to E-COMMERCE: