@duffel/components 3.0.7-canary → 3.1.2--prototype

package/src/components/{bags → DuffelAncillaries/bags}/IncludedBaggageBanner.tsx

@@ -1,6 +1,6 @@
 import { withPlural } from "@lib/withPlural";
 import React from "react";
-import { OfferSliceSegmentPassengerBaggage } from "../../types/Offer";
+import { OfferSliceSegmentPassengerBaggage } from "../../../types/Offer";
 
 interface IncludedBaggageBannerProps {
   includedBaggage: OfferSliceSegmentPassengerBaggage[];

package/src/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionCard.tsx

@@ -1,5 +1,5 @@
-import { AnimatedLoaderEllipsis } from "@components/AnimatedLoaderEllipsis";
-import { Stamp } from "@components/Stamp";
+import { AnimatedLoaderEllipsis } from "@components/shared/AnimatedLoaderEllipsis";
+import { Stamp } from "@components/shared/Stamp";
 import { getCurrencyForServices } from "@lib/getCurrencyForServices";
 import { getTotalAmountForServices } from "@lib/getTotalAmountForServices";
 import { getTotalQuantity } from "@lib/getTotalQuantity";
@@ -7,8 +7,8 @@ import { hasService } from "@lib/hasService";
 import { isCancelForAnyReasonService } from "@lib/isCancelForAnyReasonService";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
 import { Card } from "../Card";
 import { CfarSelectionModal } from "./CfarSelectionModal";
 

package/src/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionModal.tsx

@@ -1,13 +1,13 @@
+import { Modal } from "@components/shared/Modal";
 import React from "react";
 import {
   CreateOrderPayloadServiceInformationForCancelForAnyReason,
   CreateOrderPayloadServices,
-} from "../../types/CreateOrderPayload";
+} from "../../../types/CreateOrderPayload";
 import {
   Offer,
   OfferAvailableServiceCancelForAnyReason,
-} from "../../types/Offer";
-import { Modal } from "../Modal";
+} from "../../../types/Offer";
 import { CfarSelectionModalBody } from "./CfarSelectionModalBody";
 import { CfarSelectionModalFooter } from "./CfarSelectionModalFooter";
 import { CfarSelectionModalHeader } from "./CfarSelectionModalHeader";

package/src/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionModalBody.tsx

