PaymentCard

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:

Initial development by Sindre M. Teigland.

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

Basic card using product code and status.

Kortnummer

**** 1337

Hengelås

Sperret

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

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 />)