Skip to content

Demos

Basic example

Basic card using productCode.

DNB Kortet
BankAxept

Kortnummer

**** 1337

<PaymentCard product_code="NK1" card_number="************1337" />

Custom card using rawData

You may have to import the extra named exports:

import PaymentCard, {
getCardData,
Designs,
ProductType,
CardType,
} from '@dnb/eufemia/extensions/PaymentCard'
DNB Custom Card
BankAxept

Kortnummer

**** 1337

Visa
const customData = {
productCode: 'UNDEFINED',
productName: 'DNB Custom Card',
displayName: 'Custom card',
cardDesign: Designs.gold,
cardType: CardType.Visa,
productType: ProductType.BankAxept,
}
render(
<PaymentCard
product_code="UNDEFINED"
raw_data={customData}
card_number="************1337"
/>
)

Basic card using a status

Kortnummer

**** 1337

Hengelås

Sperret

<PaymentCard
product_code="VG2"
card_status="blocked"
card_number="************1337"
/>

Basic card using product code and status.

Basic card in compact variant

NB: The compact variant have to be aligned to a not yet defined SSOT style.

SAGA Gull Visa
SagaGold

Kortnummer

**** 1337

Visa
<PaymentCard
variant="compact"
product_code="VG1"
card_number="************1337"
/>

Demo cards

A few selected cards to showcase all the different PaymentCard designs.

Default

DNB Electron

Kortnummer

**** 1337

Visa

White

Hvitt Visa

Kortnummer

**** 1337

Visa

My first

Mitt første kort

Kortnummer

**** 1337

Visa

Youth

Ungdomskortet
BankAxept

Kortnummer

**** 1337

Visa

Pluss

Sølv Visa

Kortnummer

**** 1337

Visa

Gold

DNB Mastercard

Kortnummer

**** 1337

Mastercard

Saga

SAGA Gull Visa
SagaGold

Kortnummer

**** 1337

Visa

Saga platinum

SAGA Platinum Visa
SagaPlatinum

Kortnummer

**** 1337

Visa

Private Banking

Private Banking Visa
PB

Kortnummer

**** 1337

Visa Metalic

Mastercard Black

?

Kortnummer

**** 1337

Mastercard

Bedriftskort BankAxept

Bedriftskort (småkjøpskort)
BankAxept

Kortnummer

**** 1337

Bedriftskort Visa

Bedriftskort med Visa

Kortnummer

**** 1337

Visa
const demoCards = [
'VE1',
'VL2',
'VX1',
'VX3',
'VL1',
'096',
'VG1',
'VP2',
'VP3',
'P101',
'BK1',
'VB2',
]
const Cards = () => (
<>
{demoCards.map((product_code) => {
const cardData = getCardData(product_code)
return (
<article key={product_code}>
<H4>{cardData.cardDesign.name}</H4>
<PaymentCard
product_code={product_code}
card_number="************1337"
/>
</article>
)
})}
</>
)
render(<Cards />)