Fly Easy React SDK

Overview

The Fly Easy React SDK is a React framework-specific client for accessing Fly Easy's API.

The SDK lives in our monorepo.

It is published to npm as @fly-easy-app/react.

Installation

Via npm:

npm install @fly-easy-app/react

Via yarn:

yarn add @fly-easy-app/react

Via pnpm:

pnpm add @fly-easy-app/react

Configuration

To use the Fly Easy React SDK, some components may require:

1. An API key (generated in your admin dashboard).

For components that require an API key, please refer to the @fly-easy-app/api package on how to configure correctly.

Usage

Components

• ExpressBookingButton

A component that can be placed in your airline's booking flow after a traveller selects their fare class, and desired departure and returning offers. The component requires a flight offer object, which includes:

• airlineId: provided in your admin dashboard
• dataSource: see supported data sources
• flightOffers:
  • originalDepartureOffer: JavaScript object according to supported data sources
  • originalReturnOffer (optional): JavaScript object according to supported data sources

The component will call the Fly Easy API to save the flight offers information as JSON, and return an ID. The booking button's href is created on the fly once the flight offer objects are not null anymore. The href points to the airline's booking UI, which includes a query parameter with the flight offer ID.

After a traveller clicks on the express checkout button, they will go through the expedited checkout flow to complete their booking.

Example Usage

// import { setConfig } from '@fly-easy-app/api';
import { FlightOfferDataSources, FlightOffers } from '@fly-easy-app/types';
import { ExpressBookingButton } from '@fly-easy-app/react';

function App() {
   const departing = {
    // flight offer object from supported data source
  };
  const returning = {
    // flight offer object from supported data source
  };
  const flightOffers: FlightOffers = {
    originalDepartureOffer: departing,
    originalReturnOffer: returning
  };

  // setConfig({
  //   apiKey: '*****'
  // });

  <ExpressBookingButton
    airlineId='12345'
    dataSource={FlightOfferDataSources.Amadeus}
    flightOffers={flightOffers}
  />
}

Data Sources

Amadeus

If your flight offer comes from the Amadeus API, the format of the flightOffer object should be per the flight offers response.

Example object:

{
  "type": "flight-offer",
  "id": "1",
  "source": "GDS",
  "instantTicketingRequired": false,
  "nonHomogeneous": false,
  "oneWay": false,
  "lastTicketingDate": "2023-11-01",
  "numberOfBookableSeats": 9,
  "itineraries": [
    {
      "duration": "PT9H10M",
      "segments": [
        {
          "departure": {
            "iataCode": "EWR",
            "at": "2023-11-01T21:50:00"
          },
          "arrival": {
            "iataCode": "LHR",
            "at": "2023-11-02T08:45:00"
          },
          "carrierCode": "6X",
          "number": "188",
          "aircraft": {
            "code": "777"
          },
          "operating": {
            "carrierCode": "6X"
          },
          "duration": "PT5H55M",
          "id": "3",
          "numberOfStops": 0,
          "blacklistedInEU": false
        },
        {
          "departure": {
            "iataCode": "LHR",
            "at": "2023-11-02T10:30:00"
          },
          "arrival": {
            "iataCode": "MAD",
            "at": "2023-11-02T13:00:00"
          },
          "carrierCode": "6X",
          "number": "9931",
          "aircraft": {
            "code": "320"
          },
          "operating": {
            "carrierCode": "6X"
          },
          "duration": "PT1H30M",
          "id": "4",
          "numberOfStops": 0,
          "blacklistedInEU": false
        }
      ]
    }
  ],
  "price": {
    "currency": "USD",
    "total": "342.20",
    "base": "294.00",
    "fees": [
      {
        "amount": "0.00",
        "type": "SUPPLIER"
      },
      {
        "amount": "0.00",
        "type": "TICKETING"
      }
    ],
    "grandTotal": "342.20"
  },
  "pricingOptions": {
    "fareType": ["PUBLISHED"],
    "includedCheckedBagsOnly": true
  },
  "validatingAirlineCodes": ["6X"],
  "travelerPricings": [
    {
      "travelerId": "1",
      "fareOption": "STANDARD",
      "travelerType": "ADULT",
      "price": {
        "currency": "USD",
        "total": "342.20",
        "base": "294.00"
      },
      "fareDetailsBySegment": [
        {
          "segmentId": "3",
          "cabin": "BUSINESS",
          "fareBasis": "J6XQSMIX",
          "class": "J",
          "includedCheckedBags": {
            "quantity": 8
          }
        },
        {
          "segmentId": "4",
          "cabin": "BUSINESS",
          "fareBasis": "J6XQSMIX",
          "class": "J",
          "includedCheckedBags": {
            "quantity": 8
          }
        }
      ]
    }
  ]
}