@@ -1,11 +1,11 @@
-import { Icon } from "@components/Icon";
-import { ModalBody } from "@components/Modal";
+import { Icon } from "@components/shared//Icon";
+import { ModalBody } from "@components/shared/Modal";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import React from "react";
 import {
   Offer,
   OfferAvailableServiceCancelForAnyReason,
-} from "../../types/Offer";
+} from "../../../types/Offer";
 import { CfarSelectionModalBodyListItem } from "./CfarSelectionModalBodyListItem";
 
 export interface CfarSelectionModalBodyProps {

package/src/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionModalBodyListItem.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@components/Icon";
+import { Icon } from "@components/shared/Icon";
 import React, { ReactNode } from "react";
 
 export const CfarSelectionModalBodyListItem: React.FC<{

package/src/components/{cancel_for_any_reason → DuffelAncillaries/cancel_for_any_reason}/CfarSelectionModalFooter.tsx

@@ -1,9 +1,9 @@
-import { Icon } from "@components/Icon";
+import { Button } from "@components/shared/Button";
+import { Icon } from "@components/shared/Icon";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { OfferAvailableServiceCancelForAnyReason } from "../../types/Offer";
-import { Button } from "../Button";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { OfferAvailableServiceCancelForAnyReason } from "../../../types/Offer";
 
 export interface CfarSelectionModalFooterProps {
   service: OfferAvailableServiceCancelForAnyReason;
@@ -67,7 +67,7 @@ const ProtectedTripBanner: React.FC = () => (
     <Icon
       size={20}
       name="shield_with_moon"
-      style={{ fill: "rgb(var(--ACCENT))" }}
+      style={{ fill: "var(--SECONDARY, rgb(var(--ACCENT)))" }}
     />
     Your trip is protected
   </div>

package/src/components/{seats → DuffelAncillaries/seats}/Amenity.tsx

@@ -1,7 +1,7 @@
+import { Icon, IconName } from "@components/shared/Icon";
 import classNames from "classnames";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../types/SeatMap";
-import { Icon, IconName } from "../Icon";
+import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
 
 const amenitiesWithoutWrapper = ["bassinet", "exit_row"];
 

package/src/components/{seats → DuffelAncillaries/seats}/DeckSelect.tsx

@@ -1,4 +1,4 @@
-import { Tabs } from "@components/Tabs";
+import { Tabs } from "@components/shared/Tabs";
 import * as React from "react";
 
 export interface DeckSelectProps {

package/src/components/{seats → DuffelAncillaries/seats}/Element.tsx

@@ -1,7 +1,7 @@
 import { isSeatElement } from "@lib/isSeatElement";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElement } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElement } from "../../../types/SeatMap";
 import { Amenity } from "./Amenity";
 import { EmptyElement } from "./EmptyElement";
 import { ExitElement } from "./ExitElement";

package/src/components/{seats → DuffelAncillaries/seats}/ExitElement.tsx

@@ -1,6 +1,6 @@
+import { Icon } from "@components/shared/Icon";
 import classNames from "classnames";
 import * as React from "react";
-import { Icon } from "../Icon";
 
 interface ExitElementProps {
   isRight: boolean;

package/src/components/{seats → DuffelAncillaries/seats}/Legend.tsx

@@ -1,6 +1,6 @@
-import { Icon, IconName } from "@components/Icon";
+import { Icon, IconName } from "@components/shared/Icon";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementAmenity } from "../../types/SeatMap";
+import { SeatMapCabinRowSectionElementAmenity } from "../../../types/SeatMap";
 
 export interface LegendProps {
   /**

package/src/components/{seats → DuffelAncillaries/seats}/Row.tsx

@@ -1,7 +1,7 @@
 import { getRowNumber } from "@lib/getRowNumber";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRow } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRow } from "../../../types/SeatMap";
 import { RowSection } from "./RowSection";
 
 export interface RowProps {

package/src/components/{seats → DuffelAncillaries/seats}/RowSection.tsx

@@ -1,7 +1,10 @@
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRow, SeatMapCabinRowSection } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import {
+  SeatMapCabinRow,
+  SeatMapCabinRowSection,
+} from "../../../types/SeatMap";
 import { Element } from "./Element";
 import { EmptyElement } from "./EmptyElement";
 

package/src/components/{seats → DuffelAncillaries/seats}/SeatElement.tsx

@@ -1,10 +1,10 @@
+import { Icon } from "@components/shared/Icon";
 import { getPassengerInitials } from "@lib/getPassengerInitials";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
-import { Icon } from "../Icon";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 import { SeatInfo } from "./SeatInfo";
 import { SeatUnavailable } from "./SeatUnavailable";
 

package/src/components/{seats → DuffelAncillaries/seats}/SeatInfo.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import {
   SeatMapCabinRowSectionAvailableService,
   SeatMapCabinRowSectionElementSeat,
-} from "../../types/SeatMap";
+} from "../../../types/SeatMap";
 
 export interface SeatInfoProps {
   seat: SeatMapCabinRowSectionElementSeat | null;

package/src/components/{seats → DuffelAncillaries/seats}/SeatMap.tsx

@@ -3,8 +3,8 @@ import { getSymbols } from "@lib/getSymbols";
 import { hasWings } from "@lib/hasWings";
 import classNames from "classnames";
 import * as React from "react";
-import { CreateOrderPayloadSeatService } from "../../types/CreateOrderPayload";
-import { SeatMap as SeatMapType } from "../../types/SeatMap";
+import { CreateOrderPayloadSeatService } from "../../../types/CreateOrderPayload";
+import { SeatMap as SeatMapType } from "../../../types/SeatMap";
 import { DeckSelect } from "./DeckSelect";
 import { Legend } from "./Legend";
 import { Row } from "./Row";
@@ -29,6 +29,10 @@ export const SeatMap: React.FC<SeatMapProps> = ({
 }) => {
   const [selectedDeck, setSelectedDeck] = React.useState(0);
 
+  if (!seatMap || !seatMap.cabins || !seatMap.cabins.length) {
+    return <SeatMapUnavailable />;
+  }
+
   const cabins = getCabinsForSegmentAndDeck(selectedDeck, seatMap);
   const hasMultipleDecks = cabins.length !== seatMap.cabins.length;
   const anyHasWings = seatMap.cabins.some((cabin) => cabin.wings);

package/src/components/{seats → DuffelAncillaries/seats}/SeatMapUnavailable.tsx

@@ -1,4 +1,4 @@
-import { NonIdealState } from "@components/NonIdealState";
+import { NonIdealState } from "@components/shared/NonIdealState";
 import * as React from "react";
 
 export const SeatMapUnavailable: React.FC = () => (

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionCard.tsx

@@ -1,3 +1,5 @@
+import { AnimatedLoaderEllipsis } from "@components/shared/AnimatedLoaderEllipsis";
+import { Stamp } from "@components/shared/Stamp";
 import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
 import { getTotalAmountForServices } from "@lib/getTotalAmountForServices";
 import { getTotalQuantity } from "@lib/getTotalQuantity";
@@ -8,12 +10,10 @@ import {
   CreateOrderPayload,
   CreateOrderPayloadSeatService,
   CreateOrderPayloadServices,
-} from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
-import { AnimatedLoaderEllipsis } from "../AnimatedLoaderEllipsis";
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { SeatMap } from "../../../types/SeatMap";
 import { Card } from "../Card";
-import { Stamp } from "../Stamp";
 import { SeatSelectionModal } from "./SeatSelectionModal";
 
 export interface SeatSelectionCardProps {

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModal.tsx

@@ -1,3 +1,4 @@
+import { Modal } from "@components/shared/Modal";
 import { getCurrencyForSeatMaps } from "@lib/getCurrencyForSeatMaps";
 import { getPassengerBySegmentList } from "@lib/getPassengerBySegmentList";
 import { getPassengerMapById } from "@lib/getPassengerMapById";
@@ -8,10 +9,9 @@ import React from "react";
 import {
   CreateOrderPayload,
   CreateOrderPayloadSeatService,
-} from "../../types/CreateOrderPayload";
-import { Offer } from "../../types/Offer";
-import { SeatMap } from "../../types/SeatMap";
-import { Modal } from "../Modal";
+} from "../../../types/CreateOrderPayload";
+import { Offer } from "../../../types/Offer";
+import { SeatMap } from "../../../types/SeatMap";
 import { SeatSelectionModalBody } from "./SeatSelectionModalBody";
 import { SeatSelectionModalFooter } from "./SeatSelectionModalFooter";
 import { SeatSelectionModalHeader } from "./SeatSelectionModalHeader";
@@ -100,7 +100,7 @@ export const SeatSelectionModal: React.FC<SeatSelectionModalProps> = ({
     getCurrencyForSeatMaps(seatMaps) ?? offer.total_currency;
 
   return (
-    <Modal isOpen={isOpen} onClose={() => onClose(selectedServicesState)}>
+    <Modal isOpen={isOpen} onClose={() => onClose(selectedServices)}>
       <SeatSelectionModalHeader
         segmentAndPassengerPermutationsCount={
           segmentAndPassengerPermutations.length

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalBody.tsx

@@ -1,4 +1,4 @@
-import { ModalBody } from "@components/Modal";
+import { ModalBody } from "@components/shared/Modal";
 import React from "react";
 import { SeatMap, SeatMapProps } from "./SeatMap";
 

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalFooter.tsx

@@ -1,12 +1,12 @@
+import { Button } from "@components/shared/Button";
 import { ServicePriceMapById } from "@lib/getServicePriceMapById";
 import { getTotalAmountForServicesWithPriceMap } from "@lib/getTotalAmountForServices";
 import { getTotalQuantity } from "@lib/getTotalQuantity";
 import { moneyStringFormatter } from "@lib/moneyStringFormatter";
 import { withPlural } from "@lib/withPlural";
 import React from "react";
-import { CreateOrderPayloadServices } from "../../types/CreateOrderPayload";
-import { SeatMap } from "../../types/SeatMap";
-import { Button } from "../Button";
+import { CreateOrderPayloadServices } from "../../../types/CreateOrderPayload";
+import { SeatMap } from "../../../types/SeatMap";
 
 export interface SeatSelectionModalFooterProps {
   currency: string;
@@ -42,6 +42,7 @@ export const SeatSelectionModalFooter: React.FC<
     seatMaps
   );
   const totalAmountLabel = moneyStringFormatter(currency)(totalAmount);
+  const isOneWay = isFirstSegment && isLastSegment;
 
   return (
     <div style={{ padding: "16px 24px 24px" }}>
@@ -51,21 +52,27 @@ export const SeatSelectionModalFooter: React.FC<
       </div>
 
       <div
-        style={{
-          marginTop: "16px",
-          display: "grid",
-          columnGap: "12px",
-          gridTemplateColumns: "repeat(2, 1fr)",
-        }}
+        style={
+          isOneWay
+            ? { marginTop: "16px", display: "grid" }
+            : {
+                marginTop: "16px",
+                display: "grid",
+                columnGap: "12px",
+                gridTemplateColumns: "repeat(2, 1fr)",
+              }
+        }
       >
-        <Button
-          size={48}
-          disabled={isFirstSegment}
-          variant="outlined"
-          onClick={() => onPreviousSegmentButtonClicked()}
-        >
-          Back
-        </Button>
+        {!isOneWay && (
+          <Button
+            size={48}
+            disabled={isFirstSegment}
+            variant="outlined"
+            onClick={() => onPreviousSegmentButtonClicked()}
+          >
+            Back
+          </Button>
+        )}
 
         <Button
           size={48}

package/src/components/{seats → DuffelAncillaries/seats}/SeatSelectionModalHeader.tsx

@@ -1,6 +1,6 @@
 import { formatDateString } from "@lib/formatDate";
 import React from "react";
-import { OfferSliceSegment } from "../../types/Offer";
+import { OfferSliceSegment } from "../../../types/Offer";
 
 export interface SeatSelectionModalHeaderProps {
   segmentAndPassengerPermutationsCount: number;
@@ -21,23 +21,32 @@ export const SeatSelectionModalHeader: React.FC<
   setCurrentSegmentAndPassengerPermutationsIndex,
 }) => (
   <div style={{ padding: "24px 24px 16px" }}>
-    <div style={{ display: "flex", columnGap: "4px" }}>
-      {Array(segmentAndPassengerPermutationsCount)
-        .fill(0)
-        .map((_, index) =>
-          index === currentSegmentAndPassengerPermutationsIndex ? (
-            <ActiveSegment key={`segment_${index}`} />
-          ) : (
-            <InactiveSegment
-              key={`segment_${index}`}
-              onClick={() =>
-                setCurrentSegmentAndPassengerPermutationsIndex(index)
-              }
-            />
-          )
-        )}
-    </div>
-    <h2 className="h3--semibold" style={{ marginBlock: "12px 0px" }}>
+    {segmentAndPassengerPermutationsCount > 1 && (
+      <div style={{ display: "flex", columnGap: "4px" }}>
+        {Array(segmentAndPassengerPermutationsCount)
+          .fill(0)
+          .map((_, index) =>
+            index === currentSegmentAndPassengerPermutationsIndex ? (
+              <ActiveSegment key={`segment_${index}`} />
+            ) : (
+              <InactiveSegment
+                key={`segment_${index}`}
+                onClick={() =>
+                  setCurrentSegmentAndPassengerPermutationsIndex(index)
+                }
+              />
+            )
+          )}
+      </div>
+    )}
+    <h2
+      className="h3--semibold"
+      style={
+        segmentAndPassengerPermutationsCount > 1
+          ? { marginBlock: "12px 0px" }
+          : {}
+      }
+    >
       Flight to {currentSegment.destination.iata_code}
       <span
         className="p2--regular"
@@ -70,7 +79,8 @@ const InactiveSegment: React.FC<{
       height: "4px",
       padding: "0",
       borderRadius: "4px",
-      backgroundColor: "rgba(var(--ACCENT), var(--ACCENT-LIGHT-200))",
+      backgroundColor:
+        "var(--TERTIARY, rgba(var(--ACCENT), var(--ACCENT-LIGHT-200)))",
       transition: "background-color 0.3s var(--TRANSITION-CUBIC-BEZIER)",
       ...style,
     }}
@@ -81,7 +91,7 @@ const ActiveSegment = () => (
   <InactiveSegment
     onClick={undefined}
     style={{
-      backgroundColor: "rgb(var(--ACCENT))",
+      backgroundColor: "var(--SECONDARY, rgb(var(--ACCENT)))",
     }}
   />
 );

package/src/components/{seats → DuffelAncillaries/seats}/SeatUnavailable.tsx

@@ -1,6 +1,6 @@
+import { Icon } from "@components/shared/Icon";
 import * as React from "react";
-import { SeatMapCabinRowSectionElementSeat } from "../../types/SeatMap";
-import { Icon } from "../Icon";
+import { SeatMapCabinRowSectionElementSeat } from "../../../types/SeatMap";
 
 export const SeatUnavailable: React.FC<{
   seat: SeatMapCabinRowSectionElementSeat;

package/src/components/DuffelPayments/DuffelPayments.tsx

@@ -0,0 +1,224 @@
+import { ErrorBoundary } from "@components/shared/ErrorBoundary";
+import { hasHighLuminance } from "@lib/hasHighLuminance";
+import { initializeLogger } from "@lib/logging";
+import {
+  CardElement,
+  Elements,
+  useElements,
+  useStripe,
+} from "@stripe/react-stripe-js";
+import { StripeCardElement, StripeError, loadStripe } from "@stripe/stripe-js";
+import * as React from "react";
+import { CustomStyles } from "../../types";
+import { Button } from "../shared/Button";
+
+const COMPONENT_CDN = process.env.COMPONENT_CDN || "";
+const hrefToComponentStyles = `${COMPONENT_CDN}/global.css`;
+
+const STRIPE_CARD_ELEMENT = "card";
+const COMPONENT_VERSION = process.env.COMPONENT_VERSION;
+
+export interface DuffelPaymentsProps {
+  paymentIntentClientToken: string;
+  onSuccessfulPayment: () => void;
+  onFailedPayment: (error: StripeError) => void;
+
+  styles?: CustomStyles;
+  debug?: boolean;
+}
+
+const CARD_ELEMENT_STYLE_BASE = {
+  color: "var(--GREY-900)",
+  fontFamily:
+    '"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif"',
+  fontSmoothing: "antialiased",
+  fontSize: "16px",
+  "::placeholder": {
+    color: "#ababb4",
+  },
+};
+
+const CARD_ELEMENT_STYLE_INVALID = {
+  color: "#ef4444",
+  iconColor: "#ef4444",
+};
+
+const CardPaymentComponent: React.FC<DuffelPaymentsProps> = ({
+  styles,
+  paymentIntentClientToken,
+  onSuccessfulPayment,
+  onFailedPayment,
+}) => {
+  const [cardElement, setCardElement] =
+    React.useState<StripeCardElement | null>(null);
+  const [isComplete, setIsComplete] = React.useState<boolean>(false);
+  const [isInvalid, setIsInvalid] = React.useState<boolean>(false);
+  const [isProcessing, setIsProcessing] = React.useState<boolean>(false);
+  const [errorMessage, setErrorMessage] = React.useState<string>("");
+  const stripe = useStripe();
+  const elements = useElements();
+
+  React.useEffect(() => {
+    if (elements && !cardElement) {
+      const maybeCard = elements?.getElement(STRIPE_CARD_ELEMENT);
+      maybeCard && setCardElement(maybeCard as StripeCardElement);
+    }
+  }, [elements, cardElement]);
+
+  React.useEffect(() => {
+    if (cardElement) {
+      cardElement.on("change", (event) => {
+        const { error, complete } = event;
+
+        if (error) {
+          setIsInvalid(true);
+          setErrorMessage(error.message);
+        } else {
+          setIsInvalid(false);
+        }
+        complete ? setIsComplete(true) : setIsComplete(false);
+      });
+    }
+  }, [cardElement]);
+
+  // User is responsible for handling outcome of payment.
+  const handleSubmit = async (
+    e: React.MouseEvent<HTMLFormElement, MouseEvent>
+  ) => {
+    e.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+
+    if (cardElement) {
+      setIsProcessing(true);
+      const decodedDuffelPaymentIntentClientToken = atob(
+        paymentIntentClientToken
+      );
+      const parsedDuffelPaymentIntentClientToken = JSON.parse(
+        decodedDuffelPaymentIntentClientToken
+      );
+      const { client_secret: clientSecret } =
+        parsedDuffelPaymentIntentClientToken;
+
+      const result = await stripe.confirmCardPayment(clientSecret, {
+        payment_method: {
+          card: cardElement,
+          metadata: {
+            duffel_components_version:
+              COMPONENT_VERSION || "failed-to-get-version",
+          },
+        },
+      });
+
+      setIsProcessing(false);
+      if (result.error) {
+        const { error } = result;
+        onFailedPayment(error);
+      } else {
+        onSuccessfulPayment();
+      }
+    }
+  };
+
+  return paymentIntentClientToken ? (
+    <div className="card-payment__container">
+      <form onSubmit={handleSubmit}>
+        {isProcessing && (
+          <div
+            className="card-payment--in-progress"
+            aria-live="polite"
+            aria-busy="true"
+          />
+        )}
+        <CardElement
+          className="card-details"
+          options={{
+            style: {
+              base: {
+                ...CARD_ELEMENT_STYLE_BASE,
+                ...(styles?.fontFamily && {
+                  fontFamily: styles.fontFamily,
+                }),
+              },
+              invalid: { ...CARD_ELEMENT_STYLE_INVALID },
+            },
+          }}
+        />
+        <div className="card-payment__container--invalid" role="alert">
+          {isInvalid && errorMessage}
+        </div>
+        <Button
+          className="card-payment__pay-button"
+          type="submit"
+          disabled={!isComplete || isProcessing}
+          aria-label="Pay"
+        >
+          {isProcessing ? "Processing..." : "Pay"}
+        </Button>
+      </form>
+    </div>
+  ) : null;
+};
+
+export const DuffelPayments: React.FC<DuffelPaymentsProps> = (props) => {
+  const [stripe, setStripe] = React.useState<Promise<any> | null>(null);
+  initializeLogger(props.debug || false);
+
+  const decodedDuffelPaymentIntentClientToken = atob(
+    props.paymentIntentClientToken
+  );
+
+  let parsedDuffelPaymentIntentClientToken;
+
+  try {
+    parsedDuffelPaymentIntentClientToken = JSON.parse(
+      decodedDuffelPaymentIntentClientToken
+    );
+  } catch (error) {
+    throw new Error("Invalid Duffel payment intent client token provided");
+  }
+
+  const { publishable_key: duffelPublishableKey } =
+    parsedDuffelPaymentIntentClientToken;
+
+  React.useEffect(() => {
+    if (!stripe && duffelPublishableKey) {
+      const stripe = loadStripe(duffelPublishableKey);
+      stripe && setStripe(stripe);
+    }
+  }, [stripe, duffelPublishableKey]);
+
+  const duffelComponentsStyle: React.CSSProperties = {
+    ...(props.styles?.accentColor && {
+      "--ACCENT": props.styles.accentColor,
+    }),
+    ...(props.styles?.accentColor &&
+      hasHighLuminance(props.styles.accentColor) && {
+        "--SECONDARY": "black",
+        "--TERTIARY": "grey",
+      }),
+    ...(props.styles?.fontFamily && {
+      "--FONT-FAMILY": props.styles.fontFamily,
+    }),
+    ...(props.styles?.buttonCornerRadius && {
+      "--BUTTON-RADIUS": props.styles.buttonCornerRadius,
+    }),
+    // `as any` is needed here is needed because we want to set css variables
+    // that are not part of the css properties type
+  } as any;
+
+  return (
+    <>
+      <link rel="stylesheet" href={hrefToComponentStyles}></link>
+
+      <div className="duffel-components" style={duffelComponentsStyle}>
+        <ErrorBoundary>
+          <Elements stripe={stripe}>
+            <CardPaymentComponent {...props} />
+          </Elements>
+        </ErrorBoundary>
+      </div>
+    </>
+  );
+};