diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx
index c040f909112..500ed8952d3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/payment-card/Examples.tsx
@@ -6,8 +6,8 @@
 import React from 'react'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import PaymentCard, {
-  getCardData,
-  Designs,
+  getCardDesign,
+  CustomCard,
   // ProductType,
   // CardType,
   // BankAxeptType,
@@ -17,7 +17,7 @@ import { H4 } from '@dnb/eufemia/src'
 export function PaymentCardAllCardsExample() {
   return (
     <ComponentBox
-      scope={{ PaymentCard, getCardData }}
+      scope={{ PaymentCard, getCardDesign }}
       data-visual-test="all-cards"
     >
       {() => {
@@ -70,15 +70,15 @@ export function PaymentCardAllCardsExample() {
         const Cards = () => (
           <>
             {demoCards.map((product_code) => {
-              const cardData = getCardData(product_code)
+              const cardData = getCardDesign(product_code)
               return (
                 <article key={product_code}>
                   <H4>
-                    {cardData.cardDesign.name}({product_code})
+                    {cardData.displayName}({product_code})
                   </H4>
                   <PaymentCard
-                    product_code={product_code}
-                    card_number="************1337"
+                    productCode={product_code}
+                    cardNumber="************1337"
                   />
                 </article>
               )
@@ -105,25 +105,23 @@ export const PaymentCardCustomExample = () => (
   <ComponentBox
     scope={{
       PaymentCard,
-      Designs,
+      // Designs,
       //   ProductType, CardType, BankAxeptType
     }}
   >
     {() => {
-      const customData = {
-        productCode: '',
-        productName: 'DNB Custom Card',
-        displayName: 'Custom card',
-        cardDesign: Designs.gold,
-        cardType: 'VisaColored',
-        productType: 'None',
-        bankAxept: 'BankAxeptWhite',
+      const customData: CustomCard = {
+        displayName: 'custom card',
+        bankLogo: { type: 'DNB' },
+        cardProvider: { type: 'Mastercard' },
+        paymentType: { type: 'BankAxept' },
+        background: 'gold',
       }
       return (
         <PaymentCard
-          product_code=""
-          raw_data={customData}
-          card_number="************1337"
+          productCode=""
+          customCard={customData}
+          cardNumber="************1337"
         />
       )
     }}
@@ -136,9 +134,9 @@ export const PaymentCardStatusExample = () => (
     data-visual-test="payment-card-status"
   >
     <PaymentCard
-      product_code="VG2"
-      card_status="blocked"
-      card_number="************1337"
+      productCode="VG2"
+      cardStatus="blocked"
+      cardNumber="************1337"
     />
   </ComponentBox>
 )
@@ -150,8 +148,8 @@ export const PaymentCardCompactExample = () => (
   >
     <PaymentCard
       variant="compact"
-      product_code="VG1"
-      card_number="************1337"
+      productCode="VG1"
+      cardNumber="************1337"
     />
   </ComponentBox>
 )
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx
index b57dc7a802b..30f5447372f 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx
+++ b/packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.tsx
@@ -2,9 +2,9 @@ import classnames from 'classnames'
 import {
   BankLogo,
   ProductLogo,
-  BankAxeptLogo,
   StatusIcon,
   CardProviderLogo,
+  PaymentTypeLogo,
 } from './icons'
 import Context from '../../shared/Context'
 import {
@@ -19,24 +19,19 @@ import {
 import { useContext } from 'react'
 import { createSpacingClasses } from '../../components/space/SpacingUtils'
 import cardProducts from './utils/cardProducts'
-import { defaultDesign } from './utils/CardDesigns'
 import {
+  CustomCard,
   PaymentCardCardStatus,
   PaymentCardProps,
-  PaymentCardRawData,
 } from './types'
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'
+import { defaultDesign } from './utils/CardDesigns'
 
-const defaultCard: (productCode: string) => PaymentCardRawData = (
+const defaultCard: (productCode: string) => CustomCard = (
   productCode
 ) => ({
   productCode,
-  productName: '',
-  displayName: '',
-  cardDesign: defaultDesign,
-  cardType: 'None',
-  productType: 'None',
-  bankAxept: 'None',
+  ...defaultDesign,
 })
 
 const defaultProps = {
@@ -46,7 +41,9 @@ const defaultProps = {
   variant: 'normal',
 
   id: null,
-  rawData: null,
+
+  customCard: null,
+  // rawData: null,
 
   skeleton: false,
   className: null,
@@ -75,7 +72,8 @@ export default function PaymentCard(props: PaymentCardProps) {
     variant,
     digits,
     id,
-    rawData,
+    customCard: cardDesignProp,
+    // rawData,
     // locale,
     skeleton,
     className,
@@ -91,7 +89,12 @@ export default function PaymentCard(props: PaymentCardProps) {
     }
   )
 
-  const cardData: PaymentCardRawData = rawData || getCardData(productCode)
+  const cardDesign = {
+    ...getCardDesign(productCode),
+    ...cardDesignProp,
+  }
+
+  // const cardData: CustomCard = rawData || getCardData(productCode)
 
   const params = {
     className: classnames(
@@ -122,34 +125,29 @@ export default function PaymentCard(props: PaymentCardProps) {
   return (
     <figure {...params}>
       <figcaption className="dnb-sr-only dnb-payment-card__figcaption">
-        {cardData.productName}
+        {cardDesign.displayName}
       </figcaption>
       <div
         id={id}
         className={classnames(
           'dnb-payment-card__card',
-          `dnb-payment-card__${cardData.cardDesign.cardStyle}`
+          `dnb-payment-card__${cardDesign.cardClassName}` // kan denne overskrives?
         )}
-        {...(cardData.cardDesign.backgroundImage
+        {...(cardDesign.backgroundImage
           ? {
               style: {
-                backgroundImage: `url(${cardData.cardDesign.backgroundImage})`,
+                backgroundImage: `url(${cardDesign.backgroundImage})`,
               },
             }
           : {})}
       >
         <div className="dnb-payment-card__card__content">
           <div className="dnb-payment-card__card__top">
-            <BankLogo
-              logoType={cardData.cardDesign.bankLogo}
-              color={cardData.cardDesign.bankLogoColors}
-            />
-            <ProductLogo
-              productType={cardData.productType}
-              cardDesign={cardData.cardDesign.cardDesign}
-            />
-
-            <BankAxeptLogo bankAxept={cardData.bankAxept} />
+            <BankLogo {...cardDesign.bankLogo} />
+
+            <ProductLogo {...cardDesign.productType} />
+
+            <PaymentTypeLogo {...cardDesign.paymentType} />
           </div>
           <div className="dnb-payment-card__card__bottom">
             <span
@@ -168,10 +166,7 @@ export default function PaymentCard(props: PaymentCardProps) {
                 {formatCardNumber(cardNumber, digits)}
               </P>
             </span>
-            <CardProviderLogo
-              cardTypeDesign={cardData.cardType}
-              color={cardData.cardDesign.visaColors}
-            />
+            <CardProviderLogo {...cardDesign.cardProvider} />
           </div>
         </div>
 
@@ -216,11 +211,18 @@ export function formatCardNumber(cardNumber, digits = 8) {
   return cardNumber.replace(formatCardNumberRegex, ' ').trim()
 }
 
-export const getCardData: (productCode: string) => PaymentCardRawData = (
-  productCode
-) => {
-  const card = cardProducts.find(
-    (item) => item.productCode === productCode
+export function getCardDesign(productCode: string): CustomCard {
+  return (
+    cardProducts.find((item) => item.productCode === productCode) ||
+    defaultCard(productCode)
   )
-  return card || defaultCard(productCode)
 }
+
+// export const getCardData: (productCode: string) => PaymentCardRawData = (
+//   productCode
+// ) => {
+//   const card = cardProducts.find(
+//     (item) => item.productCode === productCode
+//   )
+//   return card || defaultCard(productCode)
+// }
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx
index 3848b4829b3..3946a83f46b 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx
+++ b/packages/dnb-eufemia/src/extensions/payment-card/icons/index.tsx
@@ -29,20 +29,22 @@ import {
   BankAxeptType,
   CardStatus,
   CardTypeDesign,
+  PaymentType,
+  CardProvider,
+  BankLogoType,
 } from '../types'
 
 type BankLogoProps = {
-  logoType?: LogoType
+  type?: BankLogoType
   color?: string
-  height?: string
 }
 
-function BankLogo({ logoType, color, height }: BankLogoProps) {
-  switch (logoType) {
+function BankLogo({ type, color }: BankLogoProps) {
+  switch (type) {
     case 'DNB':
       return (
         <DNB
-          height={height}
+          // height={height}
           fill={color}
           className="dnb-payment-card__card__bank-logo"
         />
@@ -51,33 +53,29 @@ function BankLogo({ logoType, color, height }: BankLogoProps) {
     case 'sbanken':
       return (
         <Sbanken
-          height={height}
+          // height={height}
           fill={color}
           className="dnb-payment-card__card__bank-logo"
         />
       )
+    default:
+      return null
   }
 }
 
 type ProductLogoProps = {
-  productType: ProductType
-  cardDesign: CardDesign
+  type?: ProductType
+  // color?: string
 }
 
-function ProductLogo({ productType, cardDesign }: ProductLogoProps) {
+function ProductLogo({ type }: ProductLogoProps) {
   const classname = 'dnb-payment-card__card__product-type'
 
-  switch (productType) {
-    case 'Saga':
-      switch (cardDesign) {
-        case 'SagaGold':
-          return <SagaGold className={classname} />
-        case 'SagaPlatinum':
-          return <SagaPlatinum className={classname} />
-        case 'None':
-        default:
-          return null
-      }
+  switch (type) {
+    case 'SagaGold':
+      return <SagaGold className={classname} />
+    case 'SagaPlatinum':
+      return <SagaPlatinum className={classname} />
     case 'Pluss':
       return <Pluss className={classname} />
     case 'Intro':
@@ -87,38 +85,30 @@ function ProductLogo({ productType, cardDesign }: ProductLogoProps) {
     case 'Bedrift':
       return <Bedrift className={classname} />
     case 'PrivateBanking':
-      return cardDesign !== 'None' ? <PB className={classname} /> : null
-    case 'None':
+      return <PB className={classname} />
     default:
       return null
   }
 }
 
-type BankAxeptProps = {
-  bankAxept: BankAxeptType
+type PaymentTypeProps = {
+  type: PaymentType
+  color: string
 }
 
-const BankAxeptLogo = ({ bankAxept }: BankAxeptProps) => {
-  const classname = 'dnb-payment-card__card__bank-axept'
-
-  switch (bankAxept) {
-    case 'BankAxeptWhite':
-      return <BankAxept className={classname} fill="#ffffff" />
-    case 'BankAxeptBlack20':
-      return <BankAxept className={classname} fill="#cccccc" />
-    case 'BankAxeptGray':
-      return <BankAxept className={classname} fill="#b2b4b3" />
-    case 'BankAxeptGrayDark':
-      return <BankAxept className={classname} fill="#55565A" />
-    case 'BankAxeptBlack':
-      return <BankAxept className={classname} fill="#333333" />
-    case 'BankAxeptGold':
-      return <BankAxept className={classname} fill="#BFA970" />
+const PaymentTypeLogo = ({ type, color }: PaymentTypeProps) => {
+  switch (type) {
+    case 'BankAxept':
+      return (
+        <BankAxept
+          className="dnb-payment-card__card__bank-axept"
+          fill={color}
+        />
+      )
     case 'Credit':
       return (
-        <Credit className="dnb-payment-card__card__credit" fill="#fff" />
+        <Credit className="dnb-payment-card__card__credit" fill={color} />
       )
-    case 'None':
     default:
       return null
   }
@@ -154,26 +144,43 @@ const StatusIcon = ({ status }: { status: CardStatus }) => {
 }
 
 const CardProviderLogo = ({
-  cardTypeDesign,
+  type,
   color,
 }: {
-  cardTypeDesign: CardTypeDesign
+  type: CardProvider
   color?: string
 }) => {
   const id = 'dnb-payment-card__card__credit-type'
 
-  switch (cardTypeDesign) {
-    case 'VisaColored':
-      return <VisaDefault className={id} fill={color} />
-    case 'VisaPlatinum':
-      return <VisaPlatinum className={id} />
-    case 'MastercardDefault':
+  switch (type) {
+    case 'Mastercard':
       return <MastercardDefault className={id} />
+
     case 'MastercardDark':
       return <MastercardDark className={id} />
-    case 'None':
+
+    case 'Visa':
+      return <VisaDefault className={id} fill={color} />
+
+    case 'VisaPlatinum':
+      return <VisaPlatinum className={id} fill={color} />
+
+    default:
       return null
   }
+
+  // switch (cardTypeDesign) {
+  //   case 'VisaColored':
+  //     return <VisaDefault className={id} fill={color} />
+  //   case 'VisaPlatinum':
+  //     return <VisaPlatinum className={id} />
+  //   case 'MastercardDefault':
+  //     return <MastercardDefault className={id} />
+  //   case 'MastercardDark':
+  //     return <MastercardDark className={id} />
+  //   case 'None':
+  //     return null
+  // }
 }
 
 export {
@@ -181,5 +188,5 @@ export {
   ProductLogo,
   StatusIcon,
   CardProviderLogo,
-  BankAxeptLogo,
+  PaymentTypeLogo,
 }
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx b/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx
index cf2add9aea9..24b3608fedd 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/payment-card/stories/PaymentCard.stories.tsx
@@ -16,7 +16,7 @@ import cardData from '../utils/cardProducts'
 import { PaymentCardRawData } from '../types'
 import { H2 } from '../../../elements'
 
-import PaymentCard, { getCardData, Designs } from '../'
+import PaymentCard, { getCardDesign, Designs } from '../'
 
 export default {
   title: 'Eufemia/Extensions/PaymentCard',
@@ -26,16 +26,16 @@ const CustomWrapper = styled(Wrapper)`
   /* empty */
 `
 
-const customData: PaymentCardRawData = {
-  productCode: 'UNDEFINED',
-  productName: 'DNB Custom Card',
-  displayName: 'Custom card', // Only showed in compact variant
-  // cardDesign: 'gold',
-  cardDesign: Designs.gold,
-  cardType: 'MastercardDefault',
-  productType: 'Saga',
-  bankAxept: 'BankAxeptWhite',
-}
+// const customData: PaymentCardRawData = {
+//   productCode: 'UNDEFINED',
+//   productName: 'DNB Custom Card',
+//   displayName: 'Custom card', // Only showed in compact variant
+//   // cardDesign: 'gold',
+//   cardDesign: Designs.gold,
+//   cardType: 'MastercardDefault',
+//   productType: 'Saga',
+//   bankAxept: 'BankAxeptWhite',
+// }
 
 export const PaymentCards = () => (
   <CustomWrapper className="dnb-spacing">
@@ -43,7 +43,7 @@ export const PaymentCards = () => (
       <H3>Test</H3>
 
       <PaymentCard
-        rawData={customData}
+        // rawData={customData}
         productCode=""
         cardNumber={'123123123123'}
       />
@@ -96,22 +96,22 @@ export const PaymentCards = () => (
       <PaymentCard
         productCode={undefined}
         cardNumber={'123123123'}
-        rawData={{
-          productCode: 'string',
-          productName: 'string',
-          displayName: '',
-          cardDesign: {
-            cardStyle: '',
-            bankLogo: 'DNB',
-            bankLogoColors: 'red',
-            cardDesign: 'None',
-            backgroundImage: '',
-            visaColors: '',
-          },
-          cardType: 'VisaColored',
-          productType: 'None',
-          bankAxept: 'BankAxeptBlack',
-        }}
+        // rawData={{
+        //   productCode: 'string',
+        //   productName: 'string',
+        //   displayName: '',
+        //   cardDesign: {
+        //     cardStyle: '',
+        //     bankLogo: 'DNB',
+        //     bankLogoColors: 'red',
+        //     cardDesign: 'None',
+        //     backgroundImage: '',
+        //     visaColors: '',
+        //   },
+        //   cardType: 'VisaColored',
+        //   productType: 'None',
+        //   bankAxept: 'BankAxeptBlack',
+        // }}
         skeleton
       />
     </Box>
@@ -120,11 +120,11 @@ export const PaymentCards = () => (
       <H2>All Cards</H2>
 
       {cards.map((productCode) => {
-        const cardData = getCardData(productCode)
+        const cardData = getCardDesign(productCode)
         return (
           <div key={productCode}>
             <H3>
-              {cardData.cardDesign.name}({productCode})
+              {cardData.displayName}({productCode})
             </H3>
             <div
               key={productCode}
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/types.ts b/packages/dnb-eufemia/src/extensions/payment-card/types.ts
index 6a73ad4357f..42bf95546c4 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/types.ts
+++ b/packages/dnb-eufemia/src/extensions/payment-card/types.ts
@@ -24,7 +24,8 @@ export type PaymentCardProps = {
   /**
    * Useful if you want to create custom cards. See Card data properties.
    */
-  rawData?: PaymentCardRawData
+  customCard?: CustomCard
+  // rawData?: PaymentCardRawData
   id?: string
   /**
    * Use `nb-NO` or `en-GB`. Defaults to the Eufemia provider.
@@ -48,8 +49,8 @@ type DeprecatedPaymentCardProps = {
   card_number?: string
   /** @deprecated use `cardStatus` */
   card_status?: PaymentCardCardStatus
-  /** @deprecated use `rawData` */
-  raw_data?: PaymentCardRawData
+  // /** @deprecated use `rawData` */
+  // raw_data?: PaymentCardRawData
 }
 
 type PaymentCardTranslations = {
@@ -63,48 +64,6 @@ type PaymentCardTranslations = {
   text_unknown?: string
 }
 
-// Testing new structure
-type PaymentCardData = {
-  productCode: string
-  productName: string
-  // cardDesign: CardDesignData // rename?
-  cardType?: CardTypeDesign
-  productType?: ProductType
-  paymentTypeVariant?: BankAxeptType
-  cardStyle?: string
-  bankLogo?: LogoType
-  bankLogoColor?: string
-  cardDesign?: CardDesign
-  backgroundImage?: string
-  visaColor?: string
-}
-
-export type PaymentCardRawData = {
-  productCode: string
-  productName: string
-  cardDesign: CardDesignData // rename?
-  cardType: CardTypeDesign
-  productType: ProductType
-  bankAxept: BankAxeptType // PaymentSystemVariant
-  // remove?
-  displayName: string // not used
-}
-
-export type CardDesignData = {
-  cardStyle?: string
-  bankLogo?: LogoType
-  bankLogoColors?: string
-  cardDesign?: CardDesign
-  backgroundImage?: string
-  visaColors?: string
-  // Remove?
-  name?: string
-  cardType?: CardTypeDesign
-  bankAxept?: BankAxeptType
-  cardStatus?: CardStatus
-  productType?: ProductType
-}
-
 export type PaymentCardCardStatus =
   | 'active'
   | 'blocked'
@@ -114,28 +73,113 @@ export type PaymentCardCardStatus =
   | 'renewed'
   | 'replaced'
   | 'unknown'
-export type PaymentCardVariant = 'normal' | 'compact'
 
-export type LogoType = 'DNB' | 'sbanken'
+// // Testing new structure
+// type PaymentCardData = {
+//   productCode: string
+//   productName: string
+//   // cardDesign: CardDesignData // rename?
+//   cardType?: CardTypeDesign
+//   productType?: ProductType
+//   paymentTypeVariant?: BankAxeptType
+//   cardStyle?: string
+//   bankLogo?: LogoType
+//   bankLogoColor?: string
+//   cardDesign?: CardDesign
+//   backgroundImage?: string
+//   visaColor?: string
+// }
+
+// export type CustomCard = {
+//   productCode?: string
+//   displayName?: string
+//   bankLogo?: 'sbanken' | 'DNB'
+//   cardClassName?: string // css class
+//   bankLogoColor?: string // default #ffff
+//   productType?: ProductType
+//   background?: string // default dnb green
+//   backgroundImage?: string
+//   cardProvider?: CardProvider
+//   cardProviderColor?: string
+//   paymentType?: PaymentType
+//   paymentTypeColor?:
+//     | 'white'
+//     | 'black20'
+//     | 'gray'
+//     | 'darkGray'
+//     | 'black'
+//     | 'gold'
+//     | string
+// }
+
+export type CustomCard = {
+  productCode?: string
+  displayName?: string
+  cardClassName?: string // css class
+  background?: string // default dnb green
+  backgroundImage?: string
+  bankLogo?: { type: BankLogoType; color?: string }
+  productType?: { type: ProductType; color?: string }
+  cardProvider?: { type: CardProvider; color?: string }
+  paymentType?: { type: PaymentType; color?: string }
+}
+
+type paymentTypeColor =
+  | 'white'
+  | 'black20'
+  | 'gray'
+  | 'darkGray'
+  | 'black'
+  | 'gold'
+  | string
+
+export type BankLogoType = 'sbanken' | 'DNB'
+
+export type CardProvider =
+  | 'Mastercard'
+  | 'MastercardDark'
+  | 'Visa'
+  | 'VisaPlatinum'
+
+export type PaymentType = 'BankAxept' | 'Credit'
+
 export type ProductType =
-  | 'Saga'
+  | 'SagaGold'
+  | 'SagaPlatinum'
   | 'Pluss'
   | 'Intro'
   | 'Business'
   | 'Bedrift'
   | 'PrivateBanking'
-  | 'None'
-export type CardDesign = 'SagaGold' | 'SagaPlatinum' | 'None' | 'PBDefault'
 
-export type BankAxeptType =
-  | 'BankAxeptWhite'
-  | 'BankAxeptBlack20'
-  | 'BankAxeptGray'
-  | 'BankAxeptGrayDark'
-  | 'BankAxeptBlack'
-  | 'BankAxeptGold'
-  | 'Credit'
-  | 'None'
+// export type PaymentCardRawData = {
+//   productCode: string
+//   productName: string
+//   cardDesign: CardDesignData // rename?
+//   cardType: CardTypeDesign
+//   productType: ProductType
+//   bankAxept: BankAxeptType // PaymentSystemVariant
+//   // remove?
+//   displayName: string // not used
+// }
+
+// export type CardDesignData = {
+//   cardStyle?: string
+//   bankLogo?: LogoType
+//   bankLogoColors?: string
+//   cardDesign?: CardDesign
+//   backgroundImage?: string
+//   visaColors?: string
+//   // Remove?
+//   name?: string
+//   cardType?: CardTypeDesign
+//   bankAxept?: BankAxeptType
+//   cardStatus?: CardStatus
+//   productType?: ProductType
+// }
+
+export type PaymentCardVariant = 'normal' | 'compact'
+// export type LogoType = 'DNB' | 'sbanken'
 
 export type CardStatus =
   | 'expired'
@@ -147,6 +191,16 @@ export type CardStatus =
   | 'unknown'
   | 'active'
 
+export type CardDesign = 'SagaGold' | 'SagaPlatinum' | 'None' | 'PBDefault'
+export type BankAxeptType =
+  | 'BankAxeptWhite'
+  | 'BankAxeptBlack20'
+  | 'BankAxeptGray'
+  | 'BankAxeptGrayDark'
+  | 'BankAxeptBlack'
+  | 'BankAxeptGold'
+  | 'Credit'
+  | 'None'
 export type CardTypeDesign =
   | 'VisaColored'
   | 'VisaPlatinum'
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts b/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts
index d9c5b68c10b..510faaa10bf 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts
+++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/CardDesigns.ts
@@ -1,183 +1,139 @@
 import properties from '../../../style/themes/theme-ui/properties'
-import { CardDesignData } from '../types'
+import { CustomCard } from '../types'
 import { myFirstImg, youthImg, ungImg } from './backgrounds'
 
-const defaultDesign: CardDesignData = {
-  name: 'Default',
-  cardStyle: 'card--design-default',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-white'],
-  cardType: 'VisaColored',
-  visaColors: properties['--color-white'],
-  bankAxept: 'BankAxeptWhite',
+export const defaultDesign: CustomCard = {
+  cardClassName: 'card--design-default',
+  bankLogo: { type: 'DNB', color: properties['--color-white'] },
+  cardProvider: { type: 'Visa', color: properties['--color-white'] },
+  paymentType: { type: 'BankAxept', color: properties['--color-white'] },
 }
 
-const pluss: CardDesignData = {
-  name: 'Pluss',
-  cardStyle: 'card--design-pluss',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-white'],
-  cardType: 'VisaColored',
-  visaColors: properties['--color-white'],
-  bankAxept: 'BankAxeptWhite',
+export const pluss: CustomCard = {
+  // name: 'Pluss',
+  cardClassName: 'card--design-pluss',
+  bankLogo: { type: 'DNB', color: properties['--color-white'] },
+  cardProvider: { type: 'Visa', color: properties['--color-white'] },
+  paymentType: { type: 'BankAxept', color: properties['--color-white'] },
 }
 
-const young: CardDesignData = {
-  name: 'Ung',
-  cardStyle: 'card--design-ung',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-sea-green'],
-  visaColors: properties['--color-black-80'],
-  cardType: 'MastercardDefault',
-  bankAxept: 'BankAxeptBlack',
-  productType: 'Saga',
+export const young: CustomCard = {
+  // name: 'Ung',
+  cardClassName: 'card--design-ung',
   backgroundImage: ungImg,
+  bankLogo: { type: 'DNB', color: properties['--color-sea-green'] },
+  cardProvider: { type: 'Mastercard' },
+  paymentType: {
+    type: 'BankAxept',
+    color: properties['--color-black-80'],
+  },
 }
 
-const myFirst: CardDesignData = {
-  name: 'My first',
-  cardStyle: 'card--design-my-first',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-ocean-green'],
-  cardType: 'VisaColored',
-  visaColors: properties['--color-black-80'],
-  bankAxept: 'BankAxeptBlack',
+export const myFirst: CustomCard = {
+  // name: 'My first',
+  cardClassName: 'card--design-my-first',
   backgroundImage: myFirstImg,
+  bankLogo: { type: 'DNB', color: properties['--color-ocean-green'] },
+  cardProvider: { type: 'Visa', color: properties['--color-black-80'] },
+  paymentType: {
+    type: 'BankAxept',
+    color: properties['--color-black-80'],
+  },
 }
 
-const youth: CardDesignData = {
-  name: 'Youth',
-  cardStyle: 'card--design-youth',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-sea-green'],
-  cardType: 'VisaColored',
-  visaColors: properties['--color-black-80'],
-  bankAxept: 'BankAxeptBlack',
+export const youth: CustomCard = {
+  // name: 'Youth',
+  cardClassName: 'card--design-youth',
   backgroundImage: youthImg,
-}
-
-const gold: CardDesignData = {
-  name: 'Gold',
-  cardStyle: 'card--design-gold',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-white'],
-  cardType: 'VisaColored',
-  visaColors: properties['--color-white'],
-  bankAxept: 'BankAxeptWhite',
-}
-
-const saga: CardDesignData = {
-  name: 'Saga',
-  cardStyle: 'card--design-saga',
-  bankLogo: 'DNB',
-  bankLogoColors: '#BFA970',
-  visaColors: '#BFA970',
-  cardType: 'MastercardDefault',
-  bankAxept: 'BankAxeptGold',
-  cardDesign: 'SagaGold',
-}
-
-const sagaPlatinum: CardDesignData = {
-  name: 'Saga platinum',
-  cardStyle: 'card--design-saga',
-  bankLogo: 'DNB',
-  bankLogoColors: '#b2b4b3',
-  cardType: 'MastercardDark',
-  visaColors: '#cccccc',
-  bankAxept: 'BankAxeptBlack20',
-  cardDesign: 'SagaPlatinum',
-}
-
-const privateBanking: CardDesignData = {
-  name: 'Private Banking',
-  cardStyle: 'card--design-private',
-  bankLogo: 'DNB',
-  bankLogoColors: '#b2b4b3',
-  cardType: 'VisaPlatinum',
-  bankAxept: 'BankAxeptGray',
-}
-
-const mcBlack: CardDesignData = {
-  name: 'Mastercard Black',
-  cardStyle: 'card--design-black',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-black-80'],
-  cardType: 'MastercardDark',
-  visaColors: '#b2b4b3',
-  bankAxept: 'BankAxeptWhite',
-}
-
-const businessNoVisa: CardDesignData = {
-  name: 'Bedriftskort BankAxept',
-  cardStyle: 'card--design-business-no-visa',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-mint-green'],
-  cardType: 'VisaColored',
-  visaColors: properties['--color-white'],
-  bankAxept: 'BankAxeptWhite',
-}
-
-const businessWithVisa: CardDesignData = {
-  name: 'Bedriftskort Visa',
-  cardStyle: 'card--design-business-with-visa',
-  bankLogo: 'DNB',
-  bankLogoColors: properties['--color-mint-green'],
-  cardType: 'VisaColored',
-  visaColors: properties['--color-white'],
-  bankAxept: 'BankAxeptWhite',
-}
-
-const sbankenVisa: CardDesignData = {
-  name: 'Sbanken',
-  cardStyle: 'card--design-sbanken-visa',
-  bankLogo: 'sbanken',
-  bankLogoColors: properties['--sb-color-text'],
-  cardType: 'VisaColored',
-  visaColors: '#0F357F',
-  bankAxept: 'BankAxeptGrayDark',
-}
-
-const sbankenMastercard: CardDesignData = {
-  name: 'Sbanken Mastercard',
-  cardStyle: 'card--design-sbanken-mastercard',
-  bankLogo: 'sbanken',
-  bankLogoColors: 'var(--color-white)',
-  cardType: 'MastercardDefault',
-  visaColors: properties['--color-white'],
-  bankAxept: 'BankAxeptGray',
-}
-
-const Designs = {
-  defaultDesign,
-  young,
-  myFirst,
-  youth,
-  pluss,
-  gold,
-  saga,
-  sagaPlatinum,
-  privateBanking,
-  mcBlack,
-  businessNoVisa,
-  businessWithVisa,
-  sbankenVisa,
-  sbankenMastercard,
-}
-export default Designs
-
-export {
-  defaultDesign,
-  pluss,
-  young,
-  myFirst,
-  youth,
-  gold,
-  saga,
-  sagaPlatinum,
-  privateBanking,
-  mcBlack,
-  businessNoVisa,
-  businessWithVisa,
-  sbankenVisa,
-  sbankenMastercard,
+  bankLogo: { type: 'DNB', color: properties['--color-sea-green'] },
+  cardProvider: { type: 'Visa', color: properties['--color-black-80'] },
+  paymentType: {
+    type: 'BankAxept',
+    color: properties['--color-black-80'],
+  },
+}
+
+export const gold: CustomCard = {
+  // name: 'Gold',
+  cardClassName: 'card--design-gold',
+  bankLogo: { type: 'DNB', color: properties['--color-white'] },
+  cardProvider: { type: 'Visa', color: properties['--color-white'] },
+  paymentType: {
+    type: 'BankAxept',
+    color: properties['--color-white'],
+  },
+}
+
+export const saga: CustomCard = {
+  // name: 'Saga',
+  cardClassName: 'card--design-saga',
+  bankLogo: { type: 'DNB', color: '#BFA970' },
+  cardProvider: { type: 'Mastercard', color: '#BFA970' },
+  paymentType: {
+    type: 'BankAxept',
+    color: '#BFA970',
+  },
+}
+
+export const sagaPlatinum: CustomCard = {
+  // name: 'Saga platinum',
+  cardClassName: 'card--design-saga',
+  bankLogo: { type: 'DNB', color: '#b2b4b3' },
+  cardProvider: {
+    type: 'MastercardDark',
+    // TODO: sjekk
+    color: '#cccccc',
+  },
+  paymentType: {
+    type: 'BankAxept',
+    color: properties['--color-black-20'],
+  },
+}
+
+export const privateBanking: CustomCard = {
+  // name: 'Private Banking',
+  cardClassName: 'card--design-private',
+  bankLogo: { type: 'DNB', color: '#b2b4b3' },
+  cardProvider: { type: 'VisaPlatinum' },
+  paymentType: { type: 'BankAxept', color: '#b2b4b3' },
+}
+
+export const mcBlack: CustomCard = {
+  // name: 'Mastercard Black',
+  cardClassName: 'card--design-black',
+  bankLogo: { type: 'DNB', color: properties['--color-black-80'] },
+  paymentType: { type: 'BankAxept', color: properties['--color-white'] },
+  cardProvider: { type: 'MastercardDark', color: '#b2b4b3' },
+}
+
+export const businessNoVisa: CustomCard = {
+  // name: 'Bedriftskort BankAxept',
+  cardClassName: 'card--design-business-no-visa',
+  bankLogo: { type: 'DNB', color: properties['--color-mint-green'] },
+  cardProvider: { type: 'Visa', color: properties['--color-white'] },
+  paymentType: { type: 'BankAxept', color: properties['--color-white'] },
+}
+
+export const businessWithVisa: CustomCard = {
+  // name: 'Bedriftskort Visa',
+  cardClassName: 'card--design-business-with-visa',
+  bankLogo: { type: 'DNB', color: properties['--color-mint-green'] },
+  cardProvider: { type: 'Visa', color: properties['--color-white'] },
+  paymentType: { type: 'BankAxept', color: properties['--color-white'] },
+}
+
+export const sbankenVisa: CustomCard = {
+  // name: 'Sbanken',
+  cardClassName: 'card--design-sbanken-visa',
+  bankLogo: { type: 'sbanken', color: properties['--sb-color-text'] },
+  cardProvider: { type: 'Visa', color: '#0F357F' },
+  paymentType: { type: 'BankAxept', color: '#55565A' },
+}
+
+export const sbankenMastercard: CustomCard = {
+  // name: 'Sbanken Mastercard',
+  cardClassName: 'card--design-sbanken-mastercard',
+  bankLogo: { type: 'sbanken', color: properties['--color-white'] },
+  cardProvider: { type: 'Mastercard', color: properties['--color-white'] },
+  paymentType: { type: 'Credit', color: properties['--color-white'] },
 }
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/utils/cardProducts.ts b/packages/dnb-eufemia/src/extensions/payment-card/utils/cardProducts.ts
index 0f74b798d94..b55947f28b0 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/utils/cardProducts.ts
+++ b/packages/dnb-eufemia/src/extensions/payment-card/utils/cardProducts.ts
@@ -15,395 +15,287 @@ import {
   sbankenMastercard,
 } from './CardDesigns'
 
-import { PaymentCardRawData } from '../types'
+import { CustomCard } from '../types'
 
-const cardData: PaymentCardRawData[] = [
+const cardData: CustomCard[] = [
   {
     productCode: 'NK1',
-    productName: 'DNB Kortet',
     displayName: 'DNB Kortet',
-    cardDesign: defaultDesign,
-    cardType: 'None',
-    productType: 'None',
-    bankAxept: 'BankAxeptWhite',
+    ...defaultDesign,
   },
   {
     productCode: 'NK4',
-    productName: 'DNB Kortet',
     displayName: 'DNB Kortet',
-    cardDesign: defaultDesign,
-    cardType: 'None',
-    productType: 'None',
-    bankAxept: 'BankAxeptWhite',
+    ...defaultDesign,
   },
   {
     productCode: 'NK5',
-    productName: 'DNB Kortet',
     displayName: 'DNB Kortet',
-    cardDesign: defaultDesign,
-    cardType: 'None',
-    productType: 'None',
-    bankAxept: 'BankAxeptWhite',
+    ...defaultDesign,
   },
   {
     productCode: 'VE1',
-    productName: 'DNB Electron',
     displayName: 'DNB Electron',
-    cardDesign: defaultDesign,
-    cardType: 'VisaColored',
-    productType: 'None',
-    bankAxept: 'None',
+    ...defaultDesign,
+    paymentType: null,
   },
   {
     productCode: 'VE2',
-    productName: 'DNB Electron u/leg',
+    // productName: 'DNB Electron u/leg',
     displayName: 'DNB Electron',
-    cardDesign: defaultDesign,
-    cardType: 'VisaColored',
-    productType: 'None',
-    bankAxept: 'None',
+    ...defaultDesign,
+    paymentType: null,
   },
   {
     productCode: 'VG1',
-    productName: 'SAGA Gull Visa',
+    // productName: 'SAGA Gull Visa',
     displayName: 'SAGA Gull',
-    cardDesign: saga,
-    cardType: 'VisaColored',
-    productType: 'Saga',
-    bankAxept: 'BankAxeptGold',
+    productType: { type: 'SagaGold' },
+    ...saga,
+    cardProvider: { type: 'Visa', color: saga.cardProvider.color },
   },
   {
     productCode: 'VG4',
-    productName: 'SAGA Gull Visa u/leg',
+    // productName: 'SAGA Gull Visa u/leg',
     displayName: 'SAGA Gull',
-    cardDesign: saga,
-    cardType: 'VisaColored',
-    productType: 'Saga',
-    bankAxept: 'BankAxeptGold',
+    productType: { type: 'SagaGold' },
+    ...saga,
+    cardProvider: { type: 'Visa', color: saga.cardProvider.color },
   },
   {
     productCode: '053',
-    productName: 'SAGA Gull Mastercard',
+    // productName: 'SAGA Gull Mastercard',
     displayName: 'SAGA Gull',
-    cardDesign: saga,
-    cardType: 'MastercardDefault',
-    productType: 'Saga',
-    bankAxept: 'None',
+    productType: { type: 'SagaGold' },
+    ...saga,
   },
   {
     productCode: 'VK2',
-    productName: 'DNB Visa',
     displayName: 'DNB Visa',
-    cardDesign: defaultDesign,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    ...defaultDesign,
   },
   {
     productCode: 'VK4',
-    productName: 'DNB Visa',
     displayName: 'DNB Visa',
-    cardDesign: defaultDesign,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    ...defaultDesign,
   },
   {
     productCode: '084',
-    productName: 'Pluss Mastercard(leve)',
+    // productName: 'Pluss Mastercard(leve)',
     displayName: 'Pluss Mastercard',
-    cardDesign: pluss,
-    productType: 'Pluss',
-    cardType: 'MastercardDefault',
-    bankAxept: 'None',
+    productType: { type: 'Pluss' },
+    ...pluss,
+    paymentType: null,
+    cardProvider: { type: 'Mastercard' },
   },
   {
     productCode: 'VL1',
-    productName: 'Sølv Visa',
+    // productName: 'Sølv Visa',
     displayName: 'Pluss Visa',
-    cardDesign: pluss,
-    productType: 'Pluss',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    productType: { type: 'Pluss' },
+    ...pluss,
   },
   {
     productCode: 'VL2',
-    productName: 'Hvitt Visa',
     displayName: 'Hvitt kort',
-    cardDesign: young,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptBlack',
+    ...young,
+    cardProvider: { type: 'Visa' },
   },
   {
     productCode: 'VL3',
-    productName: 'Sølv Visa',
+    // productName: 'Sølv Visa',
     displayName: 'Pluss Visa',
-    cardDesign: pluss,
-    productType: 'Pluss',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    productType: { type: 'Pluss' },
+    ...pluss,
   },
   {
     productCode: 'VL4',
-    productName: 'DNB Visa u/leg',
+    // productName: 'DNB Visa u/leg',
     displayName: 'DNB Visa',
-    cardDesign: defaultDesign,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    ...defaultDesign,
   },
   {
     productCode: 'VL6',
-    productName: 'Hvitt Visa u/leg',
+    // productName: 'Hvitt Visa u/leg',
     displayName: 'Hvitt kort',
-    cardDesign: young,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptBlack',
+    ...young,
+    cardProvider: { type: 'Visa' },
   },
   {
     productCode: '085',
-    productName: 'Ung Mastercard(student)',
+    // productName: 'Ung Mastercard(student)',
     displayName: 'Ung Mastercard',
-    cardDesign: young,
-    productType: 'None',
-    cardType: 'MastercardDefault',
-    bankAxept: 'None',
+    ...young,
   },
   {
     productCode: 'VO1',
-    productName: 'DNB Visa Online',
     displayName: 'DNB Visa Online',
-    cardDesign: defaultDesign,
-    cardType: 'VisaColored',
-    productType: 'None',
-    bankAxept: 'BankAxeptWhite',
+    ...defaultDesign,
   },
   {
     productCode: 'VP2',
-    productName: 'SAGA Platinum Visa',
+    // productName: 'SAGA Platinum Visa',
     displayName: 'SAGA Platinum',
-    cardDesign: sagaPlatinum,
-    productType: 'Saga',
-    cardType: 'VisaPlatinum',
-    bankAxept: 'BankAxeptGray',
+    productType: { type: 'SagaPlatinum' },
+    ...sagaPlatinum,
+    cardProvider: { type: 'MastercardDark' },
   },
   {
     productCode: 'VP3',
-    productName: 'Private Banking Visa',
+    // productName: 'Private Banking Visa',
     displayName: 'Private Banking',
-    cardDesign: privateBanking,
-    productType: 'PrivateBanking',
-    cardType: 'VisaPlatinum',
-    bankAxept: 'BankAxeptGray',
+    productType: { type: 'PrivateBanking' },
+    ...privateBanking,
   },
   {
     productCode: 'VP4',
-    productName: 'SAGA Platinum Visa u/leg',
+    // productName: 'SAGA Platinum Visa u/leg',
     displayName: 'SAGA Platinum',
-    cardDesign: sagaPlatinum,
-    productType: 'Saga',
-    cardType: 'VisaPlatinum',
-    bankAxept: 'BankAxeptGray',
+    productType: { type: 'SagaPlatinum' },
+    ...sagaPlatinum,
+    cardProvider: { type: 'VisaPlatinum' },
   },
   {
     productCode: '069',
-    productName: 'SAGA Platinum Mastercard',
+    // productName: 'SAGA Platinum Mastercard',
     displayName: 'SAGA Platinum',
-    cardDesign: sagaPlatinum,
-    productType: 'Saga',
-    cardType: 'MastercardDark',
-    bankAxept: 'None',
+    productType: { type: 'SagaPlatinum' },
+    ...sagaPlatinum,
   },
   {
     productCode: 'VP5',
-    productName: 'Private Banking Visa u/leg',
+    // productName: 'Private Banking Visa u/leg',
     displayName: 'Private Banking',
-    cardDesign: privateBanking,
-    productType: 'PrivateBanking',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptGray',
+    productType: { type: 'PrivateBanking' },
+    ...privateBanking,
   },
   {
     productCode: '080',
-    productName: 'Private Banking Mastercard',
+    // productName: 'Private Banking Mastercard',
     displayName: 'Private Banking',
-    cardDesign: privateBanking,
-    productType: 'PrivateBanking',
-    cardType: 'MastercardDark',
-    bankAxept: 'None',
+    productType: { type: 'PrivateBanking' },
+    ...privateBanking,
+    cardProvider: { type: 'MastercardDark' },
   },
   {
     productCode: 'VX1',
-    productName: 'Mitt første kort',
     displayName: 'Mitt første kort',
-    cardDesign: myFirst,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'None',
+    ...myFirst,
   },
   {
     productCode: 'VX3',
-    productName: 'Ungdomskortet',
     displayName: 'Ungdomskort',
-    cardDesign: youth,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptBlack',
+    ...youth,
   },
   {
     productCode: 'VX4',
-    productName: 'Mitt første kort u/leg',
+    // productName: 'Mitt første kort u/leg',
     displayName: 'Mitt første kort',
-    cardDesign: myFirst,
-    productType: 'Intro',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptBlack',
+    productType: { type: 'Intro' },
+    ...myFirst,
   },
   {
     productCode: 'VX5',
-    productName: 'Ungdomskortet u/leg',
+    // productName: 'Ungdomskortet u/leg',
     displayName: 'Ungdomskort',
-    cardDesign: youth,
-    productType: 'Intro',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptBlack',
+    productType: { type: 'Intro' },
+    ...youth,
   },
   {
     productCode: '096',
-    productName: 'DNB Mastercard',
     displayName: 'DNB Mastercard',
-    cardDesign: gold,
-    productType: 'None',
-    cardType: 'MastercardDefault',
-    bankAxept: 'None',
+    ...gold,
+    cardProvider: { type: 'Mastercard' },
   },
   {
     productCode: '044',
-    productName: 'Hvitt Mastercard',
+    // productName: 'Hvitt Mastercard',
     displayName: 'Student',
-    cardDesign: young,
-    productType: 'None',
-    cardType: 'MastercardDefault',
-    bankAxept: 'None',
+    ...young,
+    paymentType: null,
   },
   {
     productCode: '043',
-    productName: 'Sølv MasterCard',
     displayName: 'Pluss Mastercard',
-    cardDesign: pluss,
-    productType: 'Pluss',
-    cardType: 'MastercardDefault',
-    bankAxept: 'None',
+    productType: { type: 'Pluss' },
+    ...pluss,
+    cardProvider: { type: 'Mastercard' },
   },
   {
     productCode: '098',
-    productName: 'SAGA Gull Mastercard',
+    // productName: 'SAGA Gull Mastercard',
     displayName: 'SAGA Gull',
-    cardDesign: saga,
-    productType: 'Saga',
-    cardType: 'MastercardDefault',
-    bankAxept: 'None',
+    productType: { type: 'SagaGold' },
+    ...saga,
   },
   {
     productCode: '074',
-    productName: 'SAGA Platinum Mastercard',
+    // productName: 'SAGA Platinum Mastercard',
     displayName: 'SAGA Platinum',
-    cardDesign: sagaPlatinum,
-    productType: 'Saga',
-    cardType: 'MastercardDark',
-    bankAxept: 'None',
+    productType: { type: 'SagaPlatinum' },
+    ...sagaPlatinum,
+    paymentType: null,
   },
   {
     productCode: '062',
-    productName: 'Private Banking Mastercard',
+    // productName: 'Private Banking Mastercard',
     displayName: 'Private Banking',
-    cardDesign: privateBanking,
-    productType: 'PrivateBanking',
-    cardType: 'MastercardDark',
-    bankAxept: 'None',
+    productType: { type: 'PrivateBanking' },
+    ...privateBanking,
+    paymentType: null,
   },
   {
     productCode: 'BK1',
-    productName: 'Bedriftskort (småkjøpskort)',
     displayName: 'Bedriftskort (småkjøpskort)',
-    cardDesign: businessNoVisa,
-    productType: 'Bedrift',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    productType: { type: 'Bedrift' },
+    ...businessNoVisa,
+    cardProvider: null,
   },
   {
     productCode: 'BP1',
-    productName: 'Bedriftskort (småkjøpskort)',
     displayName: 'Bedriftskort (småkjøpskort)',
-    cardDesign: businessNoVisa,
-    productType: 'Bedrift',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    productType: { type: 'Bedrift' },
+    ...businessNoVisa,
+    cardProvider: null,
   },
   {
     productCode: 'VB1',
-    productName: 'Bedriftskort med Visa',
     displayName: 'Bedriftskort med Visa',
-    cardDesign: businessWithVisa,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    ...businessWithVisa,
   },
   {
     productCode: 'VB2',
-    productName: 'Visa Business',
     displayName: 'Visa Business',
-    cardDesign: businessWithVisa,
-    productType: 'Business',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptWhite',
+    ...businessWithVisa,
   },
   {
     productCode: 'VB5',
-    productName: 'Bedriftskort med Visa',
     displayName: 'Bedriftskort med Visa',
-    cardDesign: businessWithVisa,
-    productType: 'Business',
-    cardType: 'VisaColored',
-    bankAxept: 'None',
+    productType: { type: 'Bedrift' },
+    ...businessWithVisa,
+    paymentType: null,
   },
   {
     productCode: 'P101',
-    productName: '?',
+    // productName: '?',
     displayName: 'Black Mastercard',
-    cardDesign: mcBlack,
-    productType: 'None',
-    cardType: 'MastercardDark',
-    bankAxept: 'None',
+    ...mcBlack,
+    paymentType: null,
   },
   {
     productCode: 'VO3',
-    productName: 'SBanken Visa',
     displayName: 'SBanken Visa',
-    cardDesign: sbankenVisa,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptBlack',
+    ...sbankenVisa,
   },
   {
     productCode: 'VS8',
-    productName: 'SBanken et konsept fra DNB',
     displayName: 'SBanken et Konsept fra DNB',
-    cardDesign: sbankenVisa,
-    productType: 'None',
-    cardType: 'VisaColored',
-    bankAxept: 'BankAxeptBlack',
+    ...sbankenVisa,
   },
   {
     productCode: 'P103',
-    productName: 'SBanken et konsept fra DNB',
     displayName: 'SBanken et konsept fra DNB',
-    cardDesign: sbankenMastercard,
-    productType: 'None',
-    cardType: 'MastercardDefault',
-    bankAxept: 'Credit',
+    ...sbankenMastercard,
   },
 ]