Developer Tools

Duffel Components

Pre-built UI components to help build a fantastic flight booking experience


Getting started

To make your integration with Duffel easy and quick, we have released a package containing JavaScript components for seat selection and card payments, so you don't have to build them yourself.
There are two ways you can integrate Components into your application.
  • Import the Duffel Components library into your project using a package manager

  • Use the UMD module (for non-React projects)

Shell (using yarn)

yarn add @duffel/components

Seat Selection Component

We offer a Seat Selection component to simplify your integration with the Seat Maps API.
The component provides a responsive user interface for seat selection that looks good on all screen sizes.

The component provides a responsive user interface for seat selection that looks good on all screen sizes.

After installing the package, you can import the Seat Selection component into your application.

JavaScript

import { SeatSelection } from '@duffel/components'
import '@duffel/components/dist/SeatSelection.min.css'
The Seat Selection component can also be used in non-React projects. You'll use the Duffel Components UMD module, which bundles React, ReactDOM and other dependencies required for Seat Selection to be rendered in your application.
First you'll import the Duffel Components UMD module and CSS file and then create a placeholder node in your HTML for the component.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>
Duffel Components - example usage of SeatSelection in non-React project
</title>
<link
rel="stylesheet"
href="https://unpkg.com/@duffel/components@latest/dist/SeatSelection.min.css"
/>
</head>
<body class="container">
<h1>SeatSelection</h1>
<div id="target"></div>
<script
type="text/javascript"
src="https://unpkg.com/@duffel/components@latest/dist/SeatSelection.umd.min.js"
></script>
<script>
DuffelComponents.renderSeatSelectionComponent('target', {
offer: offer,
seatMaps: seatMaps,
passengers: passengers,
onSubmit: onSubmitFn,
})
</script>
</body>
</html>
That's all done! Follow the steps in the guide to get an offer and its related seat map data.
Learn how to use this component

Card Payment Component

note

Support for mobile applications is coming soon. Interested in getting early access? Drop us a message at help@duffel.com.

We offer a component to simplify your integration with Duffel Payments. Card Payment handles validation and localisation, and takes the card payment itself. We recommend using this component in your application.
Card Payment component

Card Payment component

After installing the package, you can import the Card Payment component into your application.

JavaScript

import { CardPayment } from '@duffel/components'
import '@duffel/components/dist/CardPayment.min.css'
The Card Payment component can also be used in non-React projects. You'll use the Duffel Components UMD module, which bundles React, ReactDOM and other dependencies required for Card Payment to be rendered in your application.
First you'll import the Duffel Components UMD module and CSS file and then create a placeholder node in your HTML for the component.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>
Duffel Components - example usage of CardPayment in non-React checkout
page
</title>
<link
rel="stylesheet"
href="https://unpkg.com/@duffel/components@latest/dist/CardPayment.min.css"
/>
</head>
<body class="container">
<h1>Example CardPayment checkout page</h1>
<div id="target"></div>
<script
type="text/javascript"
src="https://unpkg.com/@duffel/components@latest/dist/CardPayment.umd.min.js"
></script>
<script>
DuffelComponents.renderCardPaymentComponent('target', {
duffelPaymentIntentClientToken: duffelPaymentIntentClientToken
successfulPaymentHandler: successfulPaymentHandlerFn, // Show 'successful payment' page and confirm Duffel PaymentIntent
errorPaymentHandler: errorPaymentHandlerFn // Show error page
})
</script>
</body>
</html>
That's all done! Follow the steps in the guide to Collect payments directly from your customer's card.
Learn how to use this component

Baggage Selection Component

We offer two Additional Baggage React components to simplify creating an order with additional baggage. Both components provide a responsive user interface for baggage selection that looks good on all screen sizes.
The component provides a responsive user interface for baggage selection that looks good on all screen sizes.

The component provides a responsive user interface for baggage selection that looks good on all screen sizes.

After installing the package, you can import the Baggage Selection component into your application.

JavaScript

import { AdditionalBaggageSelection } from '@duffel/components'
import '@duffel/components/dist/AdditionalBaggageSelection.min.css'
or if you wish to use the standalone version,

JavaScript

import { AdditionalBaggage } from '@duffel/components'
import '@duffel/components/dist/AdditionalBaggage.min.css'
Both components can also be used in non-React projects. You'll use the Duffel Components UMD module, which bundles React, ReactDOM and other dependencies required for the components to be rendered in your application.
First you'll import the Duffel Components UMD module and CSS file and then create a placeholder node in your HTML for the component.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>
Duffel Components - example usage of AdditionalBaggage in non-React
project
</title>
<link
rel="stylesheet"
href="https://unpkg.com/@duffel/components@latest/dist/AdditionalBaggageSelection.min.css"
/>
<!-- or if you prefer a single-slice, single-passenger version -->
<link
rel="stylesheet"
href="https://unpkg.com/@duffel/components@latest/dist/AdditionalBaggage.min.css"
/>
</head>
<body class="container">
<h1>AdditionalBaggage</h1>
<div id="target"></div>
<script
type="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 -->
<script
type="text/javascript"
src="https://unpkg.com/@duffel/components@latest/dist/AdditionalBaggage.umd.min.js"
></script>
<script>
DuffelComponents.renderAdditionalBaggageComponent('target', {
availableServices: availableServicesForPassenger,
additionalBaggage: selectedBaggage
onChange: onChangeFn
})
</script>
</body>
</html>
That's all done! Follow the steps in the guide to get an offer and its related data for the baggage component.
Learn how to use this component