From 6fa301f8e790a3c94a485307981acf4c9ec4811f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20J=C3=A4derberg?=
 <joakim.jaderberg@scandichotels.com>
Date: Thu, 4 Sep 2025 13:01:36 +0000
Subject: [PATCH] Merged in SW-3396-move-my-saved-cards-to-design-system (pull
 request #2762)

SW-3396 move my saved cards to design system

* Move PaymentOption, PaymentOptionsGroup, PaymentIcons and MySavedCards (renamed SelectPaymentMethod) to design-system

* Remove unused svg payment icons

* cleanu

* cleanup

* trackUpdatePaymentMethod: remove hotelId argument that was never passed


Approved-by: Anton Gunnarsson
---
 .../EnterDetails/Confirm/Guarantee/index.tsx  |  18 ++-
 .../EnterDetails/Payment/PaymentClient.tsx    |  15 +-
 .../HotelReservation/MySavedCards/index.tsx   |  45 ------
 .../Steps/ConfirmationStep/index.tsx          |  18 ++-
 .../GuaranteeLateArrival/Form/index.tsx       |  21 ++-
 .../HotelReservation/PaymentOption/index.tsx  |  55 -------
 .../PaymentOption/paymentOption.ts            |   5 -
 apps/scandic-web/constants/booking.ts         |  52 -------
 .../icons/payment/american-express.svg        |  17 ---
 .../_static/icons/payment/apple-pay.svg       |  21 ---
 .../_static/icons/payment/card-generic.svg    |  21 ---
 .../public/_static/icons/payment/dankort.svg  |  16 ---
 .../_static/icons/payment/diners-club.svg     |  16 ---
 .../public/_static/icons/payment/discover.svg |  28 ----
 .../_static/icons/payment/google-pay.svg      |  18 ---
 .../public/_static/icons/payment/jcb.svg      |  48 -------
 .../public/_static/icons/payment/klarna.svg   |  11 --
 .../public/_static/icons/payment/maestro.svg  |  15 --
 .../_static/icons/payment/mastercard.svg      |  15 --
 .../_static/icons/payment/mobilepay.svg       |  51 -------
 .../public/_static/icons/payment/paypal.svg   |  17 ---
 .../public/_static/icons/payment/swish.svg    |  38 -----
 .../public/_static/icons/payment/unionpay.svg |  24 ----
 .../public/_static/icons/payment/vipps.svg    |  16 ---
 .../public/_static/icons/payment/visa.svg     |  16 ---
 apps/scandic-web/utils/tracking/payment.ts    |   4 +-
 packages/common/constants/paymentMethod.ts    |  25 ++++
 .../.storybook/decorators/FormDecorator.tsx   |  10 ++
 .../Form/Checkbox/Checkbox.stories.tsx        |  18 +++
 .../Form/PaymentOption/PaymentOption.tsx      |  53 +++++++
 .../PaymentOptionsGroup.stories.tsx           |  46 ++++++
 .../PaymentOption/PaymentOptionsGroup.tsx     |  23 ++-
 .../PaymentOption/paymentOption.module.css    |   0
 .../SelectPaymentMethod.stories.tsx           |  45 ++++++
 .../Form/SelectPaymentMethod/index.tsx        |  62 ++++++++
 .../selectPaymentMethod.module.css            |   0
 .../Payment/Icons/AmericanExpressIcon.tsx     |  48 +++++++
 .../components/Payment/Icons/ApplePayIcon.tsx |  67 +++++++++
 .../Payment/Icons/ChinaUnionPayIcon.tsx       | 103 +++++++++++++
 .../components/Payment/Icons/DanKortIcon.tsx  |  45 ++++++
 .../Payment/Icons/DinersClubIcon.tsx          |  47 ++++++
 .../components/Payment/Icons/DiscoverIcon.tsx | 102 +++++++++++++
 .../Payment/Icons/GenericCardIcon.tsx         |  76 ++++++++++
 .../Payment/Icons/GooglePayIcon.tsx           |  58 ++++++++
 .../lib/components/Payment/Icons/IconProps.ts |   5 +
 .../lib/components/Payment/Icons/JcbIcon.tsx  | 115 +++++++++++++++
 .../components/Payment/Icons/KlarnaIcon.tsx   |  30 ++++
 .../components/Payment/Icons/MaestroIcon.tsx  |  49 +++++++
 .../Payment/Icons/MasterCardIcon.tsx          |  49 +++++++
 .../Payment/Icons/MobilePayIcon.tsx           | 135 ++++++++++++++++++
 .../components/Payment/Icons/PayPalIcon.tsx   |  61 ++++++++
 .../components/Payment/Icons/SwishIcon.tsx    | 112 +++++++++++++++
 .../components/Payment/Icons/VippsIcon.tsx    |  54 +++++++
 .../lib/components/Payment/Icons/VisaIcon.tsx |  55 +++++++
 .../Payment/PaymentMethodIcon.stories.tsx     |  81 +++++++++++
 .../components/Payment/PaymentMethodIcon.tsx  |  61 ++++++++
 packages/design-system/package.json           |  14 +-
 57 files changed, 1687 insertions(+), 583 deletions(-)
 delete mode 100644 apps/scandic-web/components/HotelReservation/MySavedCards/index.tsx
 delete mode 100644 apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
 delete mode 100644 apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.ts
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/american-express.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/apple-pay.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/card-generic.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/dankort.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/diners-club.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/discover.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/google-pay.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/jcb.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/klarna.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/maestro.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/mastercard.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/mobilepay.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/paypal.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/swish.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/unionpay.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/vipps.svg
 delete mode 100644 apps/scandic-web/public/_static/icons/payment/visa.svg
 create mode 100644 packages/design-system/.storybook/decorators/FormDecorator.tsx
 create mode 100644 packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx
 create mode 100644 packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx
 create mode 100644 packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx
 rename apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup/index.tsx => packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx (57%)
 rename {apps/scandic-web/components/HotelReservation => packages/design-system/lib/components/Form}/PaymentOption/paymentOption.module.css (100%)
 create mode 100644 packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx
 create mode 100644 packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx
 rename apps/scandic-web/components/HotelReservation/MySavedCards/mySavedCards.module.css => packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css (100%)
 create mode 100644 packages/design-system/lib/components/Payment/Icons/AmericanExpressIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/ApplePayIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/ChinaUnionPayIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/DanKortIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/DinersClubIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/DiscoverIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/GenericCardIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/GooglePayIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/IconProps.ts
 create mode 100644 packages/design-system/lib/components/Payment/Icons/JcbIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/KlarnaIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/MaestroIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/MasterCardIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/MobilePayIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/PayPalIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/SwishIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/VippsIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/Icons/VisaIcon.tsx
 create mode 100644 packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx
 create mode 100644 packages/design-system/lib/components/Payment/PaymentMethodIcon.tsx

diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
index 2e06a60b2..41eeca363 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/Guarantee/index.tsx
@@ -13,13 +13,13 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho
 import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
+import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
+import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import MySavedCards from "@/components/HotelReservation/MySavedCards"
-import PaymentOption from "@/components/HotelReservation/PaymentOption"
-
-import PaymentOptionsGroup from "../../Payment/PaymentOptionsGroup"
+import { trackUpdatePaymentMethod } from "@/utils/tracking"
 
 import styles from "./guarantee.module.css"
 
@@ -105,11 +105,19 @@ export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
         </div>
       </Checkbox>
       {savedCreditCards?.length && guarantee ? (
-        <MySavedCards savedCreditCards={savedCreditCards} />
+        <SelectPaymentMethod
+          formName="paymentMethod"
+          onChange={(method) => trackUpdatePaymentMethod({ method })}
+          paymentMethods={savedCreditCards.map((x) => ({
+            ...x,
+            cardType: x.cardType as PaymentMethodEnum,
+          }))}
+        />
       ) : null}
       {guarantee ? (
         <PaymentOptionsGroup
           name="paymentMethod"
+          onChange={(method) => trackUpdatePaymentMethod({ method })}
           label={
             savedCreditCards?.length
               ? intl.formatMessage({
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
index 182ddfb82..7eefda5e4 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx
@@ -8,7 +8,10 @@ import { Label } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
+import {
+  PAYMENT_METHOD_TITLES,
+  PaymentMethodEnum,
+} from "@scandic-hotels/common/constants/paymentMethod"
 import {
   bookingConfirmation,
   selectRate,
@@ -20,6 +23,8 @@ import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone"
 import Body from "@scandic-hotels/design-system/Body"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
+import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap"
@@ -27,15 +32,13 @@ import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
 import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
-import { PAYMENT_METHOD_TITLES } from "@/constants/booking"
 import { env } from "@/env/client"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"
-import { trackPaymentEvent } from "@/utils/tracking"
+import { trackPaymentEvent, trackUpdatePaymentMethod } from "@/utils/tracking"
 import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
 
 import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm"
@@ -50,7 +53,6 @@ import {
   writePaymentInfoToSessionStorage,
 } from "./helpers"
 import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
-import PaymentOptionsGroup from "./PaymentOptionsGroup"
 import { type PaymentFormData, paymentSchema } from "./schema"
 import TermsAndConditions from "./TermsAndConditions"
 
@@ -551,6 +553,7 @@ export default function PaymentClient({
                 <PaymentOptionsGroup
                   name="paymentMethod"
                   className={styles.paymentOptionContainer}
+                  onChange={(method) => trackUpdatePaymentMethod({ method })}
                 >
                   <Label className="sr-only">
                     {intl.formatMessage({
@@ -571,7 +574,7 @@ export default function PaymentClient({
                       {savedCreditCards.map((savedCreditCard) => (
                         <PaymentOption
                           key={savedCreditCard.id}
-                          value={savedCreditCard.id}
+                          value={savedCreditCard.id as PaymentMethodEnum}
                           label={
                             PAYMENT_METHOD_TITLES[
                               savedCreditCard.cardType as PaymentMethodEnum
diff --git a/apps/scandic-web/components/HotelReservation/MySavedCards/index.tsx b/apps/scandic-web/components/HotelReservation/MySavedCards/index.tsx
deleted file mode 100644
index 87a5a65c5..000000000
--- a/apps/scandic-web/components/HotelReservation/MySavedCards/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useIntl } from "react-intl"
-
-import { PAYMENT_METHOD_TITLES } from "@/constants/booking"
-
-import PaymentOptionsGroup from "../EnterDetails/Payment/PaymentOptionsGroup"
-import PaymentOption from "../PaymentOption"
-
-import styles from "./mySavedCards.module.css"
-
-import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
-import type { CreditCard } from "@scandic-hotels/trpc/types/user"
-
-interface MySavedCardsProps {
-  savedCreditCards: CreditCard[] | null
-}
-
-export default function MySavedCards({ savedCreditCards }: MySavedCardsProps) {
-  const intl = useIntl()
-  const mySavedCardsLabel = intl.formatMessage({
-    defaultMessage: "MY SAVED CARDS",
-  })
-
-  return (
-    <section className={styles.section}>
-      <PaymentOptionsGroup
-        name="paymentMethod"
-        label={mySavedCardsLabel}
-        className={styles.paymentOptionContainer}
-      >
-        {savedCreditCards?.map((savedCreditCard) => (
-          <PaymentOption
-            key={savedCreditCard.id}
-            value={savedCreditCard.id}
-            label={
-              PAYMENT_METHOD_TITLES[
-                savedCreditCard.cardType as PaymentMethodEnum
-              ]
-            }
-            cardNumber={savedCreditCard.truncatedNumber}
-          />
-        ))}
-      </PaymentOptionsGroup>
-    </section>
-  )
-}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
index 08a9aa78d..493a688ea 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/Steps/ConfirmationStep/index.tsx
@@ -6,6 +6,9 @@ import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMetho
 import { dt } from "@scandic-hotels/common/dt"
 import { Alert } from "@scandic-hotels/design-system/Alert"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
+import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
+import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/Link"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -13,10 +16,8 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
 import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"
 
-import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
-import MySavedCards from "@/components/HotelReservation/MySavedCards"
-import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import useLang from "@/hooks/useLang"
+import { trackUpdatePaymentMethod } from "@/utils/tracking"
 
 import styles from "./confirmationStep.module.css"
 
@@ -134,7 +135,16 @@ export default function ConfirmationStep({
                 })}
               />
               {savedCreditCards?.length ? (
-                <MySavedCards savedCreditCards={savedCreditCards} />
+                <SelectPaymentMethod
+                  paymentMethods={savedCreditCards.map((x) => ({
+                    ...x,
+                    cardType: x.cardType as PaymentMethodEnum,
+                  }))}
+                  onChange={(method) => {
+                    trackUpdatePaymentMethod({ method })
+                  }}
+                  formName={"paymentMethod"}
+                />
               ) : null}
               <PaymentOptionsGroup
                 name="paymentMethod"
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
index 295720096..53e1c345b 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
@@ -8,6 +8,9 @@ import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotel
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
+import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
+import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
+import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
 import Link from "@scandic-hotels/design-system/Link"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import { toast } from "@scandic-hotels/design-system/Toast"
@@ -18,11 +21,9 @@ import { env } from "@/env/client"
 import { useMyStayStore } from "@/stores/my-stay"
 
 import { writeGlaToSessionStorage } from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback/helpers"
-import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
-import MySavedCards from "@/components/HotelReservation/MySavedCards"
-import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"
+import { trackUpdatePaymentMethod } from "@/utils/tracking"
 import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
 
 import { type GuaranteeFormData, paymentSchema } from "./schema"
@@ -144,7 +145,16 @@ export default function Form() {
         onSubmit={methods.handleSubmit(handleGuaranteeLateArrival)}
       >
         {savedCreditCards?.length ? (
-          <MySavedCards savedCreditCards={savedCreditCards} />
+          <SelectPaymentMethod
+            formName="paymentMethod"
+            paymentMethods={savedCreditCards.map((x) => ({
+              ...x,
+              cardType: x.type as PaymentMethodEnum,
+            }))}
+            onChange={(method) => {
+              trackUpdatePaymentMethod({ method })
+            }}
+          />
         ) : null}
         <PaymentOptionsGroup
           name="paymentMethod"
@@ -155,6 +165,9 @@ export default function Form() {
                 })
               : undefined
           }
+          onChange={(method) => {
+            trackUpdatePaymentMethod({ method })
+          }}
         >
           <PaymentOption
             value={PaymentMethodEnum.card}
diff --git a/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx b/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
deleted file mode 100644
index 8774ced8e..000000000
--- a/apps/scandic-web/components/HotelReservation/PaymentOption/index.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { cx } from "class-variance-authority"
-import Image from "next/image"
-import { Radio } from "react-aria-components"
-
-import Body from "@scandic-hotels/design-system/Body"
-import Caption from "@scandic-hotels/design-system/Caption"
-
-import { PAYMENT_METHOD_ICONS } from "@/constants/booking"
-
-import styles from "./paymentOption.module.css"
-
-import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
-
-import type { PaymentOptionProps } from "./paymentOption"
-
-export default function PaymentOption({
-  value,
-  label,
-  cardNumber,
-}: PaymentOptionProps) {
-  return (
-    <Radio
-      value={value}
-      className={({ isFocusVisible }) =>
-        cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
-      }
-    >
-      {({ isSelected }) => (
-        <>
-          <div className={styles.titleContainer}>
-            <span
-              className={cx(styles.radio, { [styles.selected]: isSelected })}
-              aria-hidden
-            />
-            <Body>{label}</Body>
-          </div>
-          {cardNumber ? (
-            <>
-              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-              <Caption color="uiTextMediumContrast">•••• {cardNumber}</Caption>
-            </>
-          ) : (
-            <Image
-              className={styles.paymentOptionIcon}
-              src={PAYMENT_METHOD_ICONS[value as PaymentMethodEnum]}
-              alt={label}
-              width={48}
-              height={32}
-            />
-          )}
-        </>
-      )}
-    </Radio>
-  )
-}
diff --git a/apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.ts b/apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.ts
deleted file mode 100644
index 2bb3e3ab6..000000000
--- a/apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface PaymentOptionProps {
-  value: string
-  label: string
-  cardNumber?: string
-}
diff --git a/apps/scandic-web/constants/booking.ts b/apps/scandic-web/constants/booking.ts
index f782c4776..309216626 100644
--- a/apps/scandic-web/constants/booking.ts
+++ b/apps/scandic-web/constants/booking.ts
@@ -1,59 +1,7 @@
-import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
-
 export const SEARCHTYPE = "searchtype"
 
 export const MEMBERSHIP_FAILED_ERROR = "MembershipFailedError"
 
-export const PAYMENT_METHOD_TITLES: Record<
-  keyof typeof PaymentMethodEnum,
-  string
-> = {
-  card: "Credit card",
-  swish: "Swish",
-  vipps: "Vipps",
-  mobilePay: "MobilePay",
-  applePay: "Apple Pay",
-  googlePay: "Google Pay",
-  alipayPlus: "Alipay+",
-  weChatPay: "WeChat Pay",
-  payPal: "PayPal",
-  klarna: "Klarna",
-  americanExpress: "American Express",
-  dankort: "Dankort",
-  dinersClub: "Diners Club",
-  jcb: "JCB",
-  masterCard: "Mastercard",
-  visa: "Visa",
-  maestro: "Maestro",
-  chinaUnionPay: "China UnionPay",
-  discover: "Discover",
-}
-
-export const PAYMENT_METHOD_ICONS: Record<
-  keyof typeof PaymentMethodEnum,
-  string
-> = {
-  card: "/_static/icons/payment/card-generic.svg",
-  swish: "/_static/icons/payment/swish.svg",
-  vipps: "/_static/icons/payment/vipps.svg",
-  mobilePay: "/_static/icons/payment/mobilepay.svg",
-  applePay: "/_static/icons/payment/apple-pay.svg",
-  googlePay: "/_static/icons/payment/google-pay.svg",
-  alipayPlus: "/_static/icons/payment/alipay-plus.svg",
-  weChatPay: "/_static/icons/payment/wechat-pay.svg",
-  payPal: "/_static/icons/payment/paypal.svg",
-  klarna: "/_static/icons/payment/klarna.svg",
-  americanExpress: "/_static/icons/payment/american-express.svg",
-  dankort: "/_static/icons/payment/dankort.svg",
-  dinersClub: "/_static/icons/payment/diners-club.svg",
-  jcb: "/_static/icons/payment/jcb.svg",
-  masterCard: "/_static/icons/payment/mastercard.svg",
-  visa: "/_static/icons/payment/visa.svg",
-  maestro: "/_static/icons/payment/maestro.svg",
-  chinaUnionPay: "/_static/icons/payment/china-union-pay.svg",
-  discover: "/_static/icons/payment/discover.svg",
-}
-
 export enum CancellationRuleEnum {
   CancellableBefore6PM = "CancellableBefore6PM",
   NonCancellable = "NonCancellable",
diff --git a/apps/scandic-web/public/_static/icons/payment/american-express.svg b/apps/scandic-web/public/_static/icons/payment/american-express.svg
deleted file mode 100644
index 514ca8b8b..000000000
--- a/apps/scandic-web/public/_static/icons/payment/american-express.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46857)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="#0690FF"/>
-<mask id="mask0_5382_46857" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="16" y="0" width="32" height="32">
-<path d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_5382_46857)">
-<path d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<path d="M48 32V26.9295H44.1396L42.152 24.7317L40.1544 26.9295H27.4257V16.6865H23.3175L28.4133 5.15416H33.3278L35.082 9.10496V5.15416H41.1652L42.2212 8.13132L43.2844 5.15416H48V0H16V32H48ZM44.7896 25.647H48L43.7536 21.1438L48 16.6916H44.8408L42.2184 19.5574L39.621 16.6916H36.41L40.6316 21.1694L36.41 25.647H39.5316L42.1672 22.7557L44.7896 25.647ZM45.5408 21.1475L48 23.7638V18.5531L45.5408 21.1475ZM31.2287 23.5745V22.18H36.2819V20.1586H31.2287V18.7642H36.4098L36.41 16.6916H28.785V25.647H36.41L36.4098 23.5745H31.2287ZM45.582 15.3921H48V6.43668H44.2388L42.23 12.0145L40.2344 6.43668H36.4092V15.3921H38.827V9.12332L41.13 15.3921H43.2792L45.582 9.1104V15.3921ZM33.6586 15.3921H36.4092L32.4562 6.43668H29.3089L25.3556 15.3921H28.0422L28.7844 13.601H32.9038L33.6586 15.3921ZM32.0595 11.5924H29.6286L30.8441 8.66272L32.0595 11.5924Z" fill="#0690FF"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_5382_46857">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/apple-pay.svg b/apps/scandic-web/public/_static/icons/payment/apple-pay.svg
deleted file mode 100644
index fdffb3581..000000000
--- a/apps/scandic-web/public/_static/icons/payment/apple-pay.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46859)">
-<mask id="mask0_5382_46859" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="32">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_5382_46859)">
-<path d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z" fill="white"/>
-<path d="M22.2209 9.16162C24.4408 9.16162 25.9866 10.6918 25.9866 12.9197C25.9866 15.1555 24.409 16.6936 22.1653 16.6936H19.7074V20.6023H17.9316V9.16162H22.2209ZM19.7074 15.203H21.745C23.2911 15.203 24.171 14.3706 24.171 12.9276C24.171 11.4847 23.2911 10.6601 21.753 10.6601H19.7074V15.203Z" fill="black"/>
-<path d="M26.4507 18.2316C26.4507 16.7727 27.5686 15.8768 29.5508 15.7658L31.834 15.6311V14.9889C31.834 14.0613 31.2076 13.5063 30.1613 13.5063C29.17 13.5063 28.5516 13.9819 28.4011 14.7273H26.7838C26.8789 13.2208 28.1632 12.1108 30.2246 12.1108C32.2463 12.1108 33.5386 13.1812 33.5386 14.854V20.6021H31.8974V19.2305H31.8579C31.3743 20.1582 30.3198 20.7448 29.2257 20.7448C27.5924 20.7448 26.4507 19.73 26.4507 18.2316ZM31.834 17.4784V16.8204L29.7805 16.9472C28.7578 17.0186 28.1791 17.4705 28.1791 18.184C28.1791 18.9133 28.7816 19.3891 29.7013 19.3891C30.8984 19.3891 31.834 18.5645 31.834 17.4784Z" fill="black"/>
-<path d="M35.0882 23.6707V22.2832C35.2149 22.3148 35.5002 22.3148 35.6431 22.3148C36.4358 22.3148 36.864 21.9819 37.1256 21.1257C37.1256 21.1098 37.2763 20.6182 37.2763 20.6103L34.2637 12.2617H36.1187L38.2278 19.0484H38.2594L40.3684 12.2617H42.176L39.0521 21.0384C38.3389 23.0602 37.5143 23.7103 35.7859 23.7103C35.6431 23.7103 35.2149 23.6944 35.0882 23.6707Z" fill="black"/>
-<path d="M12.6941 10.2782C13.1221 9.74283 13.4126 9.02407 13.336 8.28955C12.7094 8.32071 11.9449 8.70287 11.5023 9.23863C11.1048 9.69739 10.7531 10.4463 10.8448 11.15C11.5481 11.211 12.2507 10.7984 12.6941 10.2782Z" fill="black"/>
-<path d="M13.328 11.2873C12.3067 11.2264 11.4383 11.867 10.9505 11.867C10.4625 11.867 9.71557 11.3179 8.90773 11.3327C7.85629 11.3482 6.88069 11.9427 6.34709 12.8882C5.24965 14.7797 6.05749 17.5855 7.12469 19.126C7.64297 19.8882 8.26757 20.7274 9.09057 20.6972C9.86817 20.6667 10.1729 20.1937 11.1181 20.1937C12.0627 20.1937 12.3372 20.6972 13.1603 20.682C14.0139 20.6667 14.5476 19.9194 15.0659 19.1566C15.6604 18.2878 15.9038 17.4488 15.9191 17.4028C15.9038 17.3875 14.2731 16.762 14.258 14.8862C14.2426 13.3155 15.5383 12.5684 15.5992 12.5221C14.8676 11.44 13.7243 11.3179 13.328 11.2873Z" fill="black"/>
-<path d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z" stroke="black" stroke-width="1.1"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_5382_46859">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/card-generic.svg b/apps/scandic-web/public/_static/icons/payment/card-generic.svg
deleted file mode 100644
index c77c3b000..000000000
--- a/apps/scandic-web/public/_static/icons/payment/card-generic.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46864)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="url(#paint0_linear_5382_46864)"/>
-<path d="M38.8104 26H33.2104" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M30.3412 26H24.7412" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M21.872 26H16.272" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M13.4027 26H7.80273" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
-<path d="M12.869 9.59473H7.53566C6.35746 9.59473 5.40234 10.5498 5.40234 11.728V15.4614C5.40234 16.6396 6.35746 17.5947 7.53566 17.5947H12.869C14.0472 17.5947 15.0023 16.6396 15.0023 15.4614V11.728C15.0023 10.5498 14.0472 9.59473 12.869 9.59473Z" fill="#EDEDED"/>
-<path d="M9.00811 9.99997V17.2M9.00811 14.8H5.80811M14.6081 14.8H11.4081M9.00811 12.4H5.80811M14.5974 12.4H11.3014V17.2213M7.53611 9.86133H12.8694C13.9004 9.86133 14.7361 10.697 14.7361 11.728V15.4613C14.7361 16.4922 13.9004 17.328 12.8694 17.328H7.53611C6.50515 17.328 5.66943 16.4922 5.66943 15.4613V11.728C5.66943 10.697 6.50515 9.86133 7.53611 9.86133Z" stroke="black" stroke-width="0.5332"/>
-<path d="M42.597 6H36.9971" stroke="#EDEDED" stroke-width="1.6" stroke-linecap="round"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_5382_46864" x1="13.9733" y1="6.18668" x2="21.975" y2="23.9969" gradientUnits="userSpaceOnUse">
-<stop stop-color="#C1C1C1"/>
-<stop offset="1" stop-color="#9F9F9F"/>
-</linearGradient>
-<clipPath id="clip0_5382_46864">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/dankort.svg b/apps/scandic-web/public/_static/icons/payment/dankort.svg
deleted file mode 100644
index d19f519a8..000000000
--- a/apps/scandic-web/public/_static/icons/payment/dankort.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46855)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path d="M16.6894 5.12549C10.7022 5.12549 5.83105 10.0036 5.83105 15.9995C5.83105 21.996 10.7022 26.8746 16.6894 26.8746H31.3125C37.2989 26.8746 42.1694 21.996 42.1694 15.9995C42.1694 10.0036 37.2989 5.12549 31.3125 5.12549H16.6894Z" fill="white"/>
-<path d="M30.5917 21.6152L26.5498 16.499C25.8021 19.9873 23.3557 21.6146 18.7696 21.6146H9.62988C11.2833 23.6955 13.833 25.0323 16.689 25.0323H31.3122C34.1671 25.0323 36.7163 23.6961 38.3698 21.6152H30.5917Z" fill="#E41D27"/>
-<path d="M33.8687 15.3357L38.7313 21.1278C39.7384 19.6701 40.3297 17.9031 40.3297 15.9997C40.3297 13.9909 39.6709 12.133 38.5589 10.6313L33.8687 15.3357Z" fill="#E41D27"/>
-<path d="M14.1063 14.0054L12.8096 17.5764H18.0415C19.5881 17.5764 20.0561 16.9351 20.4022 15.7004C20.7448 14.4792 19.8844 14.0054 18.8274 14.0054H14.1063Z" fill="#E41D27"/>
-<path d="M20.0894 10.1422C23.7207 10.1422 26.4568 11.0676 26.7384 14.132L30.5601 10.1418H38.17C36.5146 8.2011 34.0545 6.96826 31.3123 6.96826H16.6892C13.9461 6.96826 11.4856 8.2011 9.83008 10.1422H20.0894Z" fill="#E41D27"/>
-</g>
-<defs>
-<clipPath id="clip0_5382_46855">
-<rect width="48" height="32" rx="3" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/diners-club.svg b/apps/scandic-web/public/_static/icons/payment/diners-club.svg
deleted file mode 100644
index d836b7e7d..000000000
--- a/apps/scandic-web/public/_static/icons/payment/diners-club.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46858)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="url(#paint0_linear_5382_46858)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.16 25.9335C31.6086 25.9594 36.5818 21.505 36.5818 16.086C36.5818 10.16 31.6086 6.06396 26.16 6.06592H21.4708C15.9569 6.06396 11.4185 10.1613 11.4185 16.086C11.4185 21.5062 15.9569 25.9595 21.4708 25.9335H26.16Z" fill="#3477B9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.474 6.86084C16.4355 6.8624 12.3527 10.9325 12.3516 15.9558C12.3527 20.9782 16.4355 25.0479 21.474 25.0495C26.5136 25.0479 30.5972 20.9782 30.598 15.9558C30.5972 10.9325 26.5136 6.8624 21.474 6.86084ZM15.6915 15.9558C15.6963 13.5011 17.2345 11.4079 19.4037 10.5761V21.3342C17.2345 20.5028 15.6962 18.4108 15.6915 15.9558ZM23.5435 21.3366V10.5758C25.7134 11.4056 27.2541 13.4999 27.258 15.9558C27.2541 18.4124 25.7134 20.5052 23.5435 21.3366Z" fill="white"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_5382_46858" x1="8.9407e-07" y1="8.4" x2="48" y2="21.6" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3479C0"/>
-<stop offset="1" stop-color="#133362"/>
-</linearGradient>
-<clipPath id="clip0_5382_46858">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/discover.svg b/apps/scandic-web/public/_static/icons/payment/discover.svg
deleted file mode 100644
index b74ddb703..000000000
--- a/apps/scandic-web/public/_static/icons/payment/discover.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46865)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6001 32.0002H46.4009C47.2841 32.0002 48.0001 31.2846 48.0001 30.3985V19.2002C48.0001 19.2002 35.1447 28.0427 11.6001 32.0002Z" fill="#E7792B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M45.2353 13.545C45.2353 12.2851 44.3553 11.5581 42.8213 11.5581H40.8481V18.2879H42.1773V15.5844H42.3509L44.1925 18.2879H45.8285L43.6809 15.4526C44.6833 15.2517 45.2353 14.5754 45.2353 13.545ZM42.5657 14.6565H42.1773V12.6181H42.5869C43.4153 12.6181 43.8661 12.9608 43.8661 13.6155C43.8661 14.2923 43.4153 14.6565 42.5657 14.6565Z" fill="#1A1918"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.1934 18.2879H39.9668V17.1486H37.5229V15.332H39.8767V14.1921H37.5229V12.6985H39.9668V11.5581H36.1934V18.2879Z" fill="#1A1918"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3072 16.0784L30.4883 11.5581H29.0347L31.9295 18.4605H32.6453L35.5921 11.5581H34.1498L32.3072 16.0784Z" fill="#1A1918"/>
-<path d="M25.8471 18.6877C27.8847 18.6877 29.5366 17.058 29.5366 15.0477C29.5366 13.0374 27.8847 11.4077 25.8471 11.4077C23.8095 11.4077 22.1577 13.0374 22.1577 15.0477C22.1577 17.058 23.8095 18.6877 25.8471 18.6877Z" fill="url(#paint0_radial_5382_46865)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4893 14.9275C16.4893 16.9056 18.0636 18.4393 20.0896 18.4393C20.6623 18.4393 21.1527 18.3283 21.7577 18.0472V16.502C21.2257 17.0272 20.7548 17.2391 20.1515 17.2391C18.8115 17.2391 17.8604 16.2805 17.8604 14.9176C17.8604 13.6256 18.8415 12.6064 20.0896 12.6064C20.7242 12.6064 21.2046 12.8298 21.7577 13.3636V11.8192C21.1738 11.5269 20.6934 11.4058 20.121 11.4058C18.1053 11.4058 16.4893 12.9707 16.4893 14.9275Z" fill="#1A1918"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1073 14.1406C13.3088 13.8492 13.0745 13.6568 13.0745 13.2933C13.0745 12.8692 13.4922 12.5473 14.0657 12.5473C14.4644 12.5473 14.7919 12.7088 15.1385 13.0923L15.8347 12.193C15.2626 11.6992 14.5782 11.4468 13.8303 11.4468C12.6234 11.4468 11.7029 12.2736 11.7029 13.3752C11.7029 14.3023 12.1316 14.7769 13.381 15.2207C13.902 15.4019 14.1671 15.5225 14.301 15.6039C14.5666 15.7753 14.6997 16.0176 14.6997 16.3002C14.6997 16.8454 14.2604 17.2495 13.6667 17.2495C13.0321 17.2495 12.5211 16.9364 12.2146 16.3519L11.355 17.1686C11.968 18.0562 12.7043 18.4496 13.7167 18.4496C15.0992 18.4496 16.0693 17.5427 16.0693 16.2399C16.0693 15.1707 15.6207 14.6866 14.1073 14.1406Z" fill="#1A1918"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.52344 11.5581H10.854V18.2879H9.52344V11.5581Z" fill="#1A1918"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.24987 11.5581H3.29688V18.2879H5.2396C6.27264 18.2879 7.01844 18.0474 7.67332 17.5111C8.45152 16.8756 8.91164 15.918 8.91164 14.9277C8.91164 12.9415 7.40767 11.5581 5.24987 11.5581ZM6.8042 16.6135C6.38596 16.9861 5.84312 17.1486 4.98348 17.1486H4.6264V12.6985H4.98348C5.84312 12.6985 6.36463 12.85 6.8042 13.2426C7.26432 13.6469 7.54104 14.2733 7.54104 14.9178C7.54104 15.5639 7.26432 16.2095 6.8042 16.6135Z" fill="#1A1918"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M46.0842 11.8109C46.0842 11.6931 46.0022 11.6284 45.8574 11.6284H45.665V12.2199H45.8082V11.9906L45.9758 12.2199H46.1506L45.9534 11.976C46.0378 11.9537 46.0842 11.8931 46.0842 11.8109ZM45.8322 11.8918H45.8082V11.7371H45.8338C45.9046 11.7371 45.9414 11.7623 45.9414 11.813C45.9414 11.8655 45.9042 11.8918 45.8322 11.8918Z" fill="#1A1918"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M45.8858 11.4077C45.5946 11.4077 45.3638 11.637 45.3638 11.9233C45.3638 12.2096 45.5974 12.4392 45.8858 12.4392C46.1694 12.4392 46.4018 12.2072 46.4018 11.9233C46.4018 11.641 46.1694 11.4077 45.8858 11.4077ZM45.8838 12.3471C45.655 12.3471 45.4674 12.1589 45.4674 11.9241C45.4674 11.6885 45.6526 11.5006 45.8838 11.5006C46.1118 11.5006 46.2978 11.693 46.2978 11.9241C46.2978 12.1568 46.1118 12.3471 45.8838 12.3471Z" fill="#1A1918"/>
-</g>
-<defs>
-<radialGradient id="paint0_radial_5382_46865" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(28.6 17.5998) rotate(-142.431) scale(6.56048 6.47264)">
-<stop stop-color="#F59900"/>
-<stop offset="0.210082" stop-color="#F39501"/>
-<stop offset="0.908163" stop-color="#CE3C0B"/>
-<stop offset="1" stop-color="#A4420A"/>
-</radialGradient>
-<clipPath id="clip0_5382_46865">
-<rect width="48" height="32" rx="3" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/google-pay.svg b/apps/scandic-web/public/_static/icons/payment/google-pay.svg
deleted file mode 100644
index 459bee411..000000000
--- a/apps/scandic-web/public/_static/icons/payment/google-pay.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="48" height="26" viewBox="0 0 48 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5597_436)">
-<path d="M35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z" fill="white"/>
-<path d="M35.234 1.053C36.8106 1.053 38.3426 1.3715 39.7851 1.9955C41.183 2.6 42.434 3.4645 43.5191 4.563C44.5979 5.6615 45.4468 6.942 46.0404 8.3655C46.6532 9.8345 46.966 11.3945 46.966 13C46.966 14.6055 46.6532 16.1655 46.0404 17.6345C45.4468 19.058 44.5979 20.332 43.5191 21.437C42.4404 22.5355 41.183 23.4 39.7851 24.0045C38.3426 24.6285 36.8106 24.947 35.234 24.947H12.766C11.1894 24.947 9.65745 24.6285 8.21489 24.0045C6.81702 23.4 5.56596 22.5355 4.48085 21.437C3.40213 20.3385 2.55319 19.058 1.95957 17.6345C1.34681 16.1655 1.03404 14.6055 1.03404 13C1.03404 11.3945 1.34681 9.8345 1.95957 8.3655C2.55319 6.942 3.40213 5.668 4.48085 4.563C5.55957 3.4645 6.81702 2.6 8.21489 1.9955C9.65745 1.3715 11.1894 1.053 12.766 1.053H35.234ZM35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z" fill="#3C4043"/>
-<path d="M23.0598 13.9235V17.856H21.8359V8.14502H25.0806C25.9029 8.14502 26.6041 8.42452 27.1778 8.98352C27.7642 9.54252 28.0575 10.225 28.0575 11.031C28.0575 11.8565 27.7642 12.539 27.1778 13.0915C26.6104 13.644 25.9092 13.917 25.0806 13.917H23.0598V13.9235ZM23.0598 9.34102V12.7275H25.1061C25.5905 12.7275 25.9985 12.5585 26.3172 12.227C26.6423 11.8955 26.808 11.4925 26.808 11.0375C26.808 10.589 26.6423 10.1925 26.3172 9.86102C25.9985 9.51652 25.5969 9.34752 25.1061 9.34752H23.0598V9.34102Z" fill="#3C4043"/>
-<path d="M31.2576 10.9912C32.1628 10.9912 32.8767 11.2382 33.3994 11.7322C33.9221 12.2262 34.1835 12.9022 34.1835 13.7602V17.8552H33.0169V16.9322H32.9659C32.4624 17.6927 31.7867 18.0697 30.9452 18.0697C30.2249 18.0697 29.6257 17.8552 29.1412 17.4197C28.6568 16.9842 28.4146 16.4447 28.4146 15.7947C28.4146 15.1057 28.6695 14.5597 29.1795 14.1567C29.6895 13.7472 30.3715 13.5457 31.2193 13.5457C31.946 13.5457 32.5452 13.6822 33.0106 13.9552V13.6692C33.0106 13.2337 32.8448 12.8697 32.507 12.5642C32.1691 12.2587 31.7739 12.1092 31.3213 12.1092C30.6393 12.1092 30.0974 12.4017 29.7022 12.9932L28.6249 12.3042C29.2177 11.4267 30.0974 10.9912 31.2576 10.9912ZM29.6767 15.8142C29.6767 16.1392 29.8106 16.4122 30.0847 16.6267C30.3524 16.8412 30.6711 16.9517 31.0345 16.9517C31.5508 16.9517 32.0098 16.7567 32.4114 16.3667C32.813 15.9767 33.0169 15.5217 33.0169 14.9952C32.6345 14.6897 32.1054 14.5337 31.4233 14.5337C30.9261 14.5337 30.5118 14.6572 30.1803 14.8977C29.8424 15.1512 29.6767 15.4567 29.6767 15.8142Z" fill="#3C4043"/>
-<path d="M40.8385 11.2065L36.7588 20.7745H35.4966L37.0138 17.427L34.3237 11.2065H35.656L37.5938 15.9775H37.6193L39.5062 11.2065H40.8385Z" fill="#3C4043"/>
-<path d="M18.1926 13.1301C18.1926 12.7232 18.1569 12.3339 18.0906 11.9595H12.9604V14.1045L15.915 14.1051C15.7952 14.8188 15.4095 15.4272 14.8186 15.8328V17.2245H16.5773C17.6043 16.2553 18.1926 14.8227 18.1926 13.1301Z" fill="#4285F4"/>
-<path d="M14.8184 15.8321C14.3289 16.1688 13.6984 16.3658 12.9609 16.3658C11.5362 16.3658 10.3276 15.3869 9.89475 14.0674H8.08057V15.5026C8.97937 17.3213 10.8267 18.5693 12.9609 18.5693C14.4359 18.5693 15.6751 18.0746 16.5771 17.2231L14.8184 15.8321Z" fill="#34A853"/>
-<path d="M9.72406 13.0025C9.72406 12.632 9.78462 12.2739 9.8949 11.9372V10.502H8.08072C7.70908 11.254 7.5 12.1029 7.5 13.0025C7.5 13.9021 7.70972 14.751 8.08072 15.5031L9.8949 14.0679C9.78462 13.7312 9.72406 13.373 9.72406 13.0025Z" fill="#FABB05"/>
-<path d="M12.9614 9.63953C13.7665 9.63953 14.4874 9.92229 15.0567 10.4748L16.6152 8.88684C15.6686 7.98789 14.4345 7.43604 12.9614 7.43604C10.8278 7.43604 8.97986 8.68403 8.08105 10.5027L9.89524 11.9379C10.3281 10.6184 11.5367 9.63953 12.9614 9.63953Z" fill="#E94235"/>
-</g>
-<defs>
-<clipPath id="clip0_5597_436">
-<rect width="48" height="26" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/jcb.svg b/apps/scandic-web/public/_static/icons/payment/jcb.svg
deleted file mode 100644
index dd21f891e..000000000
--- a/apps/scandic-web/public/_static/icons/payment/jcb.svg
+++ /dev/null
@@ -1,48 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46863)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path d="M40.3598 23.5199C40.3598 26.3199 38.0796 28.5999 35.2796 28.5999H7.63965V8.4799C7.63965 5.6799 9.91965 3.3999 12.7196 3.3999H40.3598V23.5199Z" fill="white"/>
-<path d="M31.3599 18.3599H33.4599C33.5199 18.3599 33.6599 18.3399 33.7199 18.3399C34.1199 18.2599 34.4599 17.8999 34.4599 17.3999C34.4599 16.9199 34.1199 16.5599 33.7199 16.4599C33.6599 16.4399 33.5399 16.4399 33.4599 16.4399H31.3599V18.3599Z" fill="url(#paint0_linear_5382_46863)"/>
-<path d="M33.2196 5.1001C31.2196 5.1001 29.5796 6.7201 29.5796 8.7401V12.5201H34.7196C34.8396 12.5201 34.9796 12.5201 35.0796 12.5401C36.2396 12.6001 37.0996 13.2001 37.0996 14.2401C37.0996 15.0601 36.5196 15.7601 35.4396 15.9001V15.9401C36.6196 16.0201 37.5196 16.6801 37.5196 17.7001C37.5196 18.8001 36.5196 19.5201 35.1996 19.5201H29.5596V26.9201H34.8996C36.8996 26.9201 38.5396 25.3001 38.5396 23.2801V5.1001H33.2196Z" fill="url(#paint1_linear_5382_46863)"/>
-<path d="M34.1999 14.4801C34.1999 14.0001 33.8599 13.6801 33.4599 13.6201C33.4199 13.6201 33.3199 13.6001 33.2599 13.6001H31.3599V15.3601H33.2599C33.3199 15.3601 33.4399 15.3601 33.4599 15.3401C33.8599 15.2801 34.1999 14.9601 34.1999 14.4801Z" fill="url(#paint2_linear_5382_46863)"/>
-<path d="M23.1595 5.1001C21.1595 5.1001 19.5195 6.7201 19.5195 8.7401V13.5001C20.4395 12.7201 22.0395 12.2201 24.6195 12.3401C25.9995 12.4001 27.4795 12.7801 27.4795 12.7801V14.3201C26.7395 13.9401 25.8595 13.6001 24.7195 13.5201C22.7595 13.3801 21.5795 14.3401 21.5795 16.0201C21.5795 17.7201 22.7595 18.6801 24.7195 18.5201C25.8595 18.4401 26.7395 18.0801 27.4795 17.7201V19.2601C27.4795 19.2601 26.0195 19.6401 24.6195 19.7001C22.0395 19.8201 20.4395 19.3201 19.5195 18.5401V26.9401H24.8595C26.8595 26.9401 28.4995 25.3201 28.4995 23.3001V5.1001H23.1595Z" fill="url(#paint3_linear_5382_46863)"/>
-<path d="M13.0999 5.1001C11.0999 5.1001 9.45994 6.7201 9.45994 8.7401V17.7201C10.4799 18.2201 11.5399 18.5401 12.5999 18.5401C13.8599 18.5401 14.5399 17.7801 14.5399 16.7401V12.5001H17.6599V16.7201C17.6599 18.3601 16.6399 19.7001 13.1799 19.7001C11.0799 19.7001 9.43994 19.2401 9.43994 19.2401V26.9001H14.7799C16.7799 26.9001 18.4199 25.2801 18.4199 23.2601V5.1001H13.0999Z" fill="url(#paint4_linear_5382_46863)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_5382_46863" x1="24.3923" y1="16.0328" x2="50.4301" y2="16.0328" gradientUnits="userSpaceOnUse">
-<stop stop-color="#007940"/>
-<stop offset="0.2285" stop-color="#00873F"/>
-<stop offset="0.7433" stop-color="#40A737"/>
-<stop offset="1" stop-color="#5CB531"/>
-</linearGradient>
-<linearGradient id="paint1_linear_5382_46863" x1="29.576" y1="16.001" x2="38.5641" y2="16.001" gradientUnits="userSpaceOnUse">
-<stop stop-color="#007940"/>
-<stop offset="0.2285" stop-color="#00873F"/>
-<stop offset="0.7433" stop-color="#40A737"/>
-<stop offset="1" stop-color="#5CB531"/>
-</linearGradient>
-<linearGradient id="paint2_linear_5382_46863" x1="29.5759" y1="14.4771" x2="38.5637" y2="14.4771" gradientUnits="userSpaceOnUse">
-<stop stop-color="#007940"/>
-<stop offset="0.2285" stop-color="#00873F"/>
-<stop offset="0.7433" stop-color="#40A737"/>
-<stop offset="1" stop-color="#5CB531"/>
-</linearGradient>
-<linearGradient id="paint3_linear_5382_46863" x1="19.4676" y1="16.001" x2="28.3315" y2="16.001" gradientUnits="userSpaceOnUse">
-<stop stop-color="#6C2C2F"/>
-<stop offset="0.1735" stop-color="#882730"/>
-<stop offset="0.5731" stop-color="#BE1833"/>
-<stop offset="0.8585" stop-color="#DC0436"/>
-<stop offset="1" stop-color="#E60039"/>
-</linearGradient>
-<linearGradient id="paint4_linear_5382_46863" x1="9.45538" y1="16.001" x2="18.5822" y2="16.001" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1F286F"/>
-<stop offset="0.4751" stop-color="#004E94"/>
-<stop offset="0.8261" stop-color="#0066B1"/>
-<stop offset="1" stop-color="#006FBC"/>
-</linearGradient>
-<clipPath id="clip0_5382_46863">
-<rect width="48" height="32" rx="3" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/klarna.svg b/apps/scandic-web/public/_static/icons/payment/klarna.svg
deleted file mode 100644
index 63cbe91bc..000000000
--- a/apps/scandic-web/public/_static/icons/payment/klarna.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46853)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="#FEB3C7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9263 19.812H15.6224V12.0444H13.9263V19.812ZM24.6661 15.3204V14.6257H24.6448L23.1645 14.6254L23.0814 14.6257V19.812H24.6855V17.094C24.6855 16.3053 25.5972 15.9594 26.2229 16.1342C26.229 16.136 26.2353 16.1349 26.2418 16.1349V14.6258C25.585 14.6258 24.9813 14.9043 24.6661 15.3204ZM19.21 18.6108C18.3791 18.6108 17.7056 17.9876 17.7056 17.2188C17.7056 16.45 18.3791 15.8268 19.21 15.8268C20.0408 15.8268 20.7144 16.45 20.7144 17.2188C20.7144 17.9876 20.0408 18.6108 19.21 18.6108ZM20.6993 14.985C20.2417 14.6686 19.6831 14.482 19.0797 14.482C17.5306 14.482 16.2748 15.7074 16.2748 17.2188C16.2748 18.7302 17.5306 19.9556 19.0797 19.9556C19.6831 19.9556 20.2417 19.769 20.6993 19.4527V19.812H22.0848V14.6257H20.6993V14.985ZM30.2081 14.486C29.5722 14.486 28.9706 14.6785 28.5684 15.2098V14.6257H28.5471L27.0668 14.6254L26.9837 14.6257V19.812H28.5877V16.9752C28.5877 16.1865 29.1299 15.8003 29.7826 15.8003C30.482 15.8003 30.8841 16.208 30.8841 16.9644V19.812H32.4737V16.5138C32.4737 15.3066 31.4901 14.486 30.2081 14.486ZM40.5357 17.9723C39.984 17.9723 39.5368 18.4087 39.5368 18.9471C39.5368 19.4853 39.984 19.9217 40.5357 19.9217C41.0873 19.9217 41.5349 19.4853 41.5349 18.9471C41.5349 18.4087 41.0873 17.9723 40.5357 17.9723ZM35.9713 18.6108C35.1403 18.6108 34.4669 17.9876 34.4669 17.2188C34.4669 16.45 35.1403 15.8268 35.9713 15.8268C36.8021 15.8268 37.4755 16.45 37.4755 17.2188C37.4755 17.9876 36.8021 18.6108 35.9713 18.6108ZM37.4606 14.985C37.003 14.6686 36.4444 14.482 35.8409 14.482C34.2918 14.482 33.036 15.7074 33.036 17.2188C33.036 18.7302 34.2918 19.9556 35.8409 19.9556C36.4444 19.9556 37.003 19.769 37.4606 19.4527V19.812H38.8459V14.6257H37.4606V14.985ZM39.8533 14.7203H39.9306C39.9791 14.7203 39.9998 14.7434 39.9998 14.7786C39.9998 14.8138 39.9863 14.84 39.9306 14.84H39.8533V14.7203ZM39.8545 14.9034H39.9316L39.9967 15.0482H40.0741L40.0017 14.8912C40.0481 14.8712 40.0717 14.8319 40.0717 14.7786C40.0717 14.7051 40.0141 14.6559 39.9306 14.6559H39.7832V15.0472H39.8545V14.9034ZM6.46533 19.812H8.23325V12.0444H6.46533V19.812ZM12.7708 12.0451H11.0543C11.0193 13.7986 9.98109 15.3123 8.47597 16.0614L11.1134 19.812H13.267L10.8696 16.4004C12.0667 15.2546 12.7466 13.7101 12.7708 12.0451ZM39.9131 14.5573C40.0813 14.5573 40.2173 14.6922 40.2173 14.8581C40.2173 15.024 40.0813 15.1588 39.9131 15.1588C39.7452 15.1588 39.609 15.024 39.609 14.8581C39.609 14.6922 39.7452 14.5573 39.9131 14.5573ZM39.9131 15.2302C40.1213 15.2302 40.2905 15.0632 40.2905 14.8581C40.2905 14.6529 40.1213 14.486 39.9131 14.486C39.7048 14.486 39.5368 14.6529 39.5368 14.8581C39.5368 15.0632 39.7048 15.2302 39.9131 15.2302Z" fill="black"/>
-</g>
-<defs>
-<clipPath id="clip0_5382_46853">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/maestro.svg b/apps/scandic-web/public/_static/icons/payment/maestro.svg
deleted file mode 100644
index c55ea25ef..000000000
--- a/apps/scandic-web/public/_static/icons/payment/maestro.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46861)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z" fill="#00A2E5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z" fill="#7375CF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z" fill="#00A2E5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z" fill="#EB001B"/>
-</g>
-<defs>
-<clipPath id="clip0_5382_46861">
-<rect width="48" height="32" rx="3" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/mastercard.svg b/apps/scandic-web/public/_static/icons/payment/mastercard.svg
deleted file mode 100644
index 39b31d32f..000000000
--- a/apps/scandic-web/public/_static/icons/payment/mastercard.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46852)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z" fill="#F79E1B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z" fill="#FF5F00"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z" fill="#F79E1B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z" fill="#EB001B"/>
-</g>
-<defs>
-<clipPath id="clip0_5382_46852">
-<rect width="48" height="32" rx="3" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/mobilepay.svg b/apps/scandic-web/public/_static/icons/payment/mobilepay.svg
deleted file mode 100644
index 871fa68a6..000000000
--- a/apps/scandic-web/public/_static/icons/payment/mobilepay.svg
+++ /dev/null
@@ -1,51 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5597_450)">
-<rect width="48" height="32" fill="white"/>
-<g clipPath="url(#clip1_5597_450)">
-<path d="M22.4837 19.1878C21.9642 19.1878 21.4958 18.875 21.2967 18.3952L16.8651 7.69688C16.594 7.04228 16.9048 6.29183 17.5593 6.02062L22.201 4.0982C22.5153 3.96795 22.8685 3.96792 23.1828 4.09812C23.4972 4.22832 23.7469 4.47808 23.877 4.79244L28.3087 15.4912C28.5794 16.1456 28.2686 16.8955 27.6144 17.1667L22.9727 19.0901C22.8177 19.1545 22.6516 19.1877 22.4837 19.1878ZM22.692 4.69071C22.6142 4.69084 22.5372 4.70633 22.4654 4.73629L17.8235 6.65871C17.6784 6.71882 17.5632 6.83411 17.5031 6.97921C17.443 7.12432 17.443 7.28735 17.5032 7.43244L21.9348 18.1314C22.0602 18.4332 22.4063 18.5766 22.7085 18.452L27.3502 16.5282C27.4953 16.4681 27.6106 16.3528 27.6707 16.2077C27.7308 16.0626 27.7307 15.8996 27.6706 15.7545L23.239 5.05666C23.1472 4.83546 22.9315 4.69111 22.692 4.69071Z" fill="#5A78FF"/>
-<path style="mix-blend-mode:multiply" opacity="0.7" d="M24.1699 5.49788L23.5317 5.76221L25.2864 9.99829L25.9245 9.73396L24.1699 5.49788Z" fill="url(#paint0_linear_5597_450)"/>
-<path style="mix-blend-mode:multiply" opacity="0.7" d="M27.3755 15.0441L28.0137 14.7798L26.0275 9.9847L25.3893 10.249L27.3755 15.0441Z" fill="url(#paint1_linear_5597_450)"/>
-<path d="M26.5698 11.8656C25.2424 12.416 24.134 13.1748 23.4082 14.0894L21.5371 9.57038C22.3906 8.57877 23.477 7.81462 24.6987 7.34652C26.0262 6.79607 27.3673 6.52964 28.5068 6.68487L30.3784 11.2037C29.0736 11.1054 27.7649 11.3329 26.5698 11.8656Z" fill="#5A78FF"/>
-<g style="mix-blend-mode:multiply" opacity="0.4">
-<path opacity="0.9" d="M26.5694 11.8656C25.2419 12.416 24.1335 13.1748 23.4077 14.0894L21.5366 9.57038C22.3901 8.57877 23.4765 7.81462 24.6982 7.34652C26.0257 6.79607 27.3669 6.52964 28.5063 6.68487L30.3779 11.2037C29.0731 11.1054 27.7644 11.3329 26.5694 11.8656Z" fill="url(#paint2_linear_5597_450)"/>
-<path opacity="0.7" d="M26.5694 11.8656C25.2419 12.416 24.1335 13.1748 23.4077 14.0894L21.5366 9.57038C22.3901 8.57877 23.4765 7.81462 24.6982 7.34652C26.0257 6.79607 27.3669 6.52964 28.5063 6.68487L30.3779 11.2037C29.0731 11.1054 27.7644 11.3329 26.5694 11.8656Z" fill="url(#paint3_linear_5597_450)"/>
-</g>
-<path d="M27.1799 13.243C25.743 13.243 24.4277 13.5206 23.4082 14.0874V9.51815C24.5762 8.92877 25.8722 8.63863 27.1799 8.67375C28.6169 8.67375 29.958 8.94017 30.9515 9.51925V14.0885C29.7837 13.4986 28.4877 13.2081 27.1799 13.243Z" fill="#5A78FF"/>
-<path d="M9.72023 26.6544L10.8828 22.9796C10.895 22.9286 10.9385 22.8913 10.9907 22.8871H11.5742C11.6265 22.8944 11.6705 22.93 11.6887 22.9796L12.5936 25.2981C12.6112 25.3443 12.6575 25.3487 12.6729 25.2981L13.5712 22.9796C13.5894 22.93 13.6334 22.8944 13.6857 22.8871H14.2692C14.3214 22.8913 14.3649 22.9286 14.3771 22.9796L15.5155 26.6544C15.5288 26.6827 15.5262 26.716 15.5085 26.7418C15.4909 26.7676 15.4608 26.7821 15.4296 26.7799H14.7426C14.6934 26.7822 14.6498 26.7487 14.6391 26.7007L13.9037 24.3139C13.8927 24.2676 13.8399 24.2676 13.8245 24.3139L12.9437 26.683C12.9287 26.7401 12.8772 26.7799 12.8182 26.7799H12.4197C12.3612 26.7811 12.3103 26.7403 12.2986 26.683L11.4002 24.3139C11.3826 24.2676 11.3364 24.2676 11.3254 24.3139L10.5701 26.7007C10.5584 26.7499 10.5128 26.7835 10.4622 26.7799H9.8017C9.77076 26.7819 9.74117 26.767 9.72429 26.741C9.70741 26.715 9.70586 26.6819 9.72023 26.6544ZM15.7445 25.3443C15.7319 24.7183 16.0994 24.1469 16.6742 23.8986C17.2491 23.6503 17.917 23.7744 18.3642 24.2127C18.8114 24.651 18.949 25.3162 18.7124 25.896C18.4758 26.4757 17.9119 26.8547 17.2857 26.8548C16.8782 26.8687 16.4828 26.715 16.1916 26.4296C15.9004 26.1442 15.7388 25.752 15.7445 25.3443ZM18.0344 25.3443C18.0104 24.9323 17.6609 24.6153 17.2485 24.6315C16.8361 24.6477 16.5126 24.991 16.5209 25.4037C16.5293 25.8163 16.8664 26.1463 17.2791 26.1458C17.4857 26.14 17.6815 26.0523 17.8232 25.9019C17.9649 25.7515 18.0409 25.5509 18.0344 25.3443ZM20.1878 26.5465C20.1305 26.5003 20.0799 26.5179 20.0799 26.5972V26.6786C20.0799 26.7365 20.0342 26.7842 19.9764 26.7865H19.4391C19.3805 26.7843 19.3335 26.7373 19.3312 26.6786V22.9972C19.3335 22.9385 19.3805 22.8915 19.4391 22.8893H20.005C20.0629 22.8916 20.1085 22.9393 20.1085 22.9972V24.0364C20.1085 24.1113 20.1591 24.1333 20.2406 24.0761C20.4573 23.9137 20.7206 23.8257 20.9914 23.8251C21.7753 23.8251 22.3764 24.4856 22.3764 25.3355C22.3949 25.724 22.2557 26.1035 21.9903 26.3879C21.725 26.6723 21.3561 26.8375 20.9672 26.846C20.6794 26.8453 20.402 26.7387 20.1878 26.5465ZM21.5969 25.3443C21.6186 25.0607 21.4796 24.7889 21.237 24.6405C20.9944 24.4921 20.689 24.4921 20.4464 24.6405C20.2038 24.7889 20.0648 25.0607 20.0865 25.3443C20.0787 25.5498 20.1539 25.7498 20.2951 25.8993C20.4363 26.0487 20.6317 26.1352 20.8373 26.1392C21.2657 26.1284 21.6046 25.7728 21.5947 25.3443H21.5969ZM22.8498 23.1557C22.8498 22.9125 23.0469 22.7153 23.2901 22.7153C23.5333 22.7153 23.7305 22.9125 23.7305 23.1557C23.7305 23.3989 23.5333 23.5961 23.2901 23.5961C23.0469 23.5961 22.8498 23.3989 22.8498 23.1557ZM22.8894 26.6786V24.0144C22.8894 23.9565 22.935 23.9089 22.9929 23.9065H23.5588C23.6174 23.9088 23.6644 23.9558 23.6667 24.0144V26.6786C23.6644 26.7373 23.6174 26.7843 23.5588 26.7865H22.9929C22.935 26.7842 22.8894 26.7365 22.8894 26.6786ZM24.3052 25.7979V22.9972C24.3051 22.9393 24.3508 22.8916 24.4087 22.8893H24.9745C25.0332 22.8915 25.0802 22.9385 25.0824 22.9972V25.8243C25.0824 26.0071 25.1617 26.1282 25.3621 26.1282C25.4217 26.1282 25.47 26.1765 25.47 26.2361V26.7051C25.4676 26.7629 25.42 26.8086 25.3621 26.8085C24.609 26.8085 24.3052 26.5619 24.3052 25.7979ZM25.6813 25.3575C25.6604 24.8125 25.9392 24.2997 26.408 24.0209C26.8768 23.7422 27.4605 23.7422 27.9294 24.0209C28.3982 24.2997 28.677 24.8125 28.656 25.3575C28.656 25.461 28.6274 25.5469 28.5239 25.5469H26.5555C26.5048 25.5469 26.4872 25.5755 26.4916 25.6218C26.5404 25.9639 26.8447 26.2107 27.1896 26.1876C27.3986 26.1907 27.5981 26.1003 27.7334 25.941C27.7754 25.882 27.8438 25.8474 27.9162 25.8485H28.4358C28.5283 25.8485 28.5679 25.9124 28.5327 26.0027C28.224 26.632 27.5224 26.9657 26.8394 26.8081C26.1564 26.6505 25.672 26.0431 25.6703 25.3421L25.6813 25.3575ZM27.7709 25.0933C27.8105 25.0933 27.8281 25.0757 27.8215 25.0295C27.7615 24.7134 27.4826 24.4866 27.161 24.4922C26.8464 24.4919 26.5729 24.708 26.5004 25.014C26.4894 25.0537 26.5004 25.0933 26.5467 25.0933H27.7709ZM29.1316 26.6786V22.9972C29.1316 22.9393 29.1772 22.8916 29.2351 22.8893H31.0384C31.8619 22.8893 32.4234 23.3693 32.4234 24.1774C32.4234 24.9854 31.787 25.483 30.9988 25.483H30.0432C30.0141 25.48 29.9853 25.4906 29.965 25.5117C29.9448 25.5328 29.9354 25.562 29.9397 25.5909V26.6786C29.9374 26.7373 29.8904 26.7843 29.8318 26.7865H29.2373C29.1786 26.7853 29.1316 26.7374 29.1316 26.6786ZM30.9988 24.8247C31.1646 24.8224 31.3226 24.7538 31.4376 24.6343C31.5526 24.5148 31.615 24.3542 31.6109 24.1884C31.6178 24.024 31.5555 23.8642 31.4392 23.7479C31.3229 23.6316 31.1631 23.5693 30.9988 23.5763H30.0366C29.9683 23.5763 29.9397 23.6115 29.9397 23.6797V24.7212C29.9397 24.7895 29.9683 24.8247 30.0366 24.8247H30.9988ZM32.692 25.3443C32.6771 24.9549 32.8191 24.5758 33.086 24.2919C33.3529 24.008 33.7226 23.843 34.1122 23.8339C34.3933 23.8354 34.6642 23.9395 34.874 24.1267C34.9246 24.1729 34.9819 24.1663 34.9819 24.0981V24.0122C34.9819 23.9551 35.0282 23.9087 35.0854 23.9087H35.6226C35.6812 23.911 35.7282 23.958 35.7305 24.0166V25.9124C35.7305 26.0555 35.7811 26.1194 35.8802 26.1326C35.9316 26.1336 35.9737 26.1738 35.9771 26.2251V26.7227C35.9771 26.7762 35.9337 26.8196 35.8802 26.8196C35.5015 26.8196 35.2791 26.7117 35.1536 26.4937C35.1184 26.4364 35.0788 26.4254 35.0215 26.4827C34.7797 26.7316 34.446 26.8702 34.0989 26.8658C33.7093 26.8544 33.3406 26.6868 33.0759 26.4005C32.8113 26.1143 32.6729 25.7337 32.692 25.3443ZM34.9819 25.3443C35.0035 25.0615 34.8649 24.7905 34.623 24.6425C34.3811 24.4945 34.0766 24.4945 33.8347 24.6425C33.5928 24.7905 33.4542 25.0615 33.4758 25.3443C33.4542 25.6271 33.5928 25.8982 33.8347 26.0462C34.0766 26.1942 34.3811 26.1942 34.623 26.0462C34.8649 25.8982 35.0035 25.6271 34.9819 25.3443ZM36.2523 27.7796V27.315C36.2547 27.2571 36.3023 27.2114 36.3602 27.2115C36.7288 27.2399 37.069 27.0125 37.1837 26.661C37.2031 26.5874 37.1952 26.5092 37.1617 26.4408L36.1092 24.0585C36.091 24.0261 36.0916 23.9864 36.1107 23.9545C36.1298 23.9227 36.1646 23.9035 36.2017 23.9043H36.7676C36.8248 23.9043 36.86 23.9506 36.8821 24.0078L37.5426 25.5315C37.5889 25.6526 37.6637 25.646 37.7144 25.5315L38.3441 24.0034C38.3661 23.9462 38.3947 23.9109 38.452 23.9109H39.0046C39.0385 23.9091 39.071 23.9248 39.0906 23.9525C39.1103 23.9802 39.1144 24.016 39.1015 24.0474L38.0204 26.617C37.6263 27.5506 37.2079 27.8985 36.3712 27.8985C36.3391 27.9004 36.3078 27.8885 36.285 27.8658C36.2623 27.843 36.2504 27.8116 36.2523 27.7796Z" fill="#5A78FF"/>
-</g>
-</g>
-<rect x="0.4" y="0.4" width="47.2" height="31.2" rx="2" stroke="#E9E8E7" stroke-width="0.8"/>
-<defs>
-<linearGradient id="paint0_linear_5597_450" x1="187.993" y1="314.829" x2="159.344" y2="-19.421" gradientUnits="userSpaceOnUse">
-<stop stop-color="#504678"/>
-<stop offset="0.302" stop-color="#504678" stop-opacity="0.616"/>
-<stop offset="0.608" stop-color="#504678" stop-opacity="0.283"/>
-<stop offset="0.852" stop-color="#504678" stop-opacity="0.076"/>
-<stop offset="1" stop-color="#504678" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_5597_450" x1="-154.046" y1="-336.772" x2="-136.078" y2="37.7502" gradientUnits="userSpaceOnUse">
-<stop stop-color="#504678"/>
-<stop offset="0.302" stop-color="#504678" stop-opacity="0.616"/>
-<stop offset="0.608" stop-color="#504678" stop-opacity="0.283"/>
-<stop offset="0.852" stop-color="#504678" stop-opacity="0.076"/>
-<stop offset="1" stop-color="#504678" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_5597_450" x1="142.679" y1="500.77" x2="493.297" y2="261.747" gradientUnits="userSpaceOnUse">
-<stop stop-color="#504678"/>
-<stop offset="0.179" stop-color="#504678" stop-opacity="0.872"/>
-<stop offset="0.526" stop-color="#504678" stop-opacity="0.536"/>
-<stop offset="1" stop-color="#504678" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_5597_450" x1="443.476" y1="267.116" x2="427.924" y2="142.726" gradientUnits="userSpaceOnUse">
-<stop stop-color="#504678"/>
-<stop offset="0.643" stop-color="#504678" stop-opacity="0.332"/>
-<stop offset="1" stop-color="#504678" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0_5597_450">
-<rect width="48" height="32" rx="2.4" fill="white"/>
-</clipPath>
-<clipPath id="clip1_5597_450">
-<rect width="29.7248" height="24" fill="white" transform="translate(9.5 4)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/paypal.svg b/apps/scandic-web/public/_static/icons/payment/paypal.svg
deleted file mode 100644
index 19ce73638..000000000
--- a/apps/scandic-web/public/_static/icons/payment/paypal.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46860)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M30.4927 13.8679C30.3424 14.8536 29.5892 14.8536 28.8603 14.8536H28.4457L28.7366 13.0131C28.754 12.902 28.85 12.8202 28.9627 12.8202H29.153C29.649 12.8202 30.1174 12.8202 30.3591 13.1024C30.5036 13.2713 30.5472 13.5219 30.4927 13.8679ZM30.1756 11.2959H27.4274C27.2392 11.2959 27.0794 11.4326 27.05 11.6181L25.9389 18.6598C25.9169 18.7986 26.0246 18.9243 26.1649 18.9243H27.5752C27.7066 18.9243 27.8186 18.8287 27.8391 18.6991L28.1545 16.7025C28.1835 16.517 28.3437 16.3803 28.5315 16.3803H29.401C31.2112 16.3803 32.2562 15.5051 32.529 13.7698C32.652 13.0114 32.534 12.4151 32.1786 11.9977C31.7878 11.5388 31.095 11.2959 30.1756 11.2959Z" fill="#009CDE"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8911 13.8679C10.7409 14.8536 9.98761 14.8536 9.25873 14.8536H8.84417L9.13509 13.0131C9.15245 12.902 9.24845 12.8202 9.36113 12.8202H9.55141C10.0475 12.8202 10.5159 12.8202 10.7575 13.1024C10.9021 13.2713 10.9457 13.5219 10.8911 13.8679ZM10.574 11.2959H7.82585C7.63769 11.2959 7.47789 11.4326 7.44849 11.6181L6.33733 18.6598C6.31537 18.7986 6.42273 18.9243 6.56337 18.9243H7.87581C8.06361 18.9243 8.22341 18.7877 8.25281 18.6025L8.55293 16.7025C8.58197 16.517 8.74213 16.3803 8.92993 16.3803H9.79945C11.6097 16.3803 12.6546 15.5051 12.9275 13.7698C13.0504 13.0114 12.9324 12.4151 12.577 11.9977C12.1862 11.5388 11.4935 11.2959 10.574 11.2959Z" fill="#003087"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9544 16.3959C16.8272 17.1472 16.2305 17.6518 15.4691 17.6518C15.0875 17.6518 14.7817 17.5289 14.5854 17.2966C14.3909 17.0665 14.3175 16.7383 14.3792 16.3732C14.4975 15.6283 15.1041 15.1078 15.8539 15.1078C16.2277 15.1078 16.531 15.2317 16.7312 15.4661C16.9328 15.7023 17.0122 16.0323 16.9544 16.3959ZM18.7884 13.8363H17.4724C17.3598 13.8363 17.2637 13.9181 17.246 14.0296L17.1883 14.3972L17.0965 14.264C16.8113 13.8508 16.1759 13.7124 15.5417 13.7124C14.0879 13.7124 12.846 14.8136 12.6043 16.3576C12.4785 17.1281 12.6571 17.8642 13.0944 18.378C13.4958 18.85 14.0688 19.0464 14.7516 19.0464C15.9237 19.0464 16.5735 18.2944 16.5735 18.2944L16.5147 18.6598C16.4927 18.7986 16.6001 18.9243 16.7411 18.9243H17.926C18.1141 18.9243 18.2739 18.788 18.3033 18.6024L19.0148 14.1008C19.0368 13.962 18.9291 13.8363 18.7884 13.8363Z" fill="#003087"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.5555 16.3959C36.4283 17.1472 35.8316 17.6518 35.0702 17.6518C34.6885 17.6518 34.3828 17.5289 34.1864 17.2966C33.9916 17.0665 33.9186 16.7383 33.9802 16.3732C34.0986 15.6283 34.7052 15.1078 35.455 15.1078C35.8288 15.1078 36.1321 15.2317 36.3322 15.4661C36.5339 15.7023 36.6132 16.0323 36.5555 16.3959ZM38.3895 13.8363H37.0735C36.9608 13.8363 36.8648 13.9181 36.8471 14.0296L36.7894 14.3972L36.6972 14.264C36.4123 13.8508 35.777 13.7124 35.1428 13.7124C33.689 13.7124 32.4471 14.8136 32.2054 16.3576C32.0796 17.1281 32.2582 17.8642 32.6954 18.378C33.0969 18.85 33.6698 19.0464 34.3526 19.0464C35.5248 19.0464 36.1746 18.2944 36.1746 18.2944L36.1158 18.6598C36.0938 18.7986 36.2012 18.9243 36.3422 18.9243H37.527C37.7152 18.9243 37.875 18.788 37.9044 18.6024L38.6159 14.1008C38.6379 13.962 38.5302 13.8363 38.3895 13.8363Z" fill="#009CDE"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M25.7972 13.8364H24.4745C24.348 13.8364 24.2296 13.8991 24.1588 14.0039L22.334 16.6891L21.5608 14.1087C21.5123 13.9473 21.3635 13.8364 21.1948 13.8364H19.8948C19.7378 13.8364 19.6273 13.9908 19.678 14.1391L21.1342 18.4113L19.7644 20.3428C19.657 20.4943 19.7655 20.7039 19.9515 20.7039H21.2728C21.3978 20.7039 21.5151 20.6427 21.5867 20.54L25.9853 14.1958C26.0906 14.0439 25.9821 13.8364 25.7972 13.8364Z" fill="#003087"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9407 11.4897L38.8129 18.6603C38.7909 18.7991 38.8983 18.9248 39.039 18.9248H40.1737C40.3613 18.9248 40.5213 18.7881 40.5505 18.6026L41.6629 11.5609C41.6849 11.4221 41.5773 11.2964 41.4365 11.2964H40.1673C40.0541 11.2964 39.9581 11.3781 39.9407 11.4897Z" fill="#009CDE"/>
-</g>
-<defs>
-<clipPath id="clip0_5382_46860">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/swish.svg b/apps/scandic-web/public/_static/icons/payment/swish.svg
deleted file mode 100644
index 1a1c87875..000000000
--- a/apps/scandic-web/public/_static/icons/payment/swish.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46851)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path d="M18.8844 18.2247L18.9947 18.0685C19.1325 17.8853 19.2868 17.8638 19.5128 17.9823C19.7278 18.0954 20.075 18.2894 20.5435 18.2894C20.9403 18.2894 21.1884 18.1116 21.1884 17.8314C21.1884 17.0988 18.8955 17.3735 18.8955 15.822C18.8955 14.9385 19.6947 14.4698 20.6647 14.4698C21.2766 14.4698 21.7064 14.6638 21.949 14.7984C22.1584 14.9062 22.186 15.0894 22.0868 15.2941L21.9986 15.4557C21.8884 15.6712 21.7175 15.6927 21.4915 15.5958C21.2931 15.5096 20.9899 15.3749 20.6151 15.3749C20.2183 15.3749 19.9923 15.5365 19.9923 15.8166C19.9923 16.5601 22.2797 16.2692 22.2797 17.8099C22.2797 18.6072 21.5907 19.1998 20.5214 19.1998C19.7774 19.1998 19.2648 18.925 18.9782 18.7419C18.7687 18.6126 18.7522 18.4186 18.8844 18.2247ZM22.671 14.987C22.5994 14.7392 22.7261 14.5722 22.9852 14.5722H23.4206C23.6466 14.5722 23.7844 14.6799 23.8285 14.9008L24.5726 17.5406C24.6277 17.7776 24.6607 18.02 24.6607 18.02H24.6773C24.6773 18.02 24.7158 17.7776 24.7765 17.5406L25.5536 14.9008C25.5977 14.6907 25.741 14.583 25.9725 14.583H26.3142C26.5402 14.583 26.6725 14.6907 26.7277 14.9008L27.4993 17.5406C27.5709 17.7776 27.5985 18.02 27.5985 18.02H27.615C27.615 18.02 27.6481 17.7776 27.7142 17.5406L28.4473 14.9008C28.5024 14.6799 28.6347 14.5722 28.8607 14.5722H29.2796C29.5496 14.5722 29.6654 14.7392 29.5937 14.987L28.4087 18.7742C28.3426 18.9897 28.1993 19.0867 27.9843 19.0867H27.378C27.1521 19.0867 27.0087 18.9789 26.9536 18.7688L26.2646 16.5062C26.193 16.2692 26.1544 16.0214 26.1544 16.0214H26.1379C26.1379 16.0214 26.0938 16.2692 26.0221 16.5062L25.3276 18.7634C25.2725 18.9789 25.1348 19.0813 24.9088 19.0813H24.2804C24.0655 19.0813 23.9277 18.9843 23.867 18.7688L22.671 14.987ZM30.2827 14.9439C30.2827 14.7015 30.4094 14.5722 30.652 14.5722H31.0488C31.2913 14.5722 31.4181 14.7015 31.4181 14.9439V18.715C31.4181 18.9628 31.2913 19.0867 31.0488 19.0867H30.652C30.4094 19.0867 30.2827 18.9628 30.2827 18.715V14.9439ZM32.1842 18.2247L32.2945 18.0685C32.4268 17.8853 32.5866 17.8638 32.8126 17.9823C33.0275 18.0954 33.3748 18.2894 33.8432 18.2894C34.2401 18.2894 34.4881 18.1116 34.4881 17.8314C34.4881 17.0988 32.2008 17.3735 32.2008 15.822C32.2008 14.9385 32.9944 14.4698 33.9645 14.4698C34.5818 14.4698 35.0062 14.6638 35.2488 14.7984C35.4582 14.9062 35.4858 15.0894 35.3865 15.2941L35.2984 15.4557C35.1936 15.6712 35.0172 15.6927 34.7913 15.5958C34.5928 15.5096 34.2952 15.3749 33.9149 15.3749C33.5181 15.3749 33.2921 15.5365 33.2921 15.8166C33.2921 16.5601 35.5794 16.2692 35.5794 17.8099C35.5794 18.6072 34.8905 19.1998 33.8212 19.1998C33.0771 19.1998 32.559 18.925 32.2834 18.7419C32.0685 18.6126 32.0464 18.4186 32.1842 18.2247ZM36.2519 13.1715C36.2519 12.9345 36.3897 12.7998 36.6322 12.7998H37.018C37.2716 12.7998 37.3983 12.9291 37.3983 13.1715V14.9978C37.3983 15.2186 37.3708 15.3749 37.3708 15.3749H37.3873C37.6133 14.9439 38.192 14.4644 38.9912 14.4644C40.0162 14.4644 40.6006 14.987 40.6006 16.183V18.715C40.6006 18.9628 40.463 19.0867 40.2202 19.0867H39.829C39.5754 19.0867 39.4487 18.9628 39.4487 18.715V16.4146C39.4487 15.8651 39.3054 15.4934 38.7266 15.4934C37.9219 15.4934 37.3928 16.1345 37.3928 16.991V18.715C37.3928 18.9628 37.266 19.0867 37.0125 19.0867H36.6267C36.3842 19.0867 36.2464 18.9628 36.2464 18.715V13.1715H36.2519ZM41.8354 13.8826C41.9398 13.8826 42.0006 13.818 42.0006 13.7102C42.0006 13.6079 41.9398 13.5486 41.8354 13.5486H41.6698V13.8826H41.8354ZM41.477 13.4948C41.477 13.4355 41.5046 13.4086 41.565 13.4086H41.8738C42.0666 13.4086 42.199 13.5271 42.199 13.7156C42.199 13.8718 42.0942 13.9634 42.0118 13.985V13.9904C42.0118 13.9904 42.0226 14.0012 42.0502 14.0442L42.1934 14.3136C42.2266 14.3729 42.2046 14.416 42.1438 14.416H42.111C42.0614 14.416 42.0282 14.3998 42.0062 14.3513L41.8462 14.0227H41.6754V14.3298C41.6754 14.3836 41.6478 14.416 41.5926 14.416H41.565C41.5046 14.416 41.4826 14.389 41.4826 14.3298V13.4948H41.477ZM41.813 14.7122C42.2598 14.7122 42.5958 14.3621 42.5958 13.915C42.5958 13.4678 42.2542 13.1176 41.813 13.1176C41.3778 13.1176 41.0414 13.4678 41.0414 13.915C41.0362 14.3621 41.3778 14.7122 41.813 14.7122ZM41.813 12.9345C42.3642 12.9345 42.7998 13.3708 42.7998 13.915C42.7942 14.459 42.359 14.89 41.813 14.89C41.273 14.89 40.8378 14.4537 40.8378 13.9096C40.8378 13.3708 41.273 12.9345 41.813 12.9345Z" fill="#4D4D4F"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.38525 21.0546C10.6351 22.1307 13.4118 21.5981 15.0893 19.5994C17.0776 17.2303 16.7688 13.6986 14.3995 11.7109L12.8245 13.5876C14.6755 15.1405 14.9167 17.8997 13.3634 19.7505C12.1248 21.2263 10.0855 21.719 8.38525 21.0546Z" fill="url(#paint0_linear_5382_46851)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.38525 21.0547C10.6351 22.1307 13.4118 21.5982 15.0893 19.5995C15.2948 19.3547 15.4756 19.0974 15.6323 18.8308C15.8972 17.1846 15.3146 15.4447 13.9442 14.295C13.5961 14.0029 13.2192 13.7676 12.8247 13.5879C14.6755 15.1407 14.9167 17.8998 13.3634 19.7505C12.1248 21.2263 10.0855 21.7191 8.38525 21.0547Z" fill="url(#paint1_linear_5382_46851)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2149 10.9452C10.965 9.86917 8.18827 10.4017 6.51079 12.4005C4.52251 14.7695 4.83131 18.3013 7.20055 20.2889L8.77559 18.4122C6.92463 16.8594 6.68339 14.1002 8.23671 12.2494C9.47531 10.7736 11.5146 10.2808 13.2149 10.9452Z" fill="url(#paint2_linear_5382_46851)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2146 10.9452C10.9648 9.86917 8.18804 10.4017 6.51056 12.4004C6.30512 12.6452 6.12428 12.9024 5.9676 13.169C5.70272 14.8152 6.28528 16.5552 7.65568 17.7049C8.00384 17.997 8.38076 18.2323 8.77512 18.412C6.9244 16.8591 6.6832 14.1001 8.23648 12.2494C9.47508 10.7736 11.5143 10.2808 13.2146 10.9452Z" fill="url(#paint3_linear_5382_46851)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_5382_46851" x1="12.6109" y1="18.7386" x2="10.2315" y2="13.9987" gradientUnits="userSpaceOnUse">
-<stop stop-color="#EF3220"/>
-<stop offset="1" stop-color="#FCD205"/>
-</linearGradient>
-<linearGradient id="paint1_linear_5382_46851" x1="14.5468" y1="14.6636" x2="10.3757" y2="21.8844" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FCD205"/>
-<stop offset="0.263921" stop-color="#F47216"/>
-<stop offset="0.560797" stop-color="#B31A93"/>
-<stop offset="1" stop-color="#2743A0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_5382_46851" x1="9.03527" y1="13.381" x2="11.3158" y2="18.0191" gradientUnits="userSpaceOnUse">
-<stop stop-color="#7FD3B9"/>
-<stop offset="0.265705" stop-color="#66CDE1"/>
-<stop offset="0.554471" stop-color="#6D8ED1"/>
-<stop offset="1" stop-color="#2743A0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_5382_46851" x1="7.07996" y1="17.3035" x2="11.2185" y2="10.1074" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1E5CB2"/>
-<stop offset="0.246658" stop-color="#4DC4CE"/>
-<stop offset="0.564821" stop-color="#66C657"/>
-<stop offset="1" stop-color="#FCD205"/>
-</linearGradient>
-<clipPath id="clip0_5382_46851">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/unionpay.svg b/apps/scandic-web/public/_static/icons/payment/unionpay.svg
deleted file mode 100644
index 1e4e148a2..000000000
--- a/apps/scandic-web/public/_static/icons/payment/unionpay.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46856)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M30.6113 5.67139C29.4968 5.70603 28.134 6.58371 27.8858 7.66599L24.1192 24.3347C23.871 25.4271 24.5462 26.316 25.6325 26.3323H33.9998C35.0695 26.2794 36.109 25.4118 36.3529 24.3418L40.1196 7.67299C40.372 6.56947 39.6804 5.67343 38.5761 5.67343L30.6113 5.67139Z" fill="#01798A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.1192 24.3348L27.8858 7.66607C28.134 6.58379 29.4968 5.70611 30.5909 5.67255L27.4242 5.67051L21.7186 5.66943C20.6213 5.69187 19.2408 6.57571 18.9927 7.66607L15.225 24.3348C14.9759 25.4272 15.6521 26.3161 16.7376 26.3324H25.6325C24.5462 26.3161 23.871 25.4272 24.1192 24.3348Z" fill="#024381"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2249 24.3348L18.9926 7.66604C19.2407 6.57568 20.6212 5.69184 21.7185 5.6694L14.4093 5.66748C13.3059 5.66748 11.8913 6.56148 11.6391 7.66604L7.87136 24.3348C7.84844 24.4365 7.83572 24.5362 7.82812 24.6337V24.943C7.90189 25.7392 8.50996 26.3191 9.384 26.3324H16.7375C15.652 26.316 14.9758 25.4271 15.2249 24.3348Z" fill="#DD0228"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8729 17.8153H22.0112C22.1384 17.8153 22.2239 17.7727 22.264 17.6882L22.6234 17.1502H23.586L23.3852 17.5041H24.5394L24.393 18.0462H23.0196C22.8615 18.2842 22.6668 18.3961 22.4327 18.3828H21.7174L21.8729 17.8153ZM21.7149 18.5924H24.2434L24.0822 19.1813H23.0654L22.9102 19.7498H23.8997L23.7385 20.3387H22.749L22.5192 21.1787C22.4622 21.3191 22.5371 21.3823 22.7424 21.368H23.5489L23.3995 21.9152H21.8512C21.5577 21.9152 21.457 21.7473 21.5491 21.4107L21.843 20.3387H21.2104L21.3711 19.7498H22.0037L22.1588 19.1813H21.5541L21.7149 18.5924ZM25.7507 17.1462L25.7109 17.4909C25.7109 17.4909 26.1878 17.1328 26.621 17.1328H28.2217L27.6096 19.349C27.5588 19.6024 27.3411 19.7284 26.9566 19.7284H25.1424L24.7174 21.2846C24.6929 21.368 24.7275 21.4107 24.819 21.4107H25.176L25.0448 21.8938H24.1372C23.7889 21.8938 23.644 21.789 23.7014 21.5786L24.9024 17.1462H25.7507ZM27.1062 17.7727H25.6775L25.5066 18.3707C25.5066 18.3707 25.7445 18.1989 26.1421 18.1927C26.5386 18.1865 26.9912 18.1927 26.9912 18.1927L27.1062 17.7727ZM26.5886 19.1599C26.6942 19.1742 26.7533 19.1324 26.7604 19.0337L26.8479 18.7185H25.417L25.297 19.1599H26.5886ZM25.6234 19.8759H26.4482L26.4329 20.2329H26.6525C26.7634 20.2329 26.8184 20.1973 26.8184 20.1272L26.8834 19.8963H27.5689L27.4774 20.2329C27.4 20.5136 27.1947 20.6601 26.8611 20.6744H26.4218L26.4197 21.2846C26.4117 21.3823 26.5 21.4321 26.682 21.4321H27.095L26.9617 21.9152H25.9712C25.6936 21.9284 25.5575 21.7961 25.5604 21.5155L25.6234 19.8759Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1289 17.8399L29.3202 17.1667H30.2873L30.2455 17.4137C30.2455 17.4137 30.7397 17.1667 31.0956 17.1667H32.2915L32.1014 17.8399H31.9133L31.0112 21.0152H31.1993L31.0204 21.6458H30.8323L30.754 21.9194H29.8174L29.8955 21.6458H28.0479L28.2279 21.0152H28.413L29.316 17.8399H29.1289ZM30.1723 17.8399L29.9262 18.6993C29.9262 18.6993 30.3473 18.5377 30.7103 18.4919C30.7905 18.1918 30.8953 17.8399 30.8953 17.8399H30.1723ZM29.8122 19.1021L29.5652 20.0022C29.5652 20.0022 30.032 19.7724 30.3522 19.753C30.4448 19.4052 30.5374 19.1021 30.5374 19.1021H29.8122ZM29.9932 21.0152L30.1784 20.3623H29.4565L29.2704 21.0152H29.9932ZM32.3323 17.125H33.2415L33.28 17.4605C33.274 17.5459 33.3248 17.5867 33.4326 17.5867H33.5932L33.4307 18.1552H32.7624C32.5073 18.1684 32.376 18.0708 32.3639 17.8602L32.3323 17.125ZM35.0109 18.3444L34.838 18.9547H33.9004L33.7396 19.5221H34.6763L34.5024 20.1314H33.4591L33.2231 20.4885H33.7337L33.8517 21.2034C33.8658 21.2746 33.9289 21.3092 34.0367 21.3092H34.1953L34.0286 21.898H33.4672C33.1763 21.9123 33.0259 21.8146 33.0137 21.6042L32.8783 20.9512L32.4137 21.6458C32.3038 21.8421 32.1349 21.9337 31.9073 21.9194H31.0499L31.2167 21.3305H31.4842C31.5941 21.3305 31.6855 21.2817 31.7678 21.183L32.495 20.1314H31.5574L31.7312 19.5221H32.7482L32.9099 18.9547H31.8919L32.0659 18.3444H35.0109Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9423 16.3673C35.6372 17.0161 35.3465 17.3944 35.1757 17.5704C35.0047 17.7444 34.6662 18.1492 33.8506 18.1186L33.9208 17.6233C34.6071 17.4118 34.9783 16.4587 35.1898 16.0367L34.9377 12.9285L35.4685 12.9214H35.9139L35.9618 14.8711L36.7965 12.9214H37.6417L35.9423 16.3673Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M33.5789 13.1559L33.2431 13.3869C32.8923 13.1123 32.572 12.9424 31.9538 13.2292C31.1117 13.6197 30.408 16.6151 32.7266 15.6285L32.8588 15.7851L33.771 15.8085L34.37 13.0868L33.5789 13.1559ZM33.0602 14.6439C32.9136 15.0762 32.5864 15.362 32.3301 15.2807C32.0738 15.2013 31.9823 14.7843 32.1308 14.351C32.2772 13.9177 32.6066 13.633 32.8608 13.7143C33.1171 13.7937 33.2096 14.2107 33.0602 14.6439Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28.3048 11.1304H30.3834C30.7831 11.1304 31.0922 11.221 31.3047 11.3989C31.5162 11.5789 31.6221 11.8373 31.6221 12.1739V12.1841C31.6221 12.2481 31.6179 12.3203 31.6119 12.3986C31.6016 12.4759 31.5883 12.5542 31.5712 12.6356C31.4797 13.0811 31.2671 13.4391 30.9387 13.7107C30.6091 13.9812 30.2187 14.1175 29.7692 14.1175H28.6546L28.3099 15.8089H27.3447L28.3048 11.1304ZM28.8243 13.3039H29.7489C29.9898 13.3039 30.181 13.2479 30.3204 13.1371C30.4587 13.0252 30.5502 12.8544 30.601 12.6225C30.6091 12.5797 30.6141 12.5411 30.6203 12.5055C30.6234 12.472 30.6274 12.4383 30.6274 12.4059C30.6274 12.24 30.5686 12.12 30.4505 12.0447C30.3326 11.9684 30.1476 11.9319 29.8912 11.9319H29.1061L28.8243 13.3039Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.7659 12.9204H25.4819L25.4007 13.3374L25.5022 13.2184C25.7342 12.9703 26.0169 12.8472 26.3484 12.8472C26.6495 12.8472 26.867 12.9347 27.0022 13.1106C27.1356 13.2866 27.1742 13.5296 27.109 13.8419L26.7165 15.8089H25.9802L26.3363 14.026C26.3728 13.8419 26.3627 13.7046 26.3067 13.616C26.2487 13.5276 26.1439 13.4839 25.9905 13.4839C25.8013 13.4839 25.6427 13.5428 25.5115 13.6598C25.3812 13.7778 25.2949 13.9416 25.2543 14.15L24.9248 15.8089H24.189L24.7659 12.9204Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.3782 15.5882C21.1707 15.3899 21.0659 15.1224 21.0649 14.7828C21.0649 14.7247 21.0685 14.6587 21.0762 14.5864C21.0838 14.5132 21.0935 14.442 21.1072 14.3759C21.2012 13.907 21.4016 13.5348 21.7102 13.2602C22.0183 12.9846 22.3901 12.8462 22.8253 12.8462C23.1817 12.8462 23.4644 12.9459 23.6715 13.1452C23.8783 13.3456 23.982 13.6161 23.982 13.96C23.982 14.0189 23.9775 14.087 23.9699 14.1603C23.9607 14.2345 23.9496 14.3057 23.9367 14.3759C23.8448 14.8376 23.6451 15.2058 23.3364 15.4754C23.0277 15.747 22.657 15.8821 22.2248 15.8821C21.8669 15.8821 21.5851 15.7845 21.3782 15.5882ZM22.8899 15.0166C23.0297 14.8651 23.1299 14.6352 23.1909 14.3291C23.2001 14.2814 23.2082 14.2315 23.2132 14.1816C23.2183 14.1328 23.2203 14.087 23.2203 14.0454C23.2203 13.8674 23.1751 13.7291 23.0841 13.6314C22.9936 13.5327 22.865 13.484 22.6988 13.484C22.479 13.484 22.3001 13.5612 22.1598 13.7158C22.0183 13.8704 21.9182 14.1044 21.8551 14.4156C21.8465 14.4634 21.8394 14.5112 21.8328 14.558C21.8277 14.6058 21.8262 14.6505 21.8272 14.6912C21.8272 14.8682 21.8725 15.0045 21.9635 15.101C22.0539 15.1977 22.182 15.2455 22.3504 15.2455C22.5711 15.2455 22.7501 15.1692 22.8899 15.0166Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8825 12.9212H20.6758L20.0544 15.8077H19.2627L19.8825 12.9212ZM20.1322 11.8696H20.9325L20.7831 12.5703H19.9828L20.1322 11.8696Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5619 12.9204H17.2773L17.1955 13.3374L17.2982 13.2184C17.5301 12.9703 17.8118 12.8472 18.1443 12.8472C18.4453 12.8472 18.6624 12.9347 18.7987 13.1106C18.9329 13.2866 18.9695 13.5296 18.9061 13.8419L18.5119 15.8089H17.7767L18.1326 14.026C18.1693 13.8419 18.1591 13.7046 18.1026 13.616C18.0467 13.5276 17.9399 13.4839 17.7858 13.4839C17.5967 13.4839 17.4375 13.5428 17.3079 13.6598C17.1777 13.7778 17.0918 13.9416 17.0496 14.15L16.7216 15.8089H15.9849L16.5619 12.9204Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6288 14.1937C15.517 14.742 15.2576 15.163 14.8554 15.462C14.4568 15.756 13.9427 15.9034 13.3132 15.9034C12.7209 15.9034 12.2866 15.7529 12.0095 15.4508C11.8173 15.2362 11.7217 14.9636 11.7217 14.6341C11.7217 14.4978 11.738 14.3514 11.7705 14.1937L12.4412 10.9595H13.4541L12.7926 14.1571C12.7722 14.2456 12.7641 14.328 12.7651 14.4022C12.7641 14.566 12.8047 14.7002 12.8871 14.805C13.0071 14.9606 13.2018 15.0379 13.4729 15.0379C13.7845 15.0379 14.0413 14.9616 14.2406 14.808C14.44 14.6555 14.5702 14.4389 14.6286 14.1571L15.2922 10.9595H16.3L15.6288 14.1937Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_5382_46856">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/vipps.svg b/apps/scandic-web/public/_static/icons/payment/vipps.svg
deleted file mode 100644
index d84563004..000000000
--- a/apps/scandic-web/public/_static/icons/payment/vipps.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46850)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path d="M6.90907 12L8.53179 16.0452L10.1227 12H12L9.20003 18H7.80002L5 12H6.90907Z" fill="#FF5B24"/>
-<path d="M16.1872 17.4091C17.3542 17.4091 18.0166 16.7728 18.6475 15.8536C18.9944 15.3586 19.436 15.2526 19.7515 15.5354C20.0669 15.8182 20.0984 16.3485 19.7515 16.8435C18.8367 18.1869 17.6696 19 16.1872 19C14.5785 19 13.1591 18.0101 12.1813 16.2778C11.8974 15.8182 11.9605 15.3232 12.2759 15.0758C12.5913 14.8283 13.0645 14.9343 13.3483 15.4293C14.0423 16.596 14.9886 17.4091 16.1872 17.4091ZM18.3636 13.0606C18.3636 13.697 17.922 14.1212 17.4173 14.1212C16.9126 14.1212 16.4711 13.697 16.4711 13.0606C16.4711 12.4242 16.9126 12 17.4173 12C17.922 12 18.3636 12.4596 18.3636 13.0606Z" fill="#FF5B24"/>
-<path d="M22.75 12.1777V13.0658C23.2273 12.4441 23.9591 12 25.041 12C26.4091 12 28 13.0658 28 15.3454C28 17.7434 26.4727 18.898 24.8818 18.898C24.0546 18.898 23.2909 18.602 22.7182 17.8619V21H21V12.1777H22.75ZM22.75 15.4342C22.75 16.7665 23.5773 17.477 24.5001 17.477C25.3909 17.477 26.2818 16.8257 26.2818 15.4342C26.2818 14.0724 25.3909 13.4211 24.5001 13.4211C23.6091 13.4211 22.75 14.0428 22.75 15.4342Z" fill="#FF5B24"/>
-<path d="M30.75 12.1777V13.0658C31.2273 12.4441 31.9591 12 33.041 12C34.4091 12 36 13.0658 36 15.3454C36 17.7434 34.4727 18.898 32.8818 18.898C32.0546 18.898 31.2909 18.602 30.7182 17.8619V21H29V12.1777H30.75ZM30.75 15.4342C30.75 16.7665 31.5773 17.477 32.5001 17.477C33.3909 17.477 34.2818 16.8257 34.2818 15.4342C34.2818 14.0724 33.3909 13.4211 32.5001 13.4211C31.5773 13.4211 30.75 14.0428 30.75 15.4342Z" fill="#FF5B24"/>
-<path d="M39.0164 12C40.4919 12 41.5411 12.6309 42 14.1932L40.3937 14.4335C40.3606 13.6524 39.836 13.382 39.0492 13.382C38.459 13.382 38 13.6223 38 14.0129C38 14.3133 38.2295 14.6138 38.9181 14.7339L40.1314 14.9442C41.3114 15.1545 41.9674 15.8755 41.9674 16.837C41.9674 18.279 40.5572 19 39.2131 19C37.8033 19 36.2295 18.3391 36 16.7168L37.6066 16.4764C37.7049 17.3176 38.2623 17.6181 39.1803 17.6181C39.8691 17.6181 40.328 17.3777 40.328 16.9872C40.328 16.6267 40.0983 16.3562 39.3443 16.2361L38.2295 16.0558C37.0492 15.8455 36.3279 15.0944 36.3279 14.1331C36.3607 12.6309 37.8361 12 39.0164 12Z" fill="#FF5B24"/>
-</g>
-<defs>
-<clipPath id="clip0_5382_46850">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/public/_static/icons/payment/visa.svg b/apps/scandic-web/public/_static/icons/payment/visa.svg
deleted file mode 100644
index a0e3db0c2..000000000
--- a/apps/scandic-web/public/_static/icons/payment/visa.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clipPath="url(#clip0_5382_46849)">
-<path d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z" fill="white"/>
-<rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6666 17.9752L36.1294 14.0252L36.9523 17.9752H34.6666ZM40.3807 21.1352L38.3234 10.8652H35.4952C34.5409 10.8652 34.3088 11.6306 34.3088 11.6306L30.4761 21.1352H33.1546L33.6907 19.61H36.9578L37.2591 21.1352H40.3807Z" fill="#182E66"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8747 13.4287L31.2382 11.2978C31.2382 11.2978 30.1159 10.8652 28.946 10.8652C27.6813 10.8652 24.6783 11.4258 24.6783 14.1498C24.6783 16.7132 28.2029 16.7451 28.2029 18.0909C28.2029 19.4367 25.0415 19.1963 23.9983 18.3473L23.6191 20.5747C23.6191 20.5747 24.7569 21.1352 26.496 21.1352C28.2349 21.1352 30.8588 20.222 30.8588 17.7384C30.8588 15.1588 27.3022 14.9186 27.3022 13.7971C27.3022 12.6755 29.7842 12.8196 30.8747 13.4287Z" fill="#182E66"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8609 21.1352H19.0479L20.806 10.8652H23.6193L21.8609 21.1352Z" fill="#182E66"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9246 10.8652L14.3688 17.9288L14.0666 16.4076L14.0669 16.4082L13.1647 11.7902C13.1647 11.7902 13.0559 10.8652 11.8931 10.8652H7.66846L7.61914 11.0389C7.61914 11.0389 8.91138 11.307 10.4229 12.2133L12.7518 21.1352H15.5448L19.8096 10.8652H16.9246Z" fill="#182E66"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7144 16.3952L12.8615 11.788C12.8615 11.788 12.7586 10.8652 11.6594 10.8652H7.66574L7.61914 11.0384C7.61914 11.0384 9.53878 11.4575 11.3803 13.0263C13.1403 14.526 13.7144 16.3952 13.7144 16.3952Z" fill="#182E66"/>
-</g>
-<defs>
-<clipPath id="clip0_5382_46849">
-<rect width="48" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/apps/scandic-web/utils/tracking/payment.ts b/apps/scandic-web/utils/tracking/payment.ts
index 7f94b65e3..ef8260037 100644
--- a/apps/scandic-web/utils/tracking/payment.ts
+++ b/apps/scandic-web/utils/tracking/payment.ts
@@ -9,11 +9,11 @@ function isPaymentFailEvent(event: PaymentEvent): event is PaymentFailEvent {
   return "errorMessage" in event
 }
 
-export function trackUpdatePaymentMethod(hotelId: string, method: string) {
+export function trackUpdatePaymentMethod({ method }: { method: string }) {
   trackEvent({
     event: "paymentSelection",
     hotelInfo: {
-      hotelId: hotelId,
+      hotelId: "", // TODO: Needs to be verified with analytics if this should even be here
     },
     cta: {
       name: method,
diff --git a/packages/common/constants/paymentMethod.ts b/packages/common/constants/paymentMethod.ts
index 123bbcb3a..06d45d1b7 100644
--- a/packages/common/constants/paymentMethod.ts
+++ b/packages/common/constants/paymentMethod.ts
@@ -21,3 +21,28 @@ export enum PaymentMethodEnum {
   chinaUnionPay = "chinaUnionPay",
   discover = "discover",
 }
+
+export const PAYMENT_METHOD_TITLES: Record<
+  keyof typeof PaymentMethodEnum,
+  string
+> = {
+  card: "Credit card",
+  swish: "Swish",
+  vipps: "Vipps",
+  mobilePay: "MobilePay",
+  applePay: "Apple Pay",
+  googlePay: "Google Pay",
+  alipayPlus: "Alipay+",
+  weChatPay: "WeChat Pay",
+  payPal: "PayPal",
+  klarna: "Klarna",
+  americanExpress: "American Express",
+  dankort: "Dankort",
+  dinersClub: "Diners Club",
+  jcb: "JCB",
+  masterCard: "Mastercard",
+  visa: "Visa",
+  maestro: "Maestro",
+  chinaUnionPay: "China UnionPay",
+  discover: "Discover",
+}
diff --git a/packages/design-system/.storybook/decorators/FormDecorator.tsx b/packages/design-system/.storybook/decorators/FormDecorator.tsx
new file mode 100644
index 000000000..f39041026
--- /dev/null
+++ b/packages/design-system/.storybook/decorators/FormDecorator.tsx
@@ -0,0 +1,10 @@
+import { FormProvider, useForm } from 'react-hook-form'
+
+export const FormDecorator = (Story: React.FC) => {
+  const formMethods = useForm()
+  return (
+    <FormProvider {...formMethods}>
+      <Story />
+    </FormProvider>
+  )
+}
diff --git a/packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx b/packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 000000000..c674b5965
--- /dev/null
+++ b/packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import Checkbox from './index'
+import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Form/Checkbox',
+  component: Checkbox,
+  decorators: [FormDecorator],
+  args: { name: 'checkbox' },
+}
+export default meta
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  args: {},
+}
diff --git a/packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx b/packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx
new file mode 100644
index 000000000..63083018d
--- /dev/null
+++ b/packages/design-system/lib/components/Form/PaymentOption/PaymentOption.tsx
@@ -0,0 +1,53 @@
+import { cx } from 'class-variance-authority'
+import { Label, Radio } from 'react-aria-components'
+
+import styles from './paymentOption.module.css'
+
+import type { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+
+import { PaymentMethodIcon } from '../../Payment/PaymentMethodIcon'
+import { Typography } from '../../Typography'
+
+export type PaymentOptionProps = {
+  value: PaymentMethodEnum
+  label: string
+  cardNumber?: string
+}
+export function PaymentOption({
+  value,
+  label,
+  cardNumber,
+}: PaymentOptionProps) {
+  return (
+    <Radio
+      value={value}
+      className={({ isFocusVisible }) =>
+        cx(styles.paymentOption, { [styles.focused]: isFocusVisible })
+      }
+    >
+      {({ isSelected }) => (
+        <>
+          <div className={styles.titleContainer}>
+            <span
+              className={cx(styles.radio, { [styles.selected]: isSelected })}
+              aria-hidden
+            />
+            <Typography variant="Body/Paragraph/mdRegular">
+              <Label>{label}</Label>
+            </Typography>
+          </div>
+          {cardNumber ? (
+            <>
+              <Typography variant={'Body/Supporting text (caption)/smRegular'}>
+                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                <span>•••• {cardNumber}</span>
+              </Typography>
+            </>
+          ) : (
+            <PaymentMethodIcon paymentMethod={value} alt={label} />
+          )}
+        </>
+      )}
+    </Radio>
+  )
+}
diff --git a/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx
new file mode 100644
index 000000000..9c0546747
--- /dev/null
+++ b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { expect, fn } from 'storybook/test'
+
+import { PaymentOptionsGroup } from './PaymentOptionsGroup'
+import { PaymentOption } from './PaymentOption'
+import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
+
+const meta: Meta<typeof PaymentOptionsGroup> = {
+  title: 'Components/Payment/PaymentOptionsGroup',
+  component: PaymentOptionsGroup,
+  decorators: [FormDecorator],
+}
+export default meta
+
+type Story = StoryObj<typeof PaymentOptionsGroup>
+
+export const Default: Story = {
+  args: {
+    label: 'Select Payment Method',
+    name: 'paymentMethod',
+    onChange: fn(),
+    children: (
+      <>
+        <PaymentOption label="Visa" value={PaymentMethodEnum.visa} />
+        <PaymentOption
+          label="American Express"
+          value={PaymentMethodEnum.americanExpress}
+        />
+        <PaymentOption
+          label="MasterCard"
+          value={PaymentMethodEnum.masterCard}
+          cardNumber="1234"
+        />
+      </>
+    ),
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    const visaOption = await canvas.findByRole('radio', { name: 'Visa' })
+    expect(visaOption).toBeInTheDocument()
+
+    expect(args.onChange).not.toHaveBeenCalled()
+    await userEvent.click(visaOption)
+    expect(args.onChange).toHaveBeenCalledWith('visa')
+  },
+}
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup/index.tsx b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx
similarity index 57%
rename from apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup/index.tsx
rename to packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx
index 2d4b868d9..6d076d1da 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup/index.tsx
+++ b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx
@@ -1,39 +1,38 @@
-"use client"
+'use client'
 
-import { Label, RadioGroup } from "react-aria-components"
-import { useController, useFormContext } from "react-hook-form"
+import { Label, RadioGroup } from 'react-aria-components'
+import { useController, useFormContext } from 'react-hook-form'
 
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { trackUpdatePaymentMethod } from "@/utils/tracking"
-
-import type { ReactNode } from "react"
+import type { ReactNode } from 'react'
+import { Typography } from '../../../components/Typography'
 
 interface PaymentOptionsGroupProps {
   name: string
   label?: string
   children: ReactNode
   className?: string
+  onChange?: (newValue: string) => void
 }
 
-export default function PaymentOptionsGroup({
+export function PaymentOptionsGroup({
   name,
   label,
   children,
   className,
+  onChange,
 }: PaymentOptionsGroupProps) {
   const { control } = useFormContext()
 
   const {
-    field: { value, onChange },
+    field: { value, onChange: formOnChange },
   } = useController({
     name,
     control,
   })
 
   const handleChange = (newValue: string) => {
-    onChange(newValue)
-    trackUpdatePaymentMethod("", newValue)
+    formOnChange(newValue)
+    onChange?.(newValue)
   }
 
   return (
diff --git a/apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.module.css b/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.module.css
rename to packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css
diff --git a/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx b/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx
new file mode 100644
index 000000000..a05446471
--- /dev/null
+++ b/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { fn, expect } from 'storybook/test'
+import { SelectPaymentMethod } from './index'
+import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator'
+
+const meta: Meta<typeof SelectPaymentMethod> = {
+  title: 'Components/Payment/SelectCreditCard',
+  component: SelectPaymentMethod,
+  argTypes: {},
+  decorators: [FormDecorator],
+}
+
+export default meta
+
+type Story = StoryObj<typeof SelectPaymentMethod>
+
+export const PrimaryDefault: Story = {
+  args: {
+    onChange: fn(),
+    paymentMethods: [
+      {
+        id: 'klarna',
+        alias: 'Card 1',
+        cardType: PaymentMethodEnum.klarna,
+        truncatedNumber: '1234',
+      },
+      {
+        id: 'applePay',
+        alias: 'Card 2',
+        cardType: PaymentMethodEnum.applePay,
+        truncatedNumber: '1234',
+      },
+    ],
+  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    const options = await canvas.findAllByRole('radio')
+    expect(options[0]).toBeInTheDocument()
+
+    expect(args.onChange).not.toHaveBeenCalled()
+    await userEvent.click(options[0])
+    expect(args.onChange).toHaveBeenCalledWith('klarna')
+  },
+}
diff --git a/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx b/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx
new file mode 100644
index 000000000..a7aca18ec
--- /dev/null
+++ b/packages/design-system/lib/components/Form/SelectPaymentMethod/index.tsx
@@ -0,0 +1,62 @@
+import { useIntl } from 'react-intl'
+
+import { PaymentOptionsGroup } from '../PaymentOption/PaymentOptionsGroup'
+import { PaymentOption } from '../PaymentOption/PaymentOption'
+
+import styles from './selectPaymentMethod.module.css'
+
+import {
+  PAYMENT_METHOD_TITLES,
+  type PaymentMethodEnum,
+} from '@scandic-hotels/common/constants/paymentMethod'
+
+type PaymentMethod = {
+  id: string
+  truncatedNumber: string
+  alias: string
+  cardType: PaymentMethodEnum
+}
+
+type SelectPaymentMethodProps = {
+  paymentMethods: PaymentMethod[]
+  onChange: (value: string) => void
+  formName: string
+}
+
+export function SelectPaymentMethod({
+  paymentMethods,
+  onChange,
+  formName,
+}: SelectPaymentMethodProps) {
+  const intl = useIntl()
+  const mySavedCardsLabel = intl.formatMessage({
+    defaultMessage: 'MY SAVED CARDS',
+  })
+
+  return (
+    <section className={styles.section}>
+      <PaymentOptionsGroup
+        name={formName}
+        label={mySavedCardsLabel}
+        className={styles.paymentOptionContainer}
+        onChange={onChange}
+      >
+        {paymentMethods?.map((paymentMethods) => {
+          const label =
+            PAYMENT_METHOD_TITLES[paymentMethods.cardType] ||
+            paymentMethods.alias ||
+            paymentMethods.cardType
+
+          return (
+            <PaymentOption
+              key={paymentMethods.id}
+              value={paymentMethods.id as PaymentMethodEnum}
+              label={label}
+              cardNumber={paymentMethods.truncatedNumber}
+            />
+          )
+        })}
+      </PaymentOptionsGroup>
+    </section>
+  )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MySavedCards/mySavedCards.module.css b/packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/MySavedCards/mySavedCards.module.css
rename to packages/design-system/lib/components/Form/SelectPaymentMethod/selectPaymentMethod.module.css
diff --git a/packages/design-system/lib/components/Payment/Icons/AmericanExpressIcon.tsx b/packages/design-system/lib/components/Payment/Icons/AmericanExpressIcon.tsx
new file mode 100644
index 000000000..d403cd22f
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/AmericanExpressIcon.tsx
@@ -0,0 +1,48 @@
+import type { PaymentIconProps } from './IconProps'
+
+export const AmericanExpressIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46857)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="#0690FF"
+      />
+      <mask
+        id="mask0_5382_46857"
+        style={{ maskType: 'luminance' }}
+        maskUnits="userSpaceOnUse"
+        x="16"
+        y="0"
+        width="32"
+        height="32"
+      >
+        <path
+          d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_5382_46857)">
+        <path
+          d="M46.4 0H17.6C16.7163 0 16 0.716344 16 1.6V30.4C16 31.2837 16.7163 32 17.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+          fill="white"
+        />
+        <path
+          d="M48 32V26.9295H44.1396L42.152 24.7317L40.1544 26.9295H27.4257V16.6865H23.3175L28.4133 5.15416H33.3278L35.082 9.10496V5.15416H41.1652L42.2212 8.13132L43.2844 5.15416H48V0H16V32H48ZM44.7896 25.647H48L43.7536 21.1438L48 16.6916H44.8408L42.2184 19.5574L39.621 16.6916H36.41L40.6316 21.1694L36.41 25.647H39.5316L42.1672 22.7557L44.7896 25.647ZM45.5408 21.1475L48 23.7638V18.5531L45.5408 21.1475ZM31.2287 23.5745V22.18H36.2819V20.1586H31.2287V18.7642H36.4098L36.41 16.6916H28.785V25.647H36.41L36.4098 23.5745H31.2287ZM45.582 15.3921H48V6.43668H44.2388L42.23 12.0145L40.2344 6.43668H36.4092V15.3921H38.827V9.12332L41.13 15.3921H43.2792L45.582 9.1104V15.3921ZM33.6586 15.3921H36.4092L32.4562 6.43668H29.3089L25.3556 15.3921H28.0422L28.7844 13.601H32.9038L33.6586 15.3921ZM32.0595 11.5924H29.6286L30.8441 8.66272L32.0595 11.5924Z"
+          fill="#0690FF"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_5382_46857">
+        <rect width="48" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/ApplePayIcon.tsx b/packages/design-system/lib/components/Payment/Icons/ApplePayIcon.tsx
new file mode 100644
index 000000000..cff1b73f9
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/ApplePayIcon.tsx
@@ -0,0 +1,67 @@
+import type { PaymentIconProps } from './IconProps'
+
+export const ApplePayIcon = (props: PaymentIconProps) => {
+  return (
+    <svg
+      width="48"
+      height="32"
+      viewBox="0 0 48 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_5382_46859)">
+        <mask
+          id="mask0_5382_46859"
+          style={{ maskType: 'luminance' }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="48"
+          height="32"
+        >
+          <path
+            d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+            fill="white"
+          />
+        </mask>
+        <g mask="url(#mask0_5382_46859)">
+          <path
+            d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z"
+            fill="white"
+          />
+          <path
+            d="M22.2209 9.16162C24.4408 9.16162 25.9866 10.6918 25.9866 12.9197C25.9866 15.1555 24.409 16.6936 22.1653 16.6936H19.7074V20.6023H17.9316V9.16162H22.2209ZM19.7074 15.203H21.745C23.2911 15.203 24.171 14.3706 24.171 12.9276C24.171 11.4847 23.2911 10.6601 21.753 10.6601H19.7074V15.203Z"
+            fill="black"
+          />
+          <path
+            d="M26.4507 18.2316C26.4507 16.7727 27.5686 15.8768 29.5508 15.7658L31.834 15.6311V14.9889C31.834 14.0613 31.2076 13.5063 30.1613 13.5063C29.17 13.5063 28.5516 13.9819 28.4011 14.7273H26.7838C26.8789 13.2208 28.1632 12.1108 30.2246 12.1108C32.2463 12.1108 33.5386 13.1812 33.5386 14.854V20.6021H31.8974V19.2305H31.8579C31.3743 20.1582 30.3198 20.7448 29.2257 20.7448C27.5924 20.7448 26.4507 19.73 26.4507 18.2316ZM31.834 17.4784V16.8204L29.7805 16.9472C28.7578 17.0186 28.1791 17.4705 28.1791 18.184C28.1791 18.9133 28.7816 19.3891 29.7013 19.3891C30.8984 19.3891 31.834 18.5645 31.834 17.4784Z"
+            fill="black"
+          />
+          <path
+            d="M35.0882 23.6707V22.2832C35.2149 22.3148 35.5002 22.3148 35.6431 22.3148C36.4358 22.3148 36.864 21.9819 37.1256 21.1257C37.1256 21.1098 37.2763 20.6182 37.2763 20.6103L34.2637 12.2617H36.1187L38.2278 19.0484H38.2594L40.3684 12.2617H42.176L39.0521 21.0384C38.3389 23.0602 37.5143 23.7103 35.7859 23.7103C35.6431 23.7103 35.2149 23.6944 35.0882 23.6707Z"
+            fill="black"
+          />
+          <path
+            d="M12.6941 10.2782C13.1221 9.74283 13.4126 9.02407 13.336 8.28955C12.7094 8.32071 11.9449 8.70287 11.5023 9.23863C11.1048 9.69739 10.7531 10.4463 10.8448 11.15C11.5481 11.211 12.2507 10.7984 12.6941 10.2782Z"
+            fill="black"
+          />
+          <path
+            d="M13.328 11.2873C12.3067 11.2264 11.4383 11.867 10.9505 11.867C10.4625 11.867 9.71557 11.3179 8.90773 11.3327C7.85629 11.3482 6.88069 11.9427 6.34709 12.8882C5.24965 14.7797 6.05749 17.5855 7.12469 19.126C7.64297 19.8882 8.26757 20.7274 9.09057 20.6972C9.86817 20.6667 10.1729 20.1937 11.1181 20.1937C12.0627 20.1937 12.3372 20.6972 13.1603 20.682C14.0139 20.6667 14.5476 19.9194 15.0659 19.1566C15.6604 18.2878 15.9038 17.4488 15.9191 17.4028C15.9038 17.3875 14.2731 16.762 14.258 14.8862C14.2426 13.3155 15.5383 12.5684 15.5992 12.5221C14.8676 11.44 13.7243 11.3179 13.328 11.2873Z"
+            fill="black"
+          />
+          <path
+            d="M44.7998 0.549805H3.1998C1.73625 0.549805 0.549805 1.73625 0.549805 3.1998V28.7998C0.549805 30.2634 1.73625 31.4498 3.1998 31.4498H44.7998C46.2634 31.4498 47.4498 30.2634 47.4498 28.7998V3.1998C47.4498 1.73625 46.2634 0.549805 44.7998 0.549805Z"
+            stroke="black"
+            stroke-width="1.1"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_5382_46859">
+          <rect width="48" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/packages/design-system/lib/components/Payment/Icons/ChinaUnionPayIcon.tsx b/packages/design-system/lib/components/Payment/Icons/ChinaUnionPayIcon.tsx
new file mode 100644
index 000000000..8eac09a59
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/ChinaUnionPayIcon.tsx
@@ -0,0 +1,103 @@
+import { PaymentIconProps } from './IconProps'
+
+export const ChinaUnionPayIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46856)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="white"
+      />
+      <rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M30.6113 5.67139C29.4968 5.70603 28.134 6.58371 27.8858 7.66599L24.1192 24.3347C23.871 25.4271 24.5462 26.316 25.6325 26.3323H33.9998C35.0695 26.2794 36.109 25.4118 36.3529 24.3418L40.1196 7.67299C40.372 6.56947 39.6804 5.67343 38.5761 5.67343L30.6113 5.67139Z"
+        fill="#01798A"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.1192 24.3348L27.8858 7.66607C28.134 6.58379 29.4968 5.70611 30.5909 5.67255L27.4242 5.67051L21.7186 5.66943C20.6213 5.69187 19.2408 6.57571 18.9927 7.66607L15.225 24.3348C14.9759 25.4272 15.6521 26.3161 16.7376 26.3324H25.6325C24.5462 26.3161 23.871 25.4272 24.1192 24.3348Z"
+        fill="#024381"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M15.2249 24.3348L18.9926 7.66604C19.2407 6.57568 20.6212 5.69184 21.7185 5.6694L14.4093 5.66748C13.3059 5.66748 11.8913 6.56148 11.6391 7.66604L7.87136 24.3348C7.84844 24.4365 7.83572 24.5362 7.82812 24.6337V24.943C7.90189 25.7392 8.50996 26.3191 9.384 26.3324H16.7375C15.652 26.316 14.9758 25.4271 15.2249 24.3348Z"
+        fill="#DD0228"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M21.8729 17.8153H22.0112C22.1384 17.8153 22.2239 17.7727 22.264 17.6882L22.6234 17.1502H23.586L23.3852 17.5041H24.5394L24.393 18.0462H23.0196C22.8615 18.2842 22.6668 18.3961 22.4327 18.3828H21.7174L21.8729 17.8153ZM21.7149 18.5924H24.2434L24.0822 19.1813H23.0654L22.9102 19.7498H23.8997L23.7385 20.3387H22.749L22.5192 21.1787C22.4622 21.3191 22.5371 21.3823 22.7424 21.368H23.5489L23.3995 21.9152H21.8512C21.5577 21.9152 21.457 21.7473 21.5491 21.4107L21.843 20.3387H21.2104L21.3711 19.7498H22.0037L22.1588 19.1813H21.5541L21.7149 18.5924ZM25.7507 17.1462L25.7109 17.4909C25.7109 17.4909 26.1878 17.1328 26.621 17.1328H28.2217L27.6096 19.349C27.5588 19.6024 27.3411 19.7284 26.9566 19.7284H25.1424L24.7174 21.2846C24.6929 21.368 24.7275 21.4107 24.819 21.4107H25.176L25.0448 21.8938H24.1372C23.7889 21.8938 23.644 21.789 23.7014 21.5786L24.9024 17.1462H25.7507ZM27.1062 17.7727H25.6775L25.5066 18.3707C25.5066 18.3707 25.7445 18.1989 26.1421 18.1927C26.5386 18.1865 26.9912 18.1927 26.9912 18.1927L27.1062 17.7727ZM26.5886 19.1599C26.6942 19.1742 26.7533 19.1324 26.7604 19.0337L26.8479 18.7185H25.417L25.297 19.1599H26.5886ZM25.6234 19.8759H26.4482L26.4329 20.2329H26.6525C26.7634 20.2329 26.8184 20.1973 26.8184 20.1272L26.8834 19.8963H27.5689L27.4774 20.2329C27.4 20.5136 27.1947 20.6601 26.8611 20.6744H26.4218L26.4197 21.2846C26.4117 21.3823 26.5 21.4321 26.682 21.4321H27.095L26.9617 21.9152H25.9712C25.6936 21.9284 25.5575 21.7961 25.5604 21.5155L25.6234 19.8759Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M29.1289 17.8399L29.3202 17.1667H30.2873L30.2455 17.4137C30.2455 17.4137 30.7397 17.1667 31.0956 17.1667H32.2915L32.1014 17.8399H31.9133L31.0112 21.0152H31.1993L31.0204 21.6458H30.8323L30.754 21.9194H29.8174L29.8955 21.6458H28.0479L28.2279 21.0152H28.413L29.316 17.8399H29.1289ZM30.1723 17.8399L29.9262 18.6993C29.9262 18.6993 30.3473 18.5377 30.7103 18.4919C30.7905 18.1918 30.8953 17.8399 30.8953 17.8399H30.1723ZM29.8122 19.1021L29.5652 20.0022C29.5652 20.0022 30.032 19.7724 30.3522 19.753C30.4448 19.4052 30.5374 19.1021 30.5374 19.1021H29.8122ZM29.9932 21.0152L30.1784 20.3623H29.4565L29.2704 21.0152H29.9932ZM32.3323 17.125H33.2415L33.28 17.4605C33.274 17.5459 33.3248 17.5867 33.4326 17.5867H33.5932L33.4307 18.1552H32.7624C32.5073 18.1684 32.376 18.0708 32.3639 17.8602L32.3323 17.125ZM35.0109 18.3444L34.838 18.9547H33.9004L33.7396 19.5221H34.6763L34.5024 20.1314H33.4591L33.2231 20.4885H33.7337L33.8517 21.2034C33.8658 21.2746 33.9289 21.3092 34.0367 21.3092H34.1953L34.0286 21.898H33.4672C33.1763 21.9123 33.0259 21.8146 33.0137 21.6042L32.8783 20.9512L32.4137 21.6458C32.3038 21.8421 32.1349 21.9337 31.9073 21.9194H31.0499L31.2167 21.3305H31.4842C31.5941 21.3305 31.6855 21.2817 31.7678 21.183L32.495 20.1314H31.5574L31.7312 19.5221H32.7482L32.9099 18.9547H31.8919L32.0659 18.3444H35.0109Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M35.9423 16.3673C35.6372 17.0161 35.3465 17.3944 35.1757 17.5704C35.0047 17.7444 34.6662 18.1492 33.8506 18.1186L33.9208 17.6233C34.6071 17.4118 34.9783 16.4587 35.1898 16.0367L34.9377 12.9285L35.4685 12.9214H35.9139L35.9618 14.8711L36.7965 12.9214H37.6417L35.9423 16.3673Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M33.5789 13.1559L33.2431 13.3869C32.8923 13.1123 32.572 12.9424 31.9538 13.2292C31.1117 13.6197 30.408 16.6151 32.7266 15.6285L32.8588 15.7851L33.771 15.8085L34.37 13.0868L33.5789 13.1559ZM33.0602 14.6439C32.9136 15.0762 32.5864 15.362 32.3301 15.2807C32.0738 15.2013 31.9823 14.7843 32.1308 14.351C32.2772 13.9177 32.6066 13.633 32.8608 13.7143C33.1171 13.7937 33.2096 14.2107 33.0602 14.6439Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M28.3048 11.1304H30.3834C30.7831 11.1304 31.0922 11.221 31.3047 11.3989C31.5162 11.5789 31.6221 11.8373 31.6221 12.1739V12.1841C31.6221 12.2481 31.6179 12.3203 31.6119 12.3986C31.6016 12.4759 31.5883 12.5542 31.5712 12.6356C31.4797 13.0811 31.2671 13.4391 30.9387 13.7107C30.6091 13.9812 30.2187 14.1175 29.7692 14.1175H28.6546L28.3099 15.8089H27.3447L28.3048 11.1304ZM28.8243 13.3039H29.7489C29.9898 13.3039 30.181 13.2479 30.3204 13.1371C30.4587 13.0252 30.5502 12.8544 30.601 12.6225C30.6091 12.5797 30.6141 12.5411 30.6203 12.5055C30.6234 12.472 30.6274 12.4383 30.6274 12.4059C30.6274 12.24 30.5686 12.12 30.4505 12.0447C30.3326 11.9684 30.1476 11.9319 29.8912 11.9319H29.1061L28.8243 13.3039Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M24.7659 12.9204H25.4819L25.4007 13.3374L25.5022 13.2184C25.7342 12.9703 26.0169 12.8472 26.3484 12.8472C26.6495 12.8472 26.867 12.9347 27.0022 13.1106C27.1356 13.2866 27.1742 13.5296 27.109 13.8419L26.7165 15.8089H25.9802L26.3363 14.026C26.3728 13.8419 26.3627 13.7046 26.3067 13.616C26.2487 13.5276 26.1439 13.4839 25.9905 13.4839C25.8013 13.4839 25.6427 13.5428 25.5115 13.6598C25.3812 13.7778 25.2949 13.9416 25.2543 14.15L24.9248 15.8089H24.189L24.7659 12.9204Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M21.3782 15.5882C21.1707 15.3899 21.0659 15.1224 21.0649 14.7828C21.0649 14.7247 21.0685 14.6587 21.0762 14.5864C21.0838 14.5132 21.0935 14.442 21.1072 14.3759C21.2012 13.907 21.4016 13.5348 21.7102 13.2602C22.0183 12.9846 22.3901 12.8462 22.8253 12.8462C23.1817 12.8462 23.4644 12.9459 23.6715 13.1452C23.8783 13.3456 23.982 13.6161 23.982 13.96C23.982 14.0189 23.9775 14.087 23.9699 14.1603C23.9607 14.2345 23.9496 14.3057 23.9367 14.3759C23.8448 14.8376 23.6451 15.2058 23.3364 15.4754C23.0277 15.747 22.657 15.8821 22.2248 15.8821C21.8669 15.8821 21.5851 15.7845 21.3782 15.5882ZM22.8899 15.0166C23.0297 14.8651 23.1299 14.6352 23.1909 14.3291C23.2001 14.2814 23.2082 14.2315 23.2132 14.1816C23.2183 14.1328 23.2203 14.087 23.2203 14.0454C23.2203 13.8674 23.1751 13.7291 23.0841 13.6314C22.9936 13.5327 22.865 13.484 22.6988 13.484C22.479 13.484 22.3001 13.5612 22.1598 13.7158C22.0183 13.8704 21.9182 14.1044 21.8551 14.4156C21.8465 14.4634 21.8394 14.5112 21.8328 14.558C21.8277 14.6058 21.8262 14.6505 21.8272 14.6912C21.8272 14.8682 21.8725 15.0045 21.9635 15.101C22.0539 15.1977 22.182 15.2455 22.3504 15.2455C22.5711 15.2455 22.7501 15.1692 22.8899 15.0166Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.8825 12.9212H20.6758L20.0544 15.8077H19.2627L19.8825 12.9212ZM20.1322 11.8696H20.9325L20.7831 12.5703H19.9828L20.1322 11.8696Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.5619 12.9204H17.2773L17.1955 13.3374L17.2982 13.2184C17.5301 12.9703 17.8118 12.8472 18.1443 12.8472C18.4453 12.8472 18.6624 12.9347 18.7987 13.1106C18.9329 13.2866 18.9695 13.5296 18.9061 13.8419L18.5119 15.8089H17.7767L18.1326 14.026C18.1693 13.8419 18.1591 13.7046 18.1026 13.616C18.0467 13.5276 17.9399 13.4839 17.7858 13.4839C17.5967 13.4839 17.4375 13.5428 17.3079 13.6598C17.1777 13.7778 17.0918 13.9416 17.0496 14.15L16.7216 15.8089H15.9849L16.5619 12.9204Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M15.6288 14.1937C15.517 14.742 15.2576 15.163 14.8554 15.462C14.4568 15.756 13.9427 15.9034 13.3132 15.9034C12.7209 15.9034 12.2866 15.7529 12.0095 15.4508C11.8173 15.2362 11.7217 14.9636 11.7217 14.6341C11.7217 14.4978 11.738 14.3514 11.7705 14.1937L12.4412 10.9595H13.4541L12.7926 14.1571C12.7722 14.2456 12.7641 14.328 12.7651 14.4022C12.7641 14.566 12.8047 14.7002 12.8871 14.805C13.0071 14.9606 13.2018 15.0379 13.4729 15.0379C13.7845 15.0379 14.0413 14.9616 14.2406 14.808C14.44 14.6555 14.5702 14.4389 14.6286 14.1571L15.2922 10.9595H16.3L15.6288 14.1937Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5382_46856">
+        <rect width="48" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/DanKortIcon.tsx b/packages/design-system/lib/components/Payment/Icons/DanKortIcon.tsx
new file mode 100644
index 000000000..e9038fbd5
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/DanKortIcon.tsx
@@ -0,0 +1,45 @@
+import { PaymentIconProps } from './IconProps'
+
+export const DanKortIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46855)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="white"
+      />
+      <rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
+      <path
+        d="M16.6894 5.12549C10.7022 5.12549 5.83105 10.0036 5.83105 15.9995C5.83105 21.996 10.7022 26.8746 16.6894 26.8746H31.3125C37.2989 26.8746 42.1694 21.996 42.1694 15.9995C42.1694 10.0036 37.2989 5.12549 31.3125 5.12549H16.6894Z"
+        fill="white"
+      />
+      <path
+        d="M30.5917 21.6152L26.5498 16.499C25.8021 19.9873 23.3557 21.6146 18.7696 21.6146H9.62988C11.2833 23.6955 13.833 25.0323 16.689 25.0323H31.3122C34.1671 25.0323 36.7163 23.6961 38.3698 21.6152H30.5917Z"
+        fill="#E41D27"
+      />
+      <path
+        d="M33.8687 15.3357L38.7313 21.1278C39.7384 19.6701 40.3297 17.9031 40.3297 15.9997C40.3297 13.9909 39.6709 12.133 38.5589 10.6313L33.8687 15.3357Z"
+        fill="#E41D27"
+      />
+      <path
+        d="M14.1063 14.0054L12.8096 17.5764H18.0415C19.5881 17.5764 20.0561 16.9351 20.4022 15.7004C20.7448 14.4792 19.8844 14.0054 18.8274 14.0054H14.1063Z"
+        fill="#E41D27"
+      />
+      <path
+        d="M20.0894 10.1422C23.7207 10.1422 26.4568 11.0676 26.7384 14.132L30.5601 10.1418H38.17C36.5146 8.2011 34.0545 6.96826 31.3123 6.96826H16.6892C13.9461 6.96826 11.4856 8.2011 9.83008 10.1422H20.0894Z"
+        fill="#E41D27"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5382_46855">
+        <rect width="48" height="32" rx="3" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/DinersClubIcon.tsx b/packages/design-system/lib/components/Payment/Icons/DinersClubIcon.tsx
new file mode 100644
index 000000000..a5381ab3f
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/DinersClubIcon.tsx
@@ -0,0 +1,47 @@
+import { PaymentIconProps } from './IconProps'
+
+export const DinersClubIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46858)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="url(#paint0_linear_5382_46858)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M26.16 25.9335C31.6086 25.9594 36.5818 21.505 36.5818 16.086C36.5818 10.16 31.6086 6.06396 26.16 6.06592H21.4708C15.9569 6.06396 11.4185 10.1613 11.4185 16.086C11.4185 21.5062 15.9569 25.9595 21.4708 25.9335H26.16Z"
+        fill="#3477B9"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M21.474 6.86084C16.4355 6.8624 12.3527 10.9325 12.3516 15.9558C12.3527 20.9782 16.4355 25.0479 21.474 25.0495C26.5136 25.0479 30.5972 20.9782 30.598 15.9558C30.5972 10.9325 26.5136 6.8624 21.474 6.86084ZM15.6915 15.9558C15.6963 13.5011 17.2345 11.4079 19.4037 10.5761V21.3342C17.2345 20.5028 15.6962 18.4108 15.6915 15.9558ZM23.5435 21.3366V10.5758C25.7134 11.4056 27.2541 13.4999 27.258 15.9558C27.2541 18.4124 25.7134 20.5052 23.5435 21.3366Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_5382_46858"
+        x1="8.9407e-07"
+        y1="8.4"
+        x2="48"
+        y2="21.6"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#3479C0" />
+        <stop offset="1" stop-color="#133362" />
+      </linearGradient>
+      <clipPath id="clip0_5382_46858">
+        <rect width="48" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/DiscoverIcon.tsx b/packages/design-system/lib/components/Payment/Icons/DiscoverIcon.tsx
new file mode 100644
index 000000000..206ac928a
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/DiscoverIcon.tsx
@@ -0,0 +1,102 @@
+import { PaymentIconProps } from './IconProps'
+
+export const DiscoverIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46865)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="white"
+      />
+      <rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.6001 32.0002H46.4009C47.2841 32.0002 48.0001 31.2846 48.0001 30.3985V19.2002C48.0001 19.2002 35.1447 28.0427 11.6001 32.0002Z"
+        fill="#E7792B"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M45.2353 13.545C45.2353 12.2851 44.3553 11.5581 42.8213 11.5581H40.8481V18.2879H42.1773V15.5844H42.3509L44.1925 18.2879H45.8285L43.6809 15.4526C44.6833 15.2517 45.2353 14.5754 45.2353 13.545ZM42.5657 14.6565H42.1773V12.6181H42.5869C43.4153 12.6181 43.8661 12.9608 43.8661 13.6155C43.8661 14.2923 43.4153 14.6565 42.5657 14.6565Z"
+        fill="#1A1918"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M36.1934 18.2879H39.9668V17.1486H37.5229V15.332H39.8767V14.1921H37.5229V12.6985H39.9668V11.5581H36.1934V18.2879Z"
+        fill="#1A1918"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M32.3072 16.0784L30.4883 11.5581H29.0347L31.9295 18.4605H32.6453L35.5921 11.5581H34.1498L32.3072 16.0784Z"
+        fill="#1A1918"
+      />
+      <path
+        d="M25.8471 18.6877C27.8847 18.6877 29.5366 17.058 29.5366 15.0477C29.5366 13.0374 27.8847 11.4077 25.8471 11.4077C23.8095 11.4077 22.1577 13.0374 22.1577 15.0477C22.1577 17.058 23.8095 18.6877 25.8471 18.6877Z"
+        fill="url(#paint0_radial_5382_46865)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.4893 14.9275C16.4893 16.9056 18.0636 18.4393 20.0896 18.4393C20.6623 18.4393 21.1527 18.3283 21.7577 18.0472V16.502C21.2257 17.0272 20.7548 17.2391 20.1515 17.2391C18.8115 17.2391 17.8604 16.2805 17.8604 14.9176C17.8604 13.6256 18.8415 12.6064 20.0896 12.6064C20.7242 12.6064 21.2046 12.8298 21.7577 13.3636V11.8192C21.1738 11.5269 20.6934 11.4058 20.121 11.4058C18.1053 11.4058 16.4893 12.9707 16.4893 14.9275Z"
+        fill="#1A1918"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.1073 14.1406C13.3088 13.8492 13.0745 13.6568 13.0745 13.2933C13.0745 12.8692 13.4922 12.5473 14.0657 12.5473C14.4644 12.5473 14.7919 12.7088 15.1385 13.0923L15.8347 12.193C15.2626 11.6992 14.5782 11.4468 13.8303 11.4468C12.6234 11.4468 11.7029 12.2736 11.7029 13.3752C11.7029 14.3023 12.1316 14.7769 13.381 15.2207C13.902 15.4019 14.1671 15.5225 14.301 15.6039C14.5666 15.7753 14.6997 16.0176 14.6997 16.3002C14.6997 16.8454 14.2604 17.2495 13.6667 17.2495C13.0321 17.2495 12.5211 16.9364 12.2146 16.3519L11.355 17.1686C11.968 18.0562 12.7043 18.4496 13.7167 18.4496C15.0992 18.4496 16.0693 17.5427 16.0693 16.2399C16.0693 15.1707 15.6207 14.6866 14.1073 14.1406Z"
+        fill="#1A1918"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M9.52344 11.5581H10.854V18.2879H9.52344V11.5581Z"
+        fill="#1A1918"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.24987 11.5581H3.29688V18.2879H5.2396C6.27264 18.2879 7.01844 18.0474 7.67332 17.5111C8.45152 16.8756 8.91164 15.918 8.91164 14.9277C8.91164 12.9415 7.40767 11.5581 5.24987 11.5581ZM6.8042 16.6135C6.38596 16.9861 5.84312 17.1486 4.98348 17.1486H4.6264V12.6985H4.98348C5.84312 12.6985 6.36463 12.85 6.8042 13.2426C7.26432 13.6469 7.54104 14.2733 7.54104 14.9178C7.54104 15.5639 7.26432 16.2095 6.8042 16.6135Z"
+        fill="#1A1918"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M46.0842 11.8109C46.0842 11.6931 46.0022 11.6284 45.8574 11.6284H45.665V12.2199H45.8082V11.9906L45.9758 12.2199H46.1506L45.9534 11.976C46.0378 11.9537 46.0842 11.8931 46.0842 11.8109ZM45.8322 11.8918H45.8082V11.7371H45.8338C45.9046 11.7371 45.9414 11.7623 45.9414 11.813C45.9414 11.8655 45.9042 11.8918 45.8322 11.8918Z"
+        fill="#1A1918"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M45.8858 11.4077C45.5946 11.4077 45.3638 11.637 45.3638 11.9233C45.3638 12.2096 45.5974 12.4392 45.8858 12.4392C46.1694 12.4392 46.4018 12.2072 46.4018 11.9233C46.4018 11.641 46.1694 11.4077 45.8858 11.4077ZM45.8838 12.3471C45.655 12.3471 45.4674 12.1589 45.4674 11.9241C45.4674 11.6885 45.6526 11.5006 45.8838 11.5006C46.1118 11.5006 46.2978 11.693 46.2978 11.9241C46.2978 12.1568 46.1118 12.3471 45.8838 12.3471Z"
+        fill="#1A1918"
+      />
+    </g>
+    <defs>
+      <radialGradient
+        id="paint0_radial_5382_46865"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(28.6 17.5998) rotate(-142.431) scale(6.56048 6.47264)"
+      >
+        <stop stop-color="#F59900" />
+        <stop offset="0.210082" stop-color="#F39501" />
+        <stop offset="0.908163" stop-color="#CE3C0B" />
+        <stop offset="1" stop-color="#A4420A" />
+      </radialGradient>
+      <clipPath id="clip0_5382_46865">
+        <rect width="48" height="32" rx="3" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/GenericCardIcon.tsx b/packages/design-system/lib/components/Payment/Icons/GenericCardIcon.tsx
new file mode 100644
index 000000000..d9a11e823
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/GenericCardIcon.tsx
@@ -0,0 +1,76 @@
+import { PaymentIconProps } from './IconProps'
+
+export const GenericCardIcon = (props: PaymentIconProps) => {
+  return (
+    <svg
+      width="48"
+      height="32"
+      viewBox="0 0 48 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_5382_46864)">
+        <path
+          d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+          fill="url(#paint0_linear_5382_46864)"
+        />
+        <path
+          d="M38.8104 26H33.2104"
+          stroke="white"
+          stroke-width="1.6"
+          stroke-linecap="round"
+        />
+        <path
+          d="M30.3412 26H24.7412"
+          stroke="white"
+          stroke-width="1.6"
+          stroke-linecap="round"
+        />
+        <path
+          d="M21.872 26H16.272"
+          stroke="white"
+          stroke-width="1.6"
+          stroke-linecap="round"
+        />
+        <path
+          d="M13.4027 26H7.80273"
+          stroke="white"
+          stroke-width="1.6"
+          stroke-linecap="round"
+        />
+        <path
+          d="M12.869 9.59473H7.53566C6.35746 9.59473 5.40234 10.5498 5.40234 11.728V15.4614C5.40234 16.6396 6.35746 17.5947 7.53566 17.5947H12.869C14.0472 17.5947 15.0023 16.6396 15.0023 15.4614V11.728C15.0023 10.5498 14.0472 9.59473 12.869 9.59473Z"
+          fill="#EDEDED"
+        />
+        <path
+          d="M9.00811 9.99997V17.2M9.00811 14.8H5.80811M14.6081 14.8H11.4081M9.00811 12.4H5.80811M14.5974 12.4H11.3014V17.2213M7.53611 9.86133H12.8694C13.9004 9.86133 14.7361 10.697 14.7361 11.728V15.4613C14.7361 16.4922 13.9004 17.328 12.8694 17.328H7.53611C6.50515 17.328 5.66943 16.4922 5.66943 15.4613V11.728C5.66943 10.697 6.50515 9.86133 7.53611 9.86133Z"
+          stroke="black"
+          stroke-width="0.5332"
+        />
+        <path
+          d="M42.597 6H36.9971"
+          stroke="#EDEDED"
+          stroke-width="1.6"
+          stroke-linecap="round"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_5382_46864"
+          x1="13.9733"
+          y1="6.18668"
+          x2="21.975"
+          y2="23.9969"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#C1C1C1" />
+          <stop offset="1" stop-color="#9F9F9F" />
+        </linearGradient>
+        <clipPath id="clip0_5382_46864">
+          <rect width="48" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/packages/design-system/lib/components/Payment/Icons/GooglePayIcon.tsx b/packages/design-system/lib/components/Payment/Icons/GooglePayIcon.tsx
new file mode 100644
index 000000000..b55e87a17
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/GooglePayIcon.tsx
@@ -0,0 +1,58 @@
+import { PaymentIconProps } from './IconProps'
+
+export const GooglePayIcon = (props: PaymentIconProps) => {
+  return (
+    <svg
+      width="48"
+      height="26"
+      viewBox="0 0 48 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_5597_436)">
+        <path
+          d="M35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z"
+          fill="white"
+        />
+        <path
+          d="M35.234 1.053C36.8106 1.053 38.3426 1.3715 39.7851 1.9955C41.183 2.6 42.434 3.4645 43.5191 4.563C44.5979 5.6615 45.4468 6.942 46.0404 8.3655C46.6532 9.8345 46.966 11.3945 46.966 13C46.966 14.6055 46.6532 16.1655 46.0404 17.6345C45.4468 19.058 44.5979 20.332 43.5191 21.437C42.4404 22.5355 41.183 23.4 39.7851 24.0045C38.3426 24.6285 36.8106 24.947 35.234 24.947H12.766C11.1894 24.947 9.65745 24.6285 8.21489 24.0045C6.81702 23.4 5.56596 22.5355 4.48085 21.437C3.40213 20.3385 2.55319 19.058 1.95957 17.6345C1.34681 16.1655 1.03404 14.6055 1.03404 13C1.03404 11.3945 1.34681 9.8345 1.95957 8.3655C2.55319 6.942 3.40213 5.668 4.48085 4.563C5.55957 3.4645 6.81702 2.6 8.21489 1.9955C9.65745 1.3715 11.1894 1.053 12.766 1.053H35.234ZM35.234 0H12.766C5.74468 0 0 5.85 0 13C0 20.15 5.74468 26 12.766 26H35.234C42.2553 26 48 20.15 48 13C48 5.85 42.2553 0 35.234 0Z"
+          fill="#3C4043"
+        />
+        <path
+          d="M23.0598 13.9235V17.856H21.8359V8.14502H25.0806C25.9029 8.14502 26.6041 8.42452 27.1778 8.98352C27.7642 9.54252 28.0575 10.225 28.0575 11.031C28.0575 11.8565 27.7642 12.539 27.1778 13.0915C26.6104 13.644 25.9092 13.917 25.0806 13.917H23.0598V13.9235ZM23.0598 9.34102V12.7275H25.1061C25.5905 12.7275 25.9985 12.5585 26.3172 12.227C26.6423 11.8955 26.808 11.4925 26.808 11.0375C26.808 10.589 26.6423 10.1925 26.3172 9.86102C25.9985 9.51652 25.5969 9.34752 25.1061 9.34752H23.0598V9.34102Z"
+          fill="#3C4043"
+        />
+        <path
+          d="M31.2576 10.9912C32.1628 10.9912 32.8767 11.2382 33.3994 11.7322C33.9221 12.2262 34.1835 12.9022 34.1835 13.7602V17.8552H33.0169V16.9322H32.9659C32.4624 17.6927 31.7867 18.0697 30.9452 18.0697C30.2249 18.0697 29.6257 17.8552 29.1412 17.4197C28.6568 16.9842 28.4146 16.4447 28.4146 15.7947C28.4146 15.1057 28.6695 14.5597 29.1795 14.1567C29.6895 13.7472 30.3715 13.5457 31.2193 13.5457C31.946 13.5457 32.5452 13.6822 33.0106 13.9552V13.6692C33.0106 13.2337 32.8448 12.8697 32.507 12.5642C32.1691 12.2587 31.7739 12.1092 31.3213 12.1092C30.6393 12.1092 30.0974 12.4017 29.7022 12.9932L28.6249 12.3042C29.2177 11.4267 30.0974 10.9912 31.2576 10.9912ZM29.6767 15.8142C29.6767 16.1392 29.8106 16.4122 30.0847 16.6267C30.3524 16.8412 30.6711 16.9517 31.0345 16.9517C31.5508 16.9517 32.0098 16.7567 32.4114 16.3667C32.813 15.9767 33.0169 15.5217 33.0169 14.9952C32.6345 14.6897 32.1054 14.5337 31.4233 14.5337C30.9261 14.5337 30.5118 14.6572 30.1803 14.8977C29.8424 15.1512 29.6767 15.4567 29.6767 15.8142Z"
+          fill="#3C4043"
+        />
+        <path
+          d="M40.8385 11.2065L36.7588 20.7745H35.4966L37.0138 17.427L34.3237 11.2065H35.656L37.5938 15.9775H37.6193L39.5062 11.2065H40.8385Z"
+          fill="#3C4043"
+        />
+        <path
+          d="M18.1926 13.1301C18.1926 12.7232 18.1569 12.3339 18.0906 11.9595H12.9604V14.1045L15.915 14.1051C15.7952 14.8188 15.4095 15.4272 14.8186 15.8328V17.2245H16.5773C17.6043 16.2553 18.1926 14.8227 18.1926 13.1301Z"
+          fill="#4285F4"
+        />
+        <path
+          d="M14.8184 15.8321C14.3289 16.1688 13.6984 16.3658 12.9609 16.3658C11.5362 16.3658 10.3276 15.3869 9.89475 14.0674H8.08057V15.5026C8.97937 17.3213 10.8267 18.5693 12.9609 18.5693C14.4359 18.5693 15.6751 18.0746 16.5771 17.2231L14.8184 15.8321Z"
+          fill="#34A853"
+        />
+        <path
+          d="M9.72406 13.0025C9.72406 12.632 9.78462 12.2739 9.8949 11.9372V10.502H8.08072C7.70908 11.254 7.5 12.1029 7.5 13.0025C7.5 13.9021 7.70972 14.751 8.08072 15.5031L9.8949 14.0679C9.78462 13.7312 9.72406 13.373 9.72406 13.0025Z"
+          fill="#FABB05"
+        />
+        <path
+          d="M12.9614 9.63953C13.7665 9.63953 14.4874 9.92229 15.0567 10.4748L16.6152 8.88684C15.6686 7.98789 14.4345 7.43604 12.9614 7.43604C10.8278 7.43604 8.97986 8.68403 8.08105 10.5027L9.89524 11.9379C10.3281 10.6184 11.5367 9.63953 12.9614 9.63953Z"
+          fill="#E94235"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5597_436">
+          <rect width="48" height="26" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/packages/design-system/lib/components/Payment/Icons/IconProps.ts b/packages/design-system/lib/components/Payment/Icons/IconProps.ts
new file mode 100644
index 000000000..d4fca76de
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/IconProps.ts
@@ -0,0 +1,5 @@
+export type PaymentIconProps = {
+  className?: string
+  alt?: string
+  role: 'img'
+}
diff --git a/packages/design-system/lib/components/Payment/Icons/JcbIcon.tsx b/packages/design-system/lib/components/Payment/Icons/JcbIcon.tsx
new file mode 100644
index 000000000..b07691a02
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/JcbIcon.tsx
@@ -0,0 +1,115 @@
+import { PaymentIconProps } from './IconProps'
+
+export const JcbIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46863)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="white"
+      />
+      <rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
+      <path
+        d="M40.3598 23.5199C40.3598 26.3199 38.0796 28.5999 35.2796 28.5999H7.63965V8.4799C7.63965 5.6799 9.91965 3.3999 12.7196 3.3999H40.3598V23.5199Z"
+        fill="white"
+      />
+      <path
+        d="M31.3599 18.3599H33.4599C33.5199 18.3599 33.6599 18.3399 33.7199 18.3399C34.1199 18.2599 34.4599 17.8999 34.4599 17.3999C34.4599 16.9199 34.1199 16.5599 33.7199 16.4599C33.6599 16.4399 33.5399 16.4399 33.4599 16.4399H31.3599V18.3599Z"
+        fill="url(#paint0_linear_5382_46863)"
+      />
+      <path
+        d="M33.2196 5.1001C31.2196 5.1001 29.5796 6.7201 29.5796 8.7401V12.5201H34.7196C34.8396 12.5201 34.9796 12.5201 35.0796 12.5401C36.2396 12.6001 37.0996 13.2001 37.0996 14.2401C37.0996 15.0601 36.5196 15.7601 35.4396 15.9001V15.9401C36.6196 16.0201 37.5196 16.6801 37.5196 17.7001C37.5196 18.8001 36.5196 19.5201 35.1996 19.5201H29.5596V26.9201H34.8996C36.8996 26.9201 38.5396 25.3001 38.5396 23.2801V5.1001H33.2196Z"
+        fill="url(#paint1_linear_5382_46863)"
+      />
+      <path
+        d="M34.1999 14.4801C34.1999 14.0001 33.8599 13.6801 33.4599 13.6201C33.4199 13.6201 33.3199 13.6001 33.2599 13.6001H31.3599V15.3601H33.2599C33.3199 15.3601 33.4399 15.3601 33.4599 15.3401C33.8599 15.2801 34.1999 14.9601 34.1999 14.4801Z"
+        fill="url(#paint2_linear_5382_46863)"
+      />
+      <path
+        d="M23.1595 5.1001C21.1595 5.1001 19.5195 6.7201 19.5195 8.7401V13.5001C20.4395 12.7201 22.0395 12.2201 24.6195 12.3401C25.9995 12.4001 27.4795 12.7801 27.4795 12.7801V14.3201C26.7395 13.9401 25.8595 13.6001 24.7195 13.5201C22.7595 13.3801 21.5795 14.3401 21.5795 16.0201C21.5795 17.7201 22.7595 18.6801 24.7195 18.5201C25.8595 18.4401 26.7395 18.0801 27.4795 17.7201V19.2601C27.4795 19.2601 26.0195 19.6401 24.6195 19.7001C22.0395 19.8201 20.4395 19.3201 19.5195 18.5401V26.9401H24.8595C26.8595 26.9401 28.4995 25.3201 28.4995 23.3001V5.1001H23.1595Z"
+        fill="url(#paint3_linear_5382_46863)"
+      />
+      <path
+        d="M13.0999 5.1001C11.0999 5.1001 9.45994 6.7201 9.45994 8.7401V17.7201C10.4799 18.2201 11.5399 18.5401 12.5999 18.5401C13.8599 18.5401 14.5399 17.7801 14.5399 16.7401V12.5001H17.6599V16.7201C17.6599 18.3601 16.6399 19.7001 13.1799 19.7001C11.0799 19.7001 9.43994 19.2401 9.43994 19.2401V26.9001H14.7799C16.7799 26.9001 18.4199 25.2801 18.4199 23.2601V5.1001H13.0999Z"
+        fill="url(#paint4_linear_5382_46863)"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_5382_46863"
+        x1="24.3923"
+        y1="16.0328"
+        x2="50.4301"
+        y2="16.0328"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#007940" />
+        <stop offset="0.2285" stop-color="#00873F" />
+        <stop offset="0.7433" stop-color="#40A737" />
+        <stop offset="1" stop-color="#5CB531" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_5382_46863"
+        x1="29.576"
+        y1="16.001"
+        x2="38.5641"
+        y2="16.001"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#007940" />
+        <stop offset="0.2285" stop-color="#00873F" />
+        <stop offset="0.7433" stop-color="#40A737" />
+        <stop offset="1" stop-color="#5CB531" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_5382_46863"
+        x1="29.5759"
+        y1="14.4771"
+        x2="38.5637"
+        y2="14.4771"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#007940" />
+        <stop offset="0.2285" stop-color="#00873F" />
+        <stop offset="0.7433" stop-color="#40A737" />
+        <stop offset="1" stop-color="#5CB531" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_5382_46863"
+        x1="19.4676"
+        y1="16.001"
+        x2="28.3315"
+        y2="16.001"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#6C2C2F" />
+        <stop offset="0.1735" stop-color="#882730" />
+        <stop offset="0.5731" stop-color="#BE1833" />
+        <stop offset="0.8585" stop-color="#DC0436" />
+        <stop offset="1" stop-color="#E60039" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_5382_46863"
+        x1="9.45538"
+        y1="16.001"
+        x2="18.5822"
+        y2="16.001"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#1F286F" />
+        <stop offset="0.4751" stop-color="#004E94" />
+        <stop offset="0.8261" stop-color="#0066B1" />
+        <stop offset="1" stop-color="#006FBC" />
+      </linearGradient>
+      <clipPath id="clip0_5382_46863">
+        <rect width="48" height="32" rx="3" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/KlarnaIcon.tsx b/packages/design-system/lib/components/Payment/Icons/KlarnaIcon.tsx
new file mode 100644
index 000000000..a5afab30d
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/KlarnaIcon.tsx
@@ -0,0 +1,30 @@
+import { PaymentIconProps } from './IconProps'
+
+export const KlarnaIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46853)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="#FEB3C7"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13.9263 19.812H15.6224V12.0444H13.9263V19.812ZM24.6661 15.3204V14.6257H24.6448L23.1645 14.6254L23.0814 14.6257V19.812H24.6855V17.094C24.6855 16.3053 25.5972 15.9594 26.2229 16.1342C26.229 16.136 26.2353 16.1349 26.2418 16.1349V14.6258C25.585 14.6258 24.9813 14.9043 24.6661 15.3204ZM19.21 18.6108C18.3791 18.6108 17.7056 17.9876 17.7056 17.2188C17.7056 16.45 18.3791 15.8268 19.21 15.8268C20.0408 15.8268 20.7144 16.45 20.7144 17.2188C20.7144 17.9876 20.0408 18.6108 19.21 18.6108ZM20.6993 14.985C20.2417 14.6686 19.6831 14.482 19.0797 14.482C17.5306 14.482 16.2748 15.7074 16.2748 17.2188C16.2748 18.7302 17.5306 19.9556 19.0797 19.9556C19.6831 19.9556 20.2417 19.769 20.6993 19.4527V19.812H22.0848V14.6257H20.6993V14.985ZM30.2081 14.486C29.5722 14.486 28.9706 14.6785 28.5684 15.2098V14.6257H28.5471L27.0668 14.6254L26.9837 14.6257V19.812H28.5877V16.9752C28.5877 16.1865 29.1299 15.8003 29.7826 15.8003C30.482 15.8003 30.8841 16.208 30.8841 16.9644V19.812H32.4737V16.5138C32.4737 15.3066 31.4901 14.486 30.2081 14.486ZM40.5357 17.9723C39.984 17.9723 39.5368 18.4087 39.5368 18.9471C39.5368 19.4853 39.984 19.9217 40.5357 19.9217C41.0873 19.9217 41.5349 19.4853 41.5349 18.9471C41.5349 18.4087 41.0873 17.9723 40.5357 17.9723ZM35.9713 18.6108C35.1403 18.6108 34.4669 17.9876 34.4669 17.2188C34.4669 16.45 35.1403 15.8268 35.9713 15.8268C36.8021 15.8268 37.4755 16.45 37.4755 17.2188C37.4755 17.9876 36.8021 18.6108 35.9713 18.6108ZM37.4606 14.985C37.003 14.6686 36.4444 14.482 35.8409 14.482C34.2918 14.482 33.036 15.7074 33.036 17.2188C33.036 18.7302 34.2918 19.9556 35.8409 19.9556C36.4444 19.9556 37.003 19.769 37.4606 19.4527V19.812H38.8459V14.6257H37.4606V14.985ZM39.8533 14.7203H39.9306C39.9791 14.7203 39.9998 14.7434 39.9998 14.7786C39.9998 14.8138 39.9863 14.84 39.9306 14.84H39.8533V14.7203ZM39.8545 14.9034H39.9316L39.9967 15.0482H40.0741L40.0017 14.8912C40.0481 14.8712 40.0717 14.8319 40.0717 14.7786C40.0717 14.7051 40.0141 14.6559 39.9306 14.6559H39.7832V15.0472H39.8545V14.9034ZM6.46533 19.812H8.23325V12.0444H6.46533V19.812ZM12.7708 12.0451H11.0543C11.0193 13.7986 9.98109 15.3123 8.47597 16.0614L11.1134 19.812H13.267L10.8696 16.4004C12.0667 15.2546 12.7466 13.7101 12.7708 12.0451ZM39.9131 14.5573C40.0813 14.5573 40.2173 14.6922 40.2173 14.8581C40.2173 15.024 40.0813 15.1588 39.9131 15.1588C39.7452 15.1588 39.609 15.024 39.609 14.8581C39.609 14.6922 39.7452 14.5573 39.9131 14.5573ZM39.9131 15.2302C40.1213 15.2302 40.2905 15.0632 40.2905 14.8581C40.2905 14.6529 40.1213 14.486 39.9131 14.486C39.7048 14.486 39.5368 14.6529 39.5368 14.8581C39.5368 15.0632 39.7048 15.2302 39.9131 15.2302Z"
+        fill="black"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5382_46853">
+        <rect width="48" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/MaestroIcon.tsx b/packages/design-system/lib/components/Payment/Icons/MaestroIcon.tsx
new file mode 100644
index 000000000..120f1b965
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/MaestroIcon.tsx
@@ -0,0 +1,49 @@
+import { PaymentIconProps } from './IconProps'
+
+export const MaestroIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46861)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="white"
+      />
+      <rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z"
+        fill="#00A2E5"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z"
+        fill="#7375CF"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z"
+        fill="#00A2E5"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z"
+        fill="#EB001B"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5382_46861">
+        <rect width="48" height="32" rx="3" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/MasterCardIcon.tsx b/packages/design-system/lib/components/Payment/Icons/MasterCardIcon.tsx
new file mode 100644
index 000000000..1e08291ff
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/MasterCardIcon.tsx
@@ -0,0 +1,49 @@
+import { PaymentIconProps } from './IconProps'
+
+export const MasterCardIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46852)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="white"
+      />
+      <rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.0114 21.8622V21.4951H38.9155L38.8054 21.7477L38.695 21.4951H38.5991V21.8622H38.6669V21.5852L38.7702 21.8241H38.8404L38.9439 21.5847V21.8622H39.0114ZM38.4044 21.8622V21.5576H38.5271V21.4956H38.2144V21.5576H38.3371V21.8622H38.4044Z"
+        fill="#F79E1B"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.8608 23.4378H28.1392V8.56152H19.8608V23.4378Z"
+        fill="#FF5F00"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.307 16C39.307 21.2251 35.0716 25.4607 29.8468 25.4607C27.6398 25.4607 25.6092 24.7048 24 23.4381C26.2004 21.7057 27.6136 19.0178 27.6136 16C27.6136 12.9819 26.2004 10.294 24 8.56162C25.6092 7.2949 27.6398 6.53906 29.8468 6.53906C35.0716 6.53906 39.307 10.7747 39.307 16Z"
+        fill="#F79E1B"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20.3863 16C20.3863 12.9819 21.7994 10.294 23.9999 8.56162C22.3907 7.2949 20.36 6.53906 18.153 6.53906C12.9282 6.53906 8.69287 10.7747 8.69287 16C8.69287 21.2251 12.9282 25.4607 18.153 25.4607C20.36 25.4607 22.3907 24.7048 23.9999 23.4381C21.7994 21.7057 20.3863 19.0178 20.3863 16Z"
+        fill="#EB001B"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5382_46852">
+        <rect width="48" height="32" rx="3" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/MobilePayIcon.tsx b/packages/design-system/lib/components/Payment/Icons/MobilePayIcon.tsx
new file mode 100644
index 000000000..38ce1f0ad
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/MobilePayIcon.tsx
@@ -0,0 +1,135 @@
+import { PaymentIconProps } from './IconProps'
+
+export const MobilePayIcon = (props: PaymentIconProps) => {
+  return (
+    <svg
+      width="48"
+      height="32"
+      viewBox="0 0 48 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_5597_450)">
+        <rect width="48" height="32" fill="white" />
+        <g clipPath="url(#clip1_5597_450)">
+          <path
+            d="M22.4837 19.1878C21.9642 19.1878 21.4958 18.875 21.2967 18.3952L16.8651 7.69688C16.594 7.04228 16.9048 6.29183 17.5593 6.02062L22.201 4.0982C22.5153 3.96795 22.8685 3.96792 23.1828 4.09812C23.4972 4.22832 23.7469 4.47808 23.877 4.79244L28.3087 15.4912C28.5794 16.1456 28.2686 16.8955 27.6144 17.1667L22.9727 19.0901C22.8177 19.1545 22.6516 19.1877 22.4837 19.1878ZM22.692 4.69071C22.6142 4.69084 22.5372 4.70633 22.4654 4.73629L17.8235 6.65871C17.6784 6.71882 17.5632 6.83411 17.5031 6.97921C17.443 7.12432 17.443 7.28735 17.5032 7.43244L21.9348 18.1314C22.0602 18.4332 22.4063 18.5766 22.7085 18.452L27.3502 16.5282C27.4953 16.4681 27.6106 16.3528 27.6707 16.2077C27.7308 16.0626 27.7307 15.8996 27.6706 15.7545L23.239 5.05666C23.1472 4.83546 22.9315 4.69111 22.692 4.69071Z"
+            fill="#5A78FF"
+          />
+          <path
+            style={{ mixBlendMode: 'multiply' }}
+            opacity="0.7"
+            d="M24.1699 5.49788L23.5317 5.76221L25.2864 9.99829L25.9245 9.73396L24.1699 5.49788Z"
+            fill="url(#paint0_linear_5597_450)"
+          />
+          <path
+            style={{ mixBlendMode: 'multiply' }}
+            opacity="0.7"
+            d="M27.3755 15.0441L28.0137 14.7798L26.0275 9.9847L25.3893 10.249L27.3755 15.0441Z"
+            fill="url(#paint1_linear_5597_450)"
+          />
+          <path
+            d="M26.5698 11.8656C25.2424 12.416 24.134 13.1748 23.4082 14.0894L21.5371 9.57038C22.3906 8.57877 23.477 7.81462 24.6987 7.34652C26.0262 6.79607 27.3673 6.52964 28.5068 6.68487L30.3784 11.2037C29.0736 11.1054 27.7649 11.3329 26.5698 11.8656Z"
+            fill="#5A78FF"
+          />
+          <g style={{ mixBlendMode: 'multiply' }} opacity="0.4">
+            <path
+              opacity="0.9"
+              d="M26.5694 11.8656C25.2419 12.416 24.1335 13.1748 23.4077 14.0894L21.5366 9.57038C22.3901 8.57877 23.4765 7.81462 24.6982 7.34652C26.0257 6.79607 27.3669 6.52964 28.5063 6.68487L30.3779 11.2037C29.0731 11.1054 27.7644 11.3329 26.5694 11.8656Z"
+              fill="url(#paint2_linear_5597_450)"
+            />
+            <path
+              opacity="0.7"
+              d="M26.5694 11.8656C25.2419 12.416 24.1335 13.1748 23.4077 14.0894L21.5366 9.57038C22.3901 8.57877 23.4765 7.81462 24.6982 7.34652C26.0257 6.79607 27.3669 6.52964 28.5063 6.68487L30.3779 11.2037C29.0731 11.1054 27.7644 11.3329 26.5694 11.8656Z"
+              fill="url(#paint3_linear_5597_450)"
+            />
+          </g>
+          <path
+            d="M27.1799 13.243C25.743 13.243 24.4277 13.5206 23.4082 14.0874V9.51815C24.5762 8.92877 25.8722 8.63863 27.1799 8.67375C28.6169 8.67375 29.958 8.94017 30.9515 9.51925V14.0885C29.7837 13.4986 28.4877 13.2081 27.1799 13.243Z"
+            fill="#5A78FF"
+          />
+          <path
+            d="M9.72023 26.6544L10.8828 22.9796C10.895 22.9286 10.9385 22.8913 10.9907 22.8871H11.5742C11.6265 22.8944 11.6705 22.93 11.6887 22.9796L12.5936 25.2981C12.6112 25.3443 12.6575 25.3487 12.6729 25.2981L13.5712 22.9796C13.5894 22.93 13.6334 22.8944 13.6857 22.8871H14.2692C14.3214 22.8913 14.3649 22.9286 14.3771 22.9796L15.5155 26.6544C15.5288 26.6827 15.5262 26.716 15.5085 26.7418C15.4909 26.7676 15.4608 26.7821 15.4296 26.7799H14.7426C14.6934 26.7822 14.6498 26.7487 14.6391 26.7007L13.9037 24.3139C13.8927 24.2676 13.8399 24.2676 13.8245 24.3139L12.9437 26.683C12.9287 26.7401 12.8772 26.7799 12.8182 26.7799H12.4197C12.3612 26.7811 12.3103 26.7403 12.2986 26.683L11.4002 24.3139C11.3826 24.2676 11.3364 24.2676 11.3254 24.3139L10.5701 26.7007C10.5584 26.7499 10.5128 26.7835 10.4622 26.7799H9.8017C9.77076 26.7819 9.74117 26.767 9.72429 26.741C9.70741 26.715 9.70586 26.6819 9.72023 26.6544ZM15.7445 25.3443C15.7319 24.7183 16.0994 24.1469 16.6742 23.8986C17.2491 23.6503 17.917 23.7744 18.3642 24.2127C18.8114 24.651 18.949 25.3162 18.7124 25.896C18.4758 26.4757 17.9119 26.8547 17.2857 26.8548C16.8782 26.8687 16.4828 26.715 16.1916 26.4296C15.9004 26.1442 15.7388 25.752 15.7445 25.3443ZM18.0344 25.3443C18.0104 24.9323 17.6609 24.6153 17.2485 24.6315C16.8361 24.6477 16.5126 24.991 16.5209 25.4037C16.5293 25.8163 16.8664 26.1463 17.2791 26.1458C17.4857 26.14 17.6815 26.0523 17.8232 25.9019C17.9649 25.7515 18.0409 25.5509 18.0344 25.3443ZM20.1878 26.5465C20.1305 26.5003 20.0799 26.5179 20.0799 26.5972V26.6786C20.0799 26.7365 20.0342 26.7842 19.9764 26.7865H19.4391C19.3805 26.7843 19.3335 26.7373 19.3312 26.6786V22.9972C19.3335 22.9385 19.3805 22.8915 19.4391 22.8893H20.005C20.0629 22.8916 20.1085 22.9393 20.1085 22.9972V24.0364C20.1085 24.1113 20.1591 24.1333 20.2406 24.0761C20.4573 23.9137 20.7206 23.8257 20.9914 23.8251C21.7753 23.8251 22.3764 24.4856 22.3764 25.3355C22.3949 25.724 22.2557 26.1035 21.9903 26.3879C21.725 26.6723 21.3561 26.8375 20.9672 26.846C20.6794 26.8453 20.402 26.7387 20.1878 26.5465ZM21.5969 25.3443C21.6186 25.0607 21.4796 24.7889 21.237 24.6405C20.9944 24.4921 20.689 24.4921 20.4464 24.6405C20.2038 24.7889 20.0648 25.0607 20.0865 25.3443C20.0787 25.5498 20.1539 25.7498 20.2951 25.8993C20.4363 26.0487 20.6317 26.1352 20.8373 26.1392C21.2657 26.1284 21.6046 25.7728 21.5947 25.3443H21.5969ZM22.8498 23.1557C22.8498 22.9125 23.0469 22.7153 23.2901 22.7153C23.5333 22.7153 23.7305 22.9125 23.7305 23.1557C23.7305 23.3989 23.5333 23.5961 23.2901 23.5961C23.0469 23.5961 22.8498 23.3989 22.8498 23.1557ZM22.8894 26.6786V24.0144C22.8894 23.9565 22.935 23.9089 22.9929 23.9065H23.5588C23.6174 23.9088 23.6644 23.9558 23.6667 24.0144V26.6786C23.6644 26.7373 23.6174 26.7843 23.5588 26.7865H22.9929C22.935 26.7842 22.8894 26.7365 22.8894 26.6786ZM24.3052 25.7979V22.9972C24.3051 22.9393 24.3508 22.8916 24.4087 22.8893H24.9745C25.0332 22.8915 25.0802 22.9385 25.0824 22.9972V25.8243C25.0824 26.0071 25.1617 26.1282 25.3621 26.1282C25.4217 26.1282 25.47 26.1765 25.47 26.2361V26.7051C25.4676 26.7629 25.42 26.8086 25.3621 26.8085C24.609 26.8085 24.3052 26.5619 24.3052 25.7979ZM25.6813 25.3575C25.6604 24.8125 25.9392 24.2997 26.408 24.0209C26.8768 23.7422 27.4605 23.7422 27.9294 24.0209C28.3982 24.2997 28.677 24.8125 28.656 25.3575C28.656 25.461 28.6274 25.5469 28.5239 25.5469H26.5555C26.5048 25.5469 26.4872 25.5755 26.4916 25.6218C26.5404 25.9639 26.8447 26.2107 27.1896 26.1876C27.3986 26.1907 27.5981 26.1003 27.7334 25.941C27.7754 25.882 27.8438 25.8474 27.9162 25.8485H28.4358C28.5283 25.8485 28.5679 25.9124 28.5327 26.0027C28.224 26.632 27.5224 26.9657 26.8394 26.8081C26.1564 26.6505 25.672 26.0431 25.6703 25.3421L25.6813 25.3575ZM27.7709 25.0933C27.8105 25.0933 27.8281 25.0757 27.8215 25.0295C27.7615 24.7134 27.4826 24.4866 27.161 24.4922C26.8464 24.4919 26.5729 24.708 26.5004 25.014C26.4894 25.0537 26.5004 25.0933 26.5467 25.0933H27.7709ZM29.1316 26.6786V22.9972C29.1316 22.9393 29.1772 22.8916 29.2351 22.8893H31.0384C31.8619 22.8893 32.4234 23.3693 32.4234 24.1774C32.4234 24.9854 31.787 25.483 30.9988 25.483H30.0432C30.0141 25.48 29.9853 25.4906 29.965 25.5117C29.9448 25.5328 29.9354 25.562 29.9397 25.5909V26.6786C29.9374 26.7373 29.8904 26.7843 29.8318 26.7865H29.2373C29.1786 26.7853 29.1316 26.7374 29.1316 26.6786ZM30.9988 24.8247C31.1646 24.8224 31.3226 24.7538 31.4376 24.6343C31.5526 24.5148 31.615 24.3542 31.6109 24.1884C31.6178 24.024 31.5555 23.8642 31.4392 23.7479C31.3229 23.6316 31.1631 23.5693 30.9988 23.5763H30.0366C29.9683 23.5763 29.9397 23.6115 29.9397 23.6797V24.7212C29.9397 24.7895 29.9683 24.8247 30.0366 24.8247H30.9988ZM32.692 25.3443C32.6771 24.9549 32.8191 24.5758 33.086 24.2919C33.3529 24.008 33.7226 23.843 34.1122 23.8339C34.3933 23.8354 34.6642 23.9395 34.874 24.1267C34.9246 24.1729 34.9819 24.1663 34.9819 24.0981V24.0122C34.9819 23.9551 35.0282 23.9087 35.0854 23.9087H35.6226C35.6812 23.911 35.7282 23.958 35.7305 24.0166V25.9124C35.7305 26.0555 35.7811 26.1194 35.8802 26.1326C35.9316 26.1336 35.9737 26.1738 35.9771 26.2251V26.7227C35.9771 26.7762 35.9337 26.8196 35.8802 26.8196C35.5015 26.8196 35.2791 26.7117 35.1536 26.4937C35.1184 26.4364 35.0788 26.4254 35.0215 26.4827C34.7797 26.7316 34.446 26.8702 34.0989 26.8658C33.7093 26.8544 33.3406 26.6868 33.0759 26.4005C32.8113 26.1143 32.6729 25.7337 32.692 25.3443ZM34.9819 25.3443C35.0035 25.0615 34.8649 24.7905 34.623 24.6425C34.3811 24.4945 34.0766 24.4945 33.8347 24.6425C33.5928 24.7905 33.4542 25.0615 33.4758 25.3443C33.4542 25.6271 33.5928 25.8982 33.8347 26.0462C34.0766 26.1942 34.3811 26.1942 34.623 26.0462C34.8649 25.8982 35.0035 25.6271 34.9819 25.3443ZM36.2523 27.7796V27.315C36.2547 27.2571 36.3023 27.2114 36.3602 27.2115C36.7288 27.2399 37.069 27.0125 37.1837 26.661C37.2031 26.5874 37.1952 26.5092 37.1617 26.4408L36.1092 24.0585C36.091 24.0261 36.0916 23.9864 36.1107 23.9545C36.1298 23.9227 36.1646 23.9035 36.2017 23.9043H36.7676C36.8248 23.9043 36.86 23.9506 36.8821 24.0078L37.5426 25.5315C37.5889 25.6526 37.6637 25.646 37.7144 25.5315L38.3441 24.0034C38.3661 23.9462 38.3947 23.9109 38.452 23.9109H39.0046C39.0385 23.9091 39.071 23.9248 39.0906 23.9525C39.1103 23.9802 39.1144 24.016 39.1015 24.0474L38.0204 26.617C37.6263 27.5506 37.2079 27.8985 36.3712 27.8985C36.3391 27.9004 36.3078 27.8885 36.285 27.8658C36.2623 27.843 36.2504 27.8116 36.2523 27.7796Z"
+            fill="#5A78FF"
+          />
+        </g>
+      </g>
+      <rect
+        x="0.4"
+        y="0.4"
+        width="47.2"
+        height="31.2"
+        rx="2"
+        stroke="#E9E8E7"
+        stroke-width="0.8"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_5597_450"
+          x1="187.993"
+          y1="314.829"
+          x2="159.344"
+          y2="-19.421"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#504678" />
+          <stop offset="0.302" stop-color="#504678" stop-opacity="0.616" />
+          <stop offset="0.608" stop-color="#504678" stop-opacity="0.283" />
+          <stop offset="0.852" stop-color="#504678" stop-opacity="0.076" />
+          <stop offset="1" stop-color="#504678" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_5597_450"
+          x1="-154.046"
+          y1="-336.772"
+          x2="-136.078"
+          y2="37.7502"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#504678" />
+          <stop offset="0.302" stop-color="#504678" stop-opacity="0.616" />
+          <stop offset="0.608" stop-color="#504678" stop-opacity="0.283" />
+          <stop offset="0.852" stop-color="#504678" stop-opacity="0.076" />
+          <stop offset="1" stop-color="#504678" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_5597_450"
+          x1="142.679"
+          y1="500.77"
+          x2="493.297"
+          y2="261.747"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#504678" />
+          <stop offset="0.179" stop-color="#504678" stop-opacity="0.872" />
+          <stop offset="0.526" stop-color="#504678" stop-opacity="0.536" />
+          <stop offset="1" stop-color="#504678" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_5597_450"
+          x1="443.476"
+          y1="267.116"
+          x2="427.924"
+          y2="142.726"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#504678" />
+          <stop offset="0.643" stop-color="#504678" stop-opacity="0.332" />
+          <stop offset="1" stop-color="#504678" stop-opacity="0" />
+        </linearGradient>
+        <clipPath id="clip0_5597_450">
+          <rect width="48" height="32" rx="2.4" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_5597_450">
+          <rect
+            width="29.7248"
+            height="24"
+            fill="white"
+            transform="translate(9.5 4)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/packages/design-system/lib/components/Payment/Icons/PayPalIcon.tsx b/packages/design-system/lib/components/Payment/Icons/PayPalIcon.tsx
new file mode 100644
index 000000000..a25d9785d
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/PayPalIcon.tsx
@@ -0,0 +1,61 @@
+import { PaymentIconProps } from './IconProps'
+
+export const PayPalIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46860)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="white"
+      />
+      <rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M30.4927 13.8679C30.3424 14.8536 29.5892 14.8536 28.8603 14.8536H28.4457L28.7366 13.0131C28.754 12.902 28.85 12.8202 28.9627 12.8202H29.153C29.649 12.8202 30.1174 12.8202 30.3591 13.1024C30.5036 13.2713 30.5472 13.5219 30.4927 13.8679ZM30.1756 11.2959H27.4274C27.2392 11.2959 27.0794 11.4326 27.05 11.6181L25.9389 18.6598C25.9169 18.7986 26.0246 18.9243 26.1649 18.9243H27.5752C27.7066 18.9243 27.8186 18.8287 27.8391 18.6991L28.1545 16.7025C28.1835 16.517 28.3437 16.3803 28.5315 16.3803H29.401C31.2112 16.3803 32.2562 15.5051 32.529 13.7698C32.652 13.0114 32.534 12.4151 32.1786 11.9977C31.7878 11.5388 31.095 11.2959 30.1756 11.2959Z"
+        fill="#009CDE"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.8911 13.8679C10.7409 14.8536 9.98761 14.8536 9.25873 14.8536H8.84417L9.13509 13.0131C9.15245 12.902 9.24845 12.8202 9.36113 12.8202H9.55141C10.0475 12.8202 10.5159 12.8202 10.7575 13.1024C10.9021 13.2713 10.9457 13.5219 10.8911 13.8679ZM10.574 11.2959H7.82585C7.63769 11.2959 7.47789 11.4326 7.44849 11.6181L6.33733 18.6598C6.31537 18.7986 6.42273 18.9243 6.56337 18.9243H7.87581C8.06361 18.9243 8.22341 18.7877 8.25281 18.6025L8.55293 16.7025C8.58197 16.517 8.74213 16.3803 8.92993 16.3803H9.79945C11.6097 16.3803 12.6546 15.5051 12.9275 13.7698C13.0504 13.0114 12.9324 12.4151 12.577 11.9977C12.1862 11.5388 11.4935 11.2959 10.574 11.2959Z"
+        fill="#003087"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.9544 16.3959C16.8272 17.1472 16.2305 17.6518 15.4691 17.6518C15.0875 17.6518 14.7817 17.5289 14.5854 17.2966C14.3909 17.0665 14.3175 16.7383 14.3792 16.3732C14.4975 15.6283 15.1041 15.1078 15.8539 15.1078C16.2277 15.1078 16.531 15.2317 16.7312 15.4661C16.9328 15.7023 17.0122 16.0323 16.9544 16.3959ZM18.7884 13.8363H17.4724C17.3598 13.8363 17.2637 13.9181 17.246 14.0296L17.1883 14.3972L17.0965 14.264C16.8113 13.8508 16.1759 13.7124 15.5417 13.7124C14.0879 13.7124 12.846 14.8136 12.6043 16.3576C12.4785 17.1281 12.6571 17.8642 13.0944 18.378C13.4958 18.85 14.0688 19.0464 14.7516 19.0464C15.9237 19.0464 16.5735 18.2944 16.5735 18.2944L16.5147 18.6598C16.4927 18.7986 16.6001 18.9243 16.7411 18.9243H17.926C18.1141 18.9243 18.2739 18.788 18.3033 18.6024L19.0148 14.1008C19.0368 13.962 18.9291 13.8363 18.7884 13.8363Z"
+        fill="#003087"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M36.5555 16.3959C36.4283 17.1472 35.8316 17.6518 35.0702 17.6518C34.6885 17.6518 34.3828 17.5289 34.1864 17.2966C33.9916 17.0665 33.9186 16.7383 33.9802 16.3732C34.0986 15.6283 34.7052 15.1078 35.455 15.1078C35.8288 15.1078 36.1321 15.2317 36.3322 15.4661C36.5339 15.7023 36.6132 16.0323 36.5555 16.3959ZM38.3895 13.8363H37.0735C36.9608 13.8363 36.8648 13.9181 36.8471 14.0296L36.7894 14.3972L36.6972 14.264C36.4123 13.8508 35.777 13.7124 35.1428 13.7124C33.689 13.7124 32.4471 14.8136 32.2054 16.3576C32.0796 17.1281 32.2582 17.8642 32.6954 18.378C33.0969 18.85 33.6698 19.0464 34.3526 19.0464C35.5248 19.0464 36.1746 18.2944 36.1746 18.2944L36.1158 18.6598C36.0938 18.7986 36.2012 18.9243 36.3422 18.9243H37.527C37.7152 18.9243 37.875 18.788 37.9044 18.6024L38.6159 14.1008C38.6379 13.962 38.5302 13.8363 38.3895 13.8363Z"
+        fill="#009CDE"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M25.7972 13.8364H24.4745C24.348 13.8364 24.2296 13.8991 24.1588 14.0039L22.334 16.6891L21.5608 14.1087C21.5123 13.9473 21.3635 13.8364 21.1948 13.8364H19.8948C19.7378 13.8364 19.6273 13.9908 19.678 14.1391L21.1342 18.4113L19.7644 20.3428C19.657 20.4943 19.7655 20.7039 19.9515 20.7039H21.2728C21.3978 20.7039 21.5151 20.6427 21.5867 20.54L25.9853 14.1958C26.0906 14.0439 25.9821 13.8364 25.7972 13.8364Z"
+        fill="#003087"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M39.9407 11.4897L38.8129 18.6603C38.7909 18.7991 38.8983 18.9248 39.039 18.9248H40.1737C40.3613 18.9248 40.5213 18.7881 40.5505 18.6026L41.6629 11.5609C41.6849 11.4221 41.5773 11.2964 41.4365 11.2964H40.1673C40.0541 11.2964 39.9581 11.3781 39.9407 11.4897Z"
+        fill="#009CDE"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5382_46860">
+        <rect width="48" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/Icons/SwishIcon.tsx b/packages/design-system/lib/components/Payment/Icons/SwishIcon.tsx
new file mode 100644
index 000000000..72207c637
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/SwishIcon.tsx
@@ -0,0 +1,112 @@
+import { PaymentIconProps } from './IconProps'
+
+export const SwishIcon = (props: PaymentIconProps) => {
+  return (
+    <svg
+      width="48"
+      height="32"
+      viewBox="0 0 48 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_5382_46851)">
+        <path
+          d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+          fill="white"
+        />
+        <rect
+          x="0.5"
+          y="0.5"
+          width="47"
+          height="31"
+          rx="2.5"
+          stroke="#E9E8E7"
+        />
+        <path
+          d="M18.8844 18.2247L18.9947 18.0685C19.1325 17.8853 19.2868 17.8638 19.5128 17.9823C19.7278 18.0954 20.075 18.2894 20.5435 18.2894C20.9403 18.2894 21.1884 18.1116 21.1884 17.8314C21.1884 17.0988 18.8955 17.3735 18.8955 15.822C18.8955 14.9385 19.6947 14.4698 20.6647 14.4698C21.2766 14.4698 21.7064 14.6638 21.949 14.7984C22.1584 14.9062 22.186 15.0894 22.0868 15.2941L21.9986 15.4557C21.8884 15.6712 21.7175 15.6927 21.4915 15.5958C21.2931 15.5096 20.9899 15.3749 20.6151 15.3749C20.2183 15.3749 19.9923 15.5365 19.9923 15.8166C19.9923 16.5601 22.2797 16.2692 22.2797 17.8099C22.2797 18.6072 21.5907 19.1998 20.5214 19.1998C19.7774 19.1998 19.2648 18.925 18.9782 18.7419C18.7687 18.6126 18.7522 18.4186 18.8844 18.2247ZM22.671 14.987C22.5994 14.7392 22.7261 14.5722 22.9852 14.5722H23.4206C23.6466 14.5722 23.7844 14.6799 23.8285 14.9008L24.5726 17.5406C24.6277 17.7776 24.6607 18.02 24.6607 18.02H24.6773C24.6773 18.02 24.7158 17.7776 24.7765 17.5406L25.5536 14.9008C25.5977 14.6907 25.741 14.583 25.9725 14.583H26.3142C26.5402 14.583 26.6725 14.6907 26.7277 14.9008L27.4993 17.5406C27.5709 17.7776 27.5985 18.02 27.5985 18.02H27.615C27.615 18.02 27.6481 17.7776 27.7142 17.5406L28.4473 14.9008C28.5024 14.6799 28.6347 14.5722 28.8607 14.5722H29.2796C29.5496 14.5722 29.6654 14.7392 29.5937 14.987L28.4087 18.7742C28.3426 18.9897 28.1993 19.0867 27.9843 19.0867H27.378C27.1521 19.0867 27.0087 18.9789 26.9536 18.7688L26.2646 16.5062C26.193 16.2692 26.1544 16.0214 26.1544 16.0214H26.1379C26.1379 16.0214 26.0938 16.2692 26.0221 16.5062L25.3276 18.7634C25.2725 18.9789 25.1348 19.0813 24.9088 19.0813H24.2804C24.0655 19.0813 23.9277 18.9843 23.867 18.7688L22.671 14.987ZM30.2827 14.9439C30.2827 14.7015 30.4094 14.5722 30.652 14.5722H31.0488C31.2913 14.5722 31.4181 14.7015 31.4181 14.9439V18.715C31.4181 18.9628 31.2913 19.0867 31.0488 19.0867H30.652C30.4094 19.0867 30.2827 18.9628 30.2827 18.715V14.9439ZM32.1842 18.2247L32.2945 18.0685C32.4268 17.8853 32.5866 17.8638 32.8126 17.9823C33.0275 18.0954 33.3748 18.2894 33.8432 18.2894C34.2401 18.2894 34.4881 18.1116 34.4881 17.8314C34.4881 17.0988 32.2008 17.3735 32.2008 15.822C32.2008 14.9385 32.9944 14.4698 33.9645 14.4698C34.5818 14.4698 35.0062 14.6638 35.2488 14.7984C35.4582 14.9062 35.4858 15.0894 35.3865 15.2941L35.2984 15.4557C35.1936 15.6712 35.0172 15.6927 34.7913 15.5958C34.5928 15.5096 34.2952 15.3749 33.9149 15.3749C33.5181 15.3749 33.2921 15.5365 33.2921 15.8166C33.2921 16.5601 35.5794 16.2692 35.5794 17.8099C35.5794 18.6072 34.8905 19.1998 33.8212 19.1998C33.0771 19.1998 32.559 18.925 32.2834 18.7419C32.0685 18.6126 32.0464 18.4186 32.1842 18.2247ZM36.2519 13.1715C36.2519 12.9345 36.3897 12.7998 36.6322 12.7998H37.018C37.2716 12.7998 37.3983 12.9291 37.3983 13.1715V14.9978C37.3983 15.2186 37.3708 15.3749 37.3708 15.3749H37.3873C37.6133 14.9439 38.192 14.4644 38.9912 14.4644C40.0162 14.4644 40.6006 14.987 40.6006 16.183V18.715C40.6006 18.9628 40.463 19.0867 40.2202 19.0867H39.829C39.5754 19.0867 39.4487 18.9628 39.4487 18.715V16.4146C39.4487 15.8651 39.3054 15.4934 38.7266 15.4934C37.9219 15.4934 37.3928 16.1345 37.3928 16.991V18.715C37.3928 18.9628 37.266 19.0867 37.0125 19.0867H36.6267C36.3842 19.0867 36.2464 18.9628 36.2464 18.715V13.1715H36.2519ZM41.8354 13.8826C41.9398 13.8826 42.0006 13.818 42.0006 13.7102C42.0006 13.6079 41.9398 13.5486 41.8354 13.5486H41.6698V13.8826H41.8354ZM41.477 13.4948C41.477 13.4355 41.5046 13.4086 41.565 13.4086H41.8738C42.0666 13.4086 42.199 13.5271 42.199 13.7156C42.199 13.8718 42.0942 13.9634 42.0118 13.985V13.9904C42.0118 13.9904 42.0226 14.0012 42.0502 14.0442L42.1934 14.3136C42.2266 14.3729 42.2046 14.416 42.1438 14.416H42.111C42.0614 14.416 42.0282 14.3998 42.0062 14.3513L41.8462 14.0227H41.6754V14.3298C41.6754 14.3836 41.6478 14.416 41.5926 14.416H41.565C41.5046 14.416 41.4826 14.389 41.4826 14.3298V13.4948H41.477ZM41.813 14.7122C42.2598 14.7122 42.5958 14.3621 42.5958 13.915C42.5958 13.4678 42.2542 13.1176 41.813 13.1176C41.3778 13.1176 41.0414 13.4678 41.0414 13.915C41.0362 14.3621 41.3778 14.7122 41.813 14.7122ZM41.813 12.9345C42.3642 12.9345 42.7998 13.3708 42.7998 13.915C42.7942 14.459 42.359 14.89 41.813 14.89C41.273 14.89 40.8378 14.4537 40.8378 13.9096C40.8378 13.3708 41.273 12.9345 41.813 12.9345Z"
+          fill="#4D4D4F"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.38525 21.0546C10.6351 22.1307 13.4118 21.5981 15.0893 19.5994C17.0776 17.2303 16.7688 13.6986 14.3995 11.7109L12.8245 13.5876C14.6755 15.1405 14.9167 17.8997 13.3634 19.7505C12.1248 21.2263 10.0855 21.719 8.38525 21.0546Z"
+          fill="url(#paint0_linear_5382_46851)"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.38525 21.0547C10.6351 22.1307 13.4118 21.5982 15.0893 19.5995C15.2948 19.3547 15.4756 19.0974 15.6323 18.8308C15.8972 17.1846 15.3146 15.4447 13.9442 14.295C13.5961 14.0029 13.2192 13.7676 12.8247 13.5879C14.6755 15.1407 14.9167 17.8998 13.3634 19.7505C12.1248 21.2263 10.0855 21.7191 8.38525 21.0547Z"
+          fill="url(#paint1_linear_5382_46851)"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M13.2149 10.9452C10.965 9.86917 8.18827 10.4017 6.51079 12.4005C4.52251 14.7695 4.83131 18.3013 7.20055 20.2889L8.77559 18.4122C6.92463 16.8594 6.68339 14.1002 8.23671 12.2494C9.47531 10.7736 11.5146 10.2808 13.2149 10.9452Z"
+          fill="url(#paint2_linear_5382_46851)"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M13.2146 10.9452C10.9648 9.86917 8.18804 10.4017 6.51056 12.4004C6.30512 12.6452 6.12428 12.9024 5.9676 13.169C5.70272 14.8152 6.28528 16.5552 7.65568 17.7049C8.00384 17.997 8.38076 18.2323 8.77512 18.412C6.9244 16.8591 6.6832 14.1001 8.23648 12.2494C9.47508 10.7736 11.5143 10.2808 13.2146 10.9452Z"
+          fill="url(#paint3_linear_5382_46851)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_5382_46851"
+          x1="12.6109"
+          y1="18.7386"
+          x2="10.2315"
+          y2="13.9987"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#EF3220" />
+          <stop offset="1" stop-color="#FCD205" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_5382_46851"
+          x1="14.5468"
+          y1="14.6636"
+          x2="10.3757"
+          y2="21.8844"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FCD205" />
+          <stop offset="0.263921" stop-color="#F47216" />
+          <stop offset="0.560797" stop-color="#B31A93" />
+          <stop offset="1" stop-color="#2743A0" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_5382_46851"
+          x1="9.03527"
+          y1="13.381"
+          x2="11.3158"
+          y2="18.0191"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#7FD3B9" />
+          <stop offset="0.265705" stop-color="#66CDE1" />
+          <stop offset="0.554471" stop-color="#6D8ED1" />
+          <stop offset="1" stop-color="#2743A0" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_5382_46851"
+          x1="7.07996"
+          y1="17.3035"
+          x2="11.2185"
+          y2="10.1074"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#1E5CB2" />
+          <stop offset="0.246658" stop-color="#4DC4CE" />
+          <stop offset="0.564821" stop-color="#66C657" />
+          <stop offset="1" stop-color="#FCD205" />
+        </linearGradient>
+        <clipPath id="clip0_5382_46851">
+          <rect width="48" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/packages/design-system/lib/components/Payment/Icons/VippsIcon.tsx b/packages/design-system/lib/components/Payment/Icons/VippsIcon.tsx
new file mode 100644
index 000000000..840873a2e
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/VippsIcon.tsx
@@ -0,0 +1,54 @@
+import { PaymentIconProps } from './IconProps'
+
+export const VippsIcon = (props: PaymentIconProps) => {
+  return (
+    <svg
+      width="48"
+      height="32"
+      viewBox="0 0 48 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_5382_46850)">
+        <path
+          d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+          fill="white"
+        />
+        <rect
+          x="0.5"
+          y="0.5"
+          width="47"
+          height="31"
+          rx="2.5"
+          stroke="#E9E8E7"
+        />
+        <path
+          d="M6.90907 12L8.53179 16.0452L10.1227 12H12L9.20003 18H7.80002L5 12H6.90907Z"
+          fill="#FF5B24"
+        />
+        <path
+          d="M16.1872 17.4091C17.3542 17.4091 18.0166 16.7728 18.6475 15.8536C18.9944 15.3586 19.436 15.2526 19.7515 15.5354C20.0669 15.8182 20.0984 16.3485 19.7515 16.8435C18.8367 18.1869 17.6696 19 16.1872 19C14.5785 19 13.1591 18.0101 12.1813 16.2778C11.8974 15.8182 11.9605 15.3232 12.2759 15.0758C12.5913 14.8283 13.0645 14.9343 13.3483 15.4293C14.0423 16.596 14.9886 17.4091 16.1872 17.4091ZM18.3636 13.0606C18.3636 13.697 17.922 14.1212 17.4173 14.1212C16.9126 14.1212 16.4711 13.697 16.4711 13.0606C16.4711 12.4242 16.9126 12 17.4173 12C17.922 12 18.3636 12.4596 18.3636 13.0606Z"
+          fill="#FF5B24"
+        />
+        <path
+          d="M22.75 12.1777V13.0658C23.2273 12.4441 23.9591 12 25.041 12C26.4091 12 28 13.0658 28 15.3454C28 17.7434 26.4727 18.898 24.8818 18.898C24.0546 18.898 23.2909 18.602 22.7182 17.8619V21H21V12.1777H22.75ZM22.75 15.4342C22.75 16.7665 23.5773 17.477 24.5001 17.477C25.3909 17.477 26.2818 16.8257 26.2818 15.4342C26.2818 14.0724 25.3909 13.4211 24.5001 13.4211C23.6091 13.4211 22.75 14.0428 22.75 15.4342Z"
+          fill="#FF5B24"
+        />
+        <path
+          d="M30.75 12.1777V13.0658C31.2273 12.4441 31.9591 12 33.041 12C34.4091 12 36 13.0658 36 15.3454C36 17.7434 34.4727 18.898 32.8818 18.898C32.0546 18.898 31.2909 18.602 30.7182 17.8619V21H29V12.1777H30.75ZM30.75 15.4342C30.75 16.7665 31.5773 17.477 32.5001 17.477C33.3909 17.477 34.2818 16.8257 34.2818 15.4342C34.2818 14.0724 33.3909 13.4211 32.5001 13.4211C31.5773 13.4211 30.75 14.0428 30.75 15.4342Z"
+          fill="#FF5B24"
+        />
+        <path
+          d="M39.0164 12C40.4919 12 41.5411 12.6309 42 14.1932L40.3937 14.4335C40.3606 13.6524 39.836 13.382 39.0492 13.382C38.459 13.382 38 13.6223 38 14.0129C38 14.3133 38.2295 14.6138 38.9181 14.7339L40.1314 14.9442C41.3114 15.1545 41.9674 15.8755 41.9674 16.837C41.9674 18.279 40.5572 19 39.2131 19C37.8033 19 36.2295 18.3391 36 16.7168L37.6066 16.4764C37.7049 17.3176 38.2623 17.6181 39.1803 17.6181C39.8691 17.6181 40.328 17.3777 40.328 16.9872C40.328 16.6267 40.0983 16.3562 39.3443 16.2361L38.2295 16.0558C37.0492 15.8455 36.3279 15.0944 36.3279 14.1331C36.3607 12.6309 37.8361 12 39.0164 12Z"
+          fill="#FF5B24"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5382_46850">
+          <rect width="48" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/packages/design-system/lib/components/Payment/Icons/VisaIcon.tsx b/packages/design-system/lib/components/Payment/Icons/VisaIcon.tsx
new file mode 100644
index 000000000..e0d74ca48
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/Icons/VisaIcon.tsx
@@ -0,0 +1,55 @@
+import { PaymentIconProps } from './IconProps'
+
+export const VisaIcon = (props: PaymentIconProps) => (
+  <svg
+    width="48"
+    height="32"
+    viewBox="0 0 48 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_5382_46849)">
+      <path
+        d="M46.4 0H1.6C0.716344 0 0 0.716344 0 1.6V30.4C0 31.2837 0.716344 32 1.6 32H46.4C47.2837 32 48 31.2837 48 30.4V1.6C48 0.716344 47.2837 0 46.4 0Z"
+        fill="white"
+      />
+      <rect x="0.5" y="0.5" width="47" height="31" rx="2.5" stroke="#E9E8E7" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M34.6666 17.9752L36.1294 14.0252L36.9523 17.9752H34.6666ZM40.3807 21.1352L38.3234 10.8652H35.4952C34.5409 10.8652 34.3088 11.6306 34.3088 11.6306L30.4761 21.1352H33.1546L33.6907 19.61H36.9578L37.2591 21.1352H40.3807Z"
+        fill="#182E66"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M30.8747 13.4287L31.2382 11.2978C31.2382 11.2978 30.1159 10.8652 28.946 10.8652C27.6813 10.8652 24.6783 11.4258 24.6783 14.1498C24.6783 16.7132 28.2029 16.7451 28.2029 18.0909C28.2029 19.4367 25.0415 19.1963 23.9983 18.3473L23.6191 20.5747C23.6191 20.5747 24.7569 21.1352 26.496 21.1352C28.2349 21.1352 30.8588 20.222 30.8588 17.7384C30.8588 15.1588 27.3022 14.9186 27.3022 13.7971C27.3022 12.6755 29.7842 12.8196 30.8747 13.4287Z"
+        fill="#182E66"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M21.8609 21.1352H19.0479L20.806 10.8652H23.6193L21.8609 21.1352Z"
+        fill="#182E66"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.9246 10.8652L14.3688 17.9288L14.0666 16.4076L14.0669 16.4082L13.1647 11.7902C13.1647 11.7902 13.0559 10.8652 11.8931 10.8652H7.66846L7.61914 11.0389C7.61914 11.0389 8.91138 11.307 10.4229 12.2133L12.7518 21.1352H15.5448L19.8096 10.8652H16.9246Z"
+        fill="#182E66"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M13.7144 16.3952L12.8615 11.788C12.8615 11.788 12.7586 10.8652 11.6594 10.8652H7.66574L7.61914 11.0384C7.61914 11.0384 9.53878 11.4575 11.3803 13.0263C13.1403 14.526 13.7144 16.3952 13.7144 16.3952Z"
+        fill="#182E66"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5382_46849">
+        <rect width="48" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
diff --git a/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx b/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx
new file mode 100644
index 000000000..5a06d407d
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { PaymentMethodIcon } from './PaymentMethodIcon'
+import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import { Typography } from '../Typography'
+import { expect } from 'storybook/test'
+
+const methods = Object.values(PaymentMethodEnum).toSorted()
+
+const meta: Meta<typeof PaymentMethodIcon> = {
+  title: 'Components/Payment/PaymentMethodIcon',
+  component: PaymentMethodIcon,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    paymentMethod: {
+      control: { type: 'select' },
+      options: methods,
+      description: 'Payment method to display',
+    },
+    alt: {
+      control: { type: 'text' },
+      description: 'Alt text for the icon',
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof PaymentMethodIcon>
+
+export const Playground: Story = {
+  args: {
+    paymentMethod: PaymentMethodEnum.visa,
+    alt: 'Visa payment method',
+  },
+  play: async ({ canvas, args }) => {
+    const img = await canvas.findByRole('img')
+
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('alt', args.alt)
+  },
+}
+
+export const All: Story = {
+  parameters: {
+    layout: 'padded',
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))',
+        gap: 16,
+      }}
+    >
+      {methods.map((m) => (
+        <div
+          key={m}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 12,
+            padding: 8,
+            borderRadius: 8,
+          }}
+        >
+          <PaymentMethodIcon {...args} paymentMethod={m} />
+          <Typography variant={'Label/xsRegular'}>
+            <p>{m}</p>
+          </Typography>
+        </div>
+      ))}
+    </div>
+  ),
+  args: {
+    paymentMethod: PaymentMethodEnum.visa,
+  },
+}
diff --git a/packages/design-system/lib/components/Payment/PaymentMethodIcon.tsx b/packages/design-system/lib/components/Payment/PaymentMethodIcon.tsx
new file mode 100644
index 000000000..d4285463b
--- /dev/null
+++ b/packages/design-system/lib/components/Payment/PaymentMethodIcon.tsx
@@ -0,0 +1,61 @@
+import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
+import { GenericCardIcon } from './Icons/GenericCardIcon'
+import { SwishIcon } from './Icons/SwishIcon'
+import { VippsIcon } from './Icons/VippsIcon'
+import { MobilePayIcon } from './Icons/MobilePayIcon'
+import { ApplePayIcon } from './Icons/ApplePayIcon'
+import { GooglePayIcon } from './Icons/GooglePayIcon'
+import { PayPalIcon } from './Icons/PayPalIcon'
+import { KlarnaIcon } from './Icons/KlarnaIcon'
+import { AmericanExpressIcon } from './Icons/AmericanExpressIcon'
+import { DanKortIcon } from './Icons/DanKortIcon'
+import { DinersClubIcon } from './Icons/DinersClubIcon'
+import { JcbIcon } from './Icons/JcbIcon'
+import { MasterCardIcon } from './Icons/MasterCardIcon'
+import { VisaIcon } from './Icons/VisaIcon'
+import { MaestroIcon } from './Icons/MaestroIcon'
+import { ChinaUnionPayIcon } from './Icons/ChinaUnionPayIcon'
+import { DiscoverIcon } from './Icons/DiscoverIcon'
+import { PaymentIconProps } from './Icons/IconProps'
+
+const paymentMethods: Partial<
+  Record<
+    keyof typeof PaymentMethodEnum,
+    (props: PaymentIconProps) => React.ReactNode
+  >
+> = {
+  swish: (props) => <SwishIcon {...props} />,
+  vipps: (props) => <VippsIcon {...props} />,
+  mobilePay: (props) => <MobilePayIcon {...props} />,
+  applePay: (props) => <ApplePayIcon {...props} />,
+  googlePay: (props) => <GooglePayIcon {...props} />,
+  payPal: (props) => <PayPalIcon {...props} />,
+  klarna: (props) => <KlarnaIcon {...props} />,
+  americanExpress: (props) => <AmericanExpressIcon {...props} />,
+  dankort: (props) => <DanKortIcon {...props} />,
+  dinersClub: (props) => <DinersClubIcon {...props} />,
+  jcb: (props) => <JcbIcon {...props} />,
+  masterCard: (props) => <MasterCardIcon {...props} />,
+  visa: (props) => <VisaIcon {...props} />,
+  maestro: (props) => <MaestroIcon {...props} />,
+  chinaUnionPay: (props) => <ChinaUnionPayIcon {...props} />,
+  discover: (props) => <DiscoverIcon {...props} />,
+}
+
+type PaymentMethodIconProps = {
+  paymentMethod: PaymentMethodEnum
+  className?: string
+  alt?: string
+}
+export const PaymentMethodIcon = ({
+  paymentMethod,
+  ...props
+}: PaymentMethodIconProps) => {
+  const Icon = paymentMethods[paymentMethod]
+
+  if (!Icon) {
+    return <GenericCardIcon {...props} role="img" />
+  }
+
+  return <Icon {...props} role="img" />
+}
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index a48c84793..654476fb3 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -30,15 +30,18 @@
     "./Form/Country": "./lib/components/Form/Country/index.tsx",
     "./Form/Date": "./lib/components/Form/Date/index.tsx",
     "./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
+    "./Form/PaymentOption": "./lib/components/Form/PaymentOption/PaymentOption.tsx",
+    "./Form/PaymentOptionsGroup": "./lib/components/Form/PaymentOption/PaymentOptionsGroup.tsx",
     "./Form/Phone": "./lib/components/Form/Phone/index.tsx",
     "./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
+    "./Form/SelectPaymentMethod": "./lib/components/Form/SelectPaymentMethod/index.tsx",
     "./Form/TextArea": "./lib/components/Form/TextArea/index.tsx",
-    "./HotelInfoCard": "./lib/components/HotelInfoCard/index.tsx",
     "./HotelCard": "./lib/components/HotelCard/index.tsx",
     "./HotelCard/HotelCardDialogImage": "./lib/components/HotelCard/HotelCardDialogImage/index.tsx",
+    "./HotelCard/HotelCardSkeleton": "./lib/components/HotelCard/HotelCardSkeleton.tsx",
     "./HotelCard/HotelPointsRow": "./lib/components/HotelCard/HotelPointsRow/index.tsx",
     "./HotelCard/NoPriceAvailableCard": "./lib/components/HotelCard/NoPriceAvailableCard/index.tsx",
-    "./HotelCard/HotelCardSkeleton": "./lib/components/HotelCard/HotelCardSkeleton.tsx",
+    "./HotelInfoCard": "./lib/components/HotelInfoCard/index.tsx",
     "./IconButton": "./lib/components/IconButton/index.tsx",
     "./IconChip": "./lib/components/IconChip/index.tsx",
     "./Icons": "./lib/components/Icons/index.tsx",
@@ -129,6 +132,7 @@
     "./ImageFallback": "./lib/components/ImageFallback/index.tsx",
     "./ImageGallery": "./lib/components/ImageGallery/index.tsx",
     "./Input": "./lib/components/Input/index.tsx",
+    "./JsonToHtml": "./lib/components/JsonToHtml/JsonToHtml.tsx",
     "./Label": "./lib/components/Label/index.tsx",
     "./Lightbox": "./lib/components/Lightbox/index.tsx",
     "./Link": "./lib/components/Link/index.tsx",
@@ -145,25 +149,25 @@
     "./OldDSButton": "./lib/components/OldDSButton/index.tsx",
     "./OpeningHours": "./lib/components/OpeningHours/index.tsx",
     "./ParkingInformation": "./lib/components/ParkingInformation/index.tsx",
+    "./Payment/PaymentMethodIcon": "./lib/components/Payment/PaymentMethodIcon.tsx",
     "./PointsRateCard": "./lib/components/RateCard/Points/index.tsx",
     "./Preamble": "./lib/components/Preamble/index.tsx",
     "./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
     "./Select": "./lib/components/Select/index.tsx",
     "./SidePeek": "./lib/components/SidePeek/index.tsx",
-    "./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled/index.tsx",
     "./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
+    "./SidePeekSelfControlled": "./lib/components/SidePeek/SelfControlled/index.tsx",
     "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
     "./StaticMap": "./lib/components/StaticMap/index.tsx",
     "./Subtitle": "./lib/components/Subtitle/index.tsx",
     "./Switch": "./lib/components/Switch/index.tsx",
     "./Table": "./lib/components/Table/index.tsx",
     "./Title": "./lib/components/Title/index.tsx",
-    "./Tooltip": "./lib/components/Tooltip/index.tsx",
     "./Toast": "./lib/components/Toasts/index.tsx",
     "./ToastHandler": "./lib/components/Toasts/ToastHandler.tsx",
+    "./Tooltip": "./lib/components/Tooltip/index.tsx",
     "./TripAdvisorChip": "./lib/components/TripAdvisorChip/index.tsx",
     "./Typography": "./lib/components/Typography/index.tsx",
-    "./JsonToHtml": "./lib/components/JsonToHtml/JsonToHtml.tsx",
     "./base.css": "./lib/base.css",
     "./design-system-new-deprecated.css": "./lib/design-system-new-deprecated.css",
     "./downtown-camper.css": "./lib/styles/downtown-camper.css",