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. can be imported from @dnb/eufemia/extensions/payment-card/utils/CardDesigns (see available designs below) or a custom one can be created.
cardTypeUnion Type(required) import CardType from @dnb/eufemia/extensions/payment-card/utils/Types to use. Can be CardType.Visa, CardType.Mastercard or CardType.None
productTypeUnion Type(required) import ProductType from @dnb/eufemia/extensions/payment-card/utils/Types to use. Can be ProductType.BankAxept, ProductType.Saga, 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') or DNB.Metalic
visaUnion Type(required) Union Type. import Visa from ./card/utils/Types to use. Can be Visa.Colored('HexValue') or Visa.Metalic
mastercardUnion Type(required) Union Type. import Mastercard from ./card/utils/Types to use. Can be Mastercard.Default, Mastercard.DefaultWhite Mastercard.Metalic or Mastercard.MetalicBlack
bankAxeptUnion Type(required) Union Type. import BankAxept from ./card/utils/Types to use. Can be BankAxept.White or BankAxept.Black
sagaUnion Type(required) Union Type. import Saga from ./card/utils/Types to use. Can be Saga.Gold, Saga.Platinum, Saga.VisaPlatinum, or Saga.None
privateBankingUnion Type(required) Union Type. import PB from ./card/utils/Types to use. Can be PB.Default, PB.Platinum or PB.None

List of designs

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

Types

Type
DNB
Colored
Metalic
Saga
Gold
Platinum
VisaPlatinum
None
PB
Default
Platinum
None
Mastercard
Default
DefaultWhite
Metalic
BlackMetalic
ProductType
BankAxept
Saga
PrivateBanking
None
CardType
Visa
Mastercard
None
BankAxept
White
Black
Visa
Colored
Metalic
Status
Expired
Blocked
Active