Skip to content

Card Properties

PropertiesDescription
product_code(required) if product code matches one of the codes in the list the card will get that design, if no match is found Default design will be used.
raw_data(optional) useful if you want to create custom cards. See Card data properties.
card_status(optional) use one of these: active, blocked, expired. Defaults to active.
variant(optional) defines the appearance. Use one of these: normal or compact. Defaults to normal.
digits(optional) will use 8 digits if none are specified.
card_number(optional) masked card number.
locale(optional) use nb-NO or en-GB. Defaults to the Eufemia provider.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
Space(optional) spacing properties like top or bottom are supported.

Card Data

PropertiesTypeDescription
productCodestring(required) product code for the given card.
productNamestring(required) product name. Can be blank.
displayNamestring(required) the visible product name. Can be empty.
cardDesignobject(required) object that describes the style properties of the card. import { Designs } from '@dnb/eufemia/extensions/payment-card' (see available designs below) or a custom one can be created.
cardTypeUnion Type(required)import { CardType } from '@dnb/eufemia/extensions/payment-card' to use. Can be CardType.Visa, CardType.Mastercard or CardType.None
productTypeUnion Type(required)import { ProductType } from '@dnb/eufemia/extensions/payment-card' to use. Can be ProductType.Saga, ProductType.Pluss, ProductType.Intro, ProductType.Business, ProductType.Bedrift, ProductType.PrivateBanking or ProductType.None

Card Design

PropertiesTypeDescription
namestring(required) string Name of design
cardStylestring(required) css class. mainly to set background and color
bankLogoUnion Type(required) Union Type. import DNB from ./card/utils/Types to use. Can be DNB.Colored('HexValue')
visaUnion Type(required) Union Type. import Visa from ./card/utils/Types to use. Can be Visa.Colored('HexValue') or Visa.Platinum
mastercardUnion Type(required) Union Type. import Mastercard from ./card/utils/Types to use. Can be Mastercard.Default or Mastercard.Dark
bankAxeptUnion Type(required) Union Type. import BankAxept from ./card/utils/Types to use. Can be BankAxept.White, BankAxept.Black, BankAxept.Gold, BankAxept.Black20 or BankAxept.Gray
sagaUnion Type(required) Union Type. import Saga from ./card/utils/Types to use. Can be Saga.Gold, Saga.Platinum or Saga.None
privateBankingUnion Type(required) Union Type. import PB from ./card/utils/Types to use. Can be PB.Default or PB.None

List of designs

PropertiesTypeDescription
defaultDesignobjectDefault
plussobjectPluss
youngobjectUng
myFirstobjectMy first
youthobjectYouth
goldobjectGold
sagaobjectSaga
sagaPlatinumobjectSaga platinum
privateBankingobjectPrivate Banking
mcBlackobjectMastercard Black
businessNoVisaobjectBedriftskort BankAxept
businessWithVisaobjectBedriftskort Visa

Types

Type
DNB
Colored
Saga
Gold
Platinum
None
PB
Default
None
Mastercard
Default
Dark
ProductType
Saga
Pluss
Intro
Bedrift
Business
PrivateBanking
None
CardType
Visa
Mastercard
None
BankAxept
White
Black
Gold
Black20
Gray
Visa
Colored
Platinum
Status
Expired
Blocked
Active