Adding Extra Bags
note
The ability to book baggage with your flight is not available for all airlines yet. We recommend using British Airways offers to follow along on this guide.
What do you need to start?
If you are not familiar with how to create an order please head over to our Quick Start Guide.
This guide will start from an offer so make sure you grab an offer ID for a British Airways flight before we start.
tip
We've put together a Postman Collection that contains all of the requests you'll need to follow along with this guide.
Overview
available_services
. Available services are specific to an offer but not surfaced through the API by default. The changes we'll make to work with available services are:Retrieve an offer along with its
available_services
Include services to order creation
See the services booked on an order
Getting services for an offer
return_available_services
set to true. Using a valid offer ID you can use:Shell
curl -X GET --compressed "https://api.duffel.com/air/offers/$OFFER_ID?return_available_services=true"-H "Accept-Encoding: gzip"-H "Accept: application/json"-H "Duffel-Version: v1"-H "Authorization: Bearer$YOUR_ACCESS_TOKEN"
available_services
attribute.Available services
total_currency
and total_amount
. And the actual service information is determined by its type
and metadata
.segment_ids
and passenger_ids
.Learn more
Booking with services
Shell
curl -X POST --compressed "https://api.duffel.com/air/orders"-H "Accept-Encoding: gzip"-H "Accept: application/json"-H "Content-Type: application/json"-H "Duffel-Version: v1"-H "Authorization: Bearer$YOUR_ACCESS_TOKEN"-d '{"data": {"selected_offers": ["'"$OFFER_ID"'"],"payments": [{"type": "balance","currency": "'"$TOTAL_CURRENCY"'","amount": "'"$TOTAL_AMOUNT"'"}],"passengers": [{"phone_number": "+442080160508","email": "tony@example.com","born_on": "1980-07-24","title": "mr","gender": "m","family_name": "Stark","given_name": "Tony","infant_passenger_id": "'"$INFANT_PASSENGER_ID"'","id": "'"$ADULT_PASSENGER_ID_1"'"},{"phone_number": "+442080160509","email": "potts@example.com","born_on": "1983-11-02","title": "mrs","gender": "m","family_name": "Potts","given_name": "Pepper","id": "'"$ADULT_PASSENGER_ID_2"'"},{"phone_number": "+442080160506","email": "morgan@example.com","born_on": "2019-08-24","title": "mrs","gender": "f","family_name": "Stark","given_name": "Morgan","id": "'"$INFANT_PASSENGER_ID"'"}],"services": [{"quantity": 2,"id": "'"$SERVICE_ID_1"'"},{"quantity": 1,"id": "'"$SERVICE_ID_2"'"}]}}'
services
to be book along with the offer specified in the selected_offers
field. Each service on the list here must contain the available service ID ($SERVICE_ID_N
) and the desired quantity.$TOTAL_AMOUNT
) must be increased by the amount times quantity of each service you'd like to purchase. For example, if your offer total is 50 GBP and you include service A with quantity
2 and total_amount
10 GBP, the amount of the payment should now be 70 GBP.Services on Order
Shell
curl -X GET --compressed "https://api.duffel.com/air/orders/$ORDER_ID"-H "Accept-Encoding: gzip"-H "Accept: application/json"-H "Duffel-Version: v1"-H "Authorization: Bearer$YOUR_ACCESS_TOKEN"
Services
maximum_quantity
being replaced with quantity
. It's worth flagging that any ancillary baggages booked as services will not be present in the slices[].segments[].passengers[].baggages[]
. They are only present in the services
field. If you want the full picture of a passenger's baggage you will need to combine both.Documents
type
of electronic_miscellaneous_document_associated
.Learn more
Using the Additional Baggage UI component
Import the Duffel Components library into your project using a package manager
Shell (using yarn)
yarn add @duffel/components
AdditionalBaggageSelection
(A complete component with an integrated passenger selection UI)AdditionalBaggage
(A standalone component, more suitable for usage with a specific passenger and a specific segment)
Use the UMD module (for non-React projects)
DuffelComponents.renderAdditionalBaggageSelectionComponent
(or DuffelComponents.renderAdditionalBaggageComponent
for the standalone version) to render the component into your application, passing in the id
of the placeholder node you created, as well as the required props for the corresponding component.HTML
<!DOCTYPE html><html lang="en"><head><title>Duffel Components - example usage of Baggage components in non-Reactproject</title><linkrel="stylesheet"href="https://unpkg.com/@duffel/components@latest/dist/AdditionalBaggageSelection.min.css"/><!-- or if you prefer a single-slice, single-passenger version --><linkrel="stylesheet"href="https://unpkg.com/@duffel/components@latest/dist/AdditionalBaggage.min.css"/></head><body class="container"><h1>Baggages</h1><div id="target"></div><scripttype="text/javascript"src="https://unpkg.com/@duffel/components@latest/dist/AdditionalBaggageSelection.umd.min.js"></script><script>DuffelComponents.renderAdditionalBaggageSelectionComponent('target', {offer: offer,passengers: passengers,onSubmit: onSubmitFn,})</script><!-- or if you prefer a single-slice, single-passenger version --><scripttype="text/javascript"src="https://unpkg.com/@duffel/components@latest/dist/AdditionalBaggage.umd.min.js"></script><script>DuffelComponents.renderAdditionalBaggageComponent('target', {availableServices: availableServicesForPassenger,additionalBaggage: selectedBaggageonChange: onChangeFn})</script></body></html>
Using the baggage selection component with an integrated passenger selection UI
AdditionalBaggageSelection
will display all the passengers and the flights alongside the selection component.
JavaScript
import { AdditionalBaggageSelection } from '@duffel/components'import '@duffel/components/dist/AdditionalBaggageSelection.min.css'
id
assigned to them in the Offer
. Their names can be added if you have them.JavaScript
const passengers = [{id: 'pas_0000A8oTVsAt8YurG9h4xn',name: 'Amelia Earhart',},{id: 'pas_0000A8oTVsAt8YurG9h4xo',name: 'Charles Lindbergh',},]
AdditionalBaggageSelection
component in a modal as in the example below.React
<YourModal><AdditionalBaggageSelectionoffer={offer}passengers={passengers}onSubmit={onSubmitFn}currencyConversion={currencyConversion} /* optional */initialBaggageSelection={initialBaggageSelection} /* optional *//></YourModal>
Using the standalone passenger selection UI
AdditionalBaggage
.
JavaScript
import { AdditionalBaggage } from '@duffel/components'import '@duffel/components/dist/AdditionalBaggage.min.css'
availableServices
- all the available services withtype: 'baggage'
for this passenger and segmentadditionalBaggages
- the selected service ids and quantitiesonChange
- this function will be called with the updated list of baggages. This should update the state in the component and pass that state back into theadditionalBaggages
prop to reflect the change.
React
// This assumes that this state works with one passenger, and `availableServices` have been filtered down to only the ones involving the passenger.// If multiple `AdditionalBaggage` component is updating the same state, the logic would be a little different.const [additionalBaggages, setAdditionalBaggages] = React.useState([])return (<AdditionalBaggageavailableServices={availableServices}additionalBaggages={additionalBaggages}onChange={(updatedBaggages) => setAdditionalBaggages(updatedBaggages)}/>)
Displaying baggage prices in an alternative currency
currencyConversion
prop to AdditionalBaggageSelection
(or AdditionalBaggage
) including the ISO 4217 currency type and conversion rate to use. The conversion rate provided will be applied to baggage prices in your organisation's default currency.1 GBP = 10.69 HKD
For the carry on baggage, the original price in the organisation's currency is 25 GBP.
JavaScript
const currencyConversion = {currency: 'HKD',rate: 10.69,}

Customising colours (optional)
--ACCENT
colour. This should be in RGB format.CSS
--GREY-100: #f7f5f9;--GREY-200: #e2e2e8;--GREY-400: #ababb4;--GREY-500: #86868e;--GREY-600: #696972;--GREY-700: #4b4b55;--GREY-900: #29292e;--BLACK: 0, 0, 0;--WHITE: 255, 255, 255;--ACCENT: 57, 111, 233;--ACCENT-LIGHT-100: 0.08;--ACCENT-LIGHT-200: 0.24;--ACCENT-LIGHT-300: 0.48;--ACCENT-LIGHT-1000: 1;