Skip to content

Description

The PaymentCard component is a dynamic defined visual component imitate a physical payment card. It exists as an independent extension to Eufemia.

How to use it:

  1. First, define your desired look and design.
  2. And import and include it in your application:
import '@dnb/eufemia/extensions/payment-card/style'
import PaymentCard, {
getCardData,
} from '@dnb/eufemia/extensions/payment-card'
render(<PaymentCard product_code="..." />)

Resources:

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,
BankAxeptType,
} 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.None,
bankAxept: BankAxeptType.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
Saga GoldBankAxept

Kortnummer

**** 1337

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

Demo cards

All the different card products and PaymentCard designs.

Default(NK1)

DNB Kortet
BankAxept

Kortnummer

**** 1337

Default(NK4)

DNB Kortet
BankAxept

Kortnummer

**** 1337

Default(NK5)

DNB Kortet
BankAxept

Kortnummer

**** 1337

Default(VE1)

DNB Electron

Kortnummer

**** 1337

Visa

Default(VE2)

DNB Electron u/leg

Kortnummer

**** 1337

Visa

Saga(VG1)

SAGA Gull Visa
Saga GoldBankAxept

Kortnummer

**** 1337

Visa

Saga(VG4)

SAGA Gull Visa u/leg
Saga GoldBankAxept

Kortnummer

**** 1337

Visa

Saga(053)

SAGA Gull Mastercard
Saga Gold

Kortnummer

**** 1337

Mastercard

Default(VK2)

DNB Visa
BankAxept

Kortnummer

**** 1337

Visa

Default(VK4)

DNB Visa
BankAxept

Kortnummer

**** 1337

Visa

Pluss(084)

Pluss Mastercard(leve)
Pluss

Kortnummer

**** 1337

Mastercard

Pluss(VL1)

Sølv Visa
PlussBankAxept

Kortnummer

**** 1337

Visa

Ung(VL2)

Hvitt Visa
BankAxept

Kortnummer

**** 1337

Visa

Pluss(VL3)

Sølv Visa
PlussBankAxept

Kortnummer

**** 1337

Visa

Default(VL4)

DNB Visa u/leg
BankAxept

Kortnummer

**** 1337

Visa

Ung(VL6)

Hvitt Visa u/leg
BankAxept

Kortnummer

**** 1337

Visa

Ung(085)

Ung Mastercard(student)

Kortnummer

**** 1337

Mastercard

Default(VO1)

DNB Visa Online
BankAxept

Kortnummer

**** 1337

Visa

Saga platinum(VP2)

SAGA Platinum Visa
Saga PlatinumBankAxept

Kortnummer

**** 1337

Visa

Private Banking(VP3)

Private Banking Visa
PrivateBankingBankAxept

Kortnummer

**** 1337

Visa Platinum

Saga platinum(VP4)

SAGA Platinum Visa u/leg
Saga PlatinumBankAxept

Kortnummer

**** 1337

Visa

Saga platinum(069)

SAGA Platinum Mastercard
Saga Platinum

Kortnummer

**** 1337

Mastercard

Private Banking(VP5)

Private Banking Visa u/leg
PrivateBankingBankAxept

Kortnummer

**** 1337

Visa Platinum

Private Banking(080)

Private Banking Mastercard
PrivateBanking

Kortnummer

**** 1337

Mastercard

My first(VX1)

Mitt første kort

Kortnummer

**** 1337

Visa

Youth(VX3)

Ungdomskortet
BankAxept

Kortnummer

**** 1337

Visa

My first(VX4)

Mitt første kort u/leg
IntroBankAxept

Kortnummer

**** 1337

Visa

Youth(VX5)

Ungdomskortet u/leg
IntroBankAxept

Kortnummer

**** 1337

Visa

Gold(096)

DNB Mastercard

Kortnummer

**** 1337

Mastercard

Ung(044)

Hvitt Mastercard

Kortnummer

**** 1337

Mastercard

Pluss(043)

Sølv MasterCard
Pluss

Kortnummer

**** 1337

Mastercard

Saga(098)

SAGA Gull Mastercard
Saga Gold

Kortnummer

**** 1337

Mastercard

Saga platinum(074)

SAGA Platinum Mastercard
Saga Platinum

Kortnummer

**** 1337

Mastercard

Private Banking(062)

Private Banking Mastercard
PrivateBanking

Kortnummer

**** 1337

Mastercard

Bedriftskort BankAxept(BK1)

Bedriftskort (småkjøpskort)
BedriftBankAxept

Kortnummer

**** 1337

Bedriftskort BankAxept(BP1)

Bedriftskort (småkjøpskort)
BedriftBankAxept

Kortnummer

**** 1337

Bedriftskort Visa(VB1)

Bedriftskort med Visa
BankAxept

Kortnummer

**** 1337

Visa

Bedriftskort Visa(VB2)

Visa Business
BankAxept

Kortnummer

**** 1337

Visa

Bedriftskort Visa(VB5)

Bedriftskort med Visa
Business

Kortnummer

**** 1337

Visa

Mastercard Black(P101)

?

Kortnummer

**** 1337

Mastercard
const demoCards = [
'NK1',
'NK4',
'NK5',
'VE1',
'VE2',
'VG1',
'VG4',
'053',
'VK2',
'VK4',
'084',
'VL1',
'VL2',
'VL3',
'VL4',
'VL6',
'085',
'VO1',
'VP2',
'VP3',
'VP4',
'069',
'VP5',
'080',
'VX1',
'VX3',
'VX4',
'VX5',
'096',
'044',
'043',
'098',
'074',
'062',
'BK1',
'BP1',
'VB1',
'VB2',
'VB5',
'P101',
]
const Cards = () => (
<>
{demoCards.map((product_code) => {
const cardData = getCardData(product_code)
return (
<article key={product_code}>
<H4>
{cardData.cardDesign.name}({product_code})
</H4>
<PaymentCard
product_code={product_code}
card_number="************1337"
/>
</article>
)
})}
</>
)
render(<Cards />)