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.

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

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.

After installing the package, you can import the Additional Baggage Selection component into your application. Use AdditionalBaggageSelection if you want to be able to select baggage for one or more passengers on one or more slices.

JavaScript
import { AdditionalBaggageSelection } from '@duffel/components'
import '@duffel/components/dist/AdditionalBaggageSelection.min.css'

AdditionalBaggageSelection: Baggage selection for single or multiple passengers on single or multiple slices.

Or if you wish to use the standalone version (just the baggage selector for a single passenger on a single slice), use AdditionalBaggage:

JavaScript
import { AdditionalBaggage } from '@duffel/components'
import '@duffel/components/dist/AdditionalBaggage.min.css'

AdditionalBaggage: Baggage selection for a single passenger on a single slice.

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→

In this guide