Default(NK1)
Kortnummer
**** 1337
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:
- First, define your desired look and design.
- 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.
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'
Kortnummer
**** 1337
const customData = {productCode: 'UNDEFINED',productName: 'DNB Custom Card',displayName: 'Custom card',cardDesign: Designs.gold,cardType: CardType.Visa,productType: ProductType.None,bankAxept: BankAxeptType.BankAxept,}render(<PaymentCardproduct_code="UNDEFINED"raw_data={customData}card_number="************1337"/>)
Basic card using a status
Kortnummer
**** 1337
<PaymentCardproduct_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.
Kortnummer
**** 1337
<PaymentCardvariant="compact"product_code="VG1"card_number="************1337"/>
Demo cards
All the different card products and PaymentCard designs.
Default(NK4)
Kortnummer
**** 1337
Default(NK5)
Kortnummer
**** 1337
Default(VE1)
Kortnummer
**** 1337
Default(VE2)
Kortnummer
**** 1337
Saga(VG1)
Kortnummer
**** 1337
Saga(VG4)
Kortnummer
**** 1337
Saga(053)
Kortnummer
**** 1337
Default(VK2)
Kortnummer
**** 1337
Default(VK4)
Kortnummer
**** 1337
Pluss(084)
Kortnummer
**** 1337
Pluss(VL1)
Kortnummer
**** 1337
Ung(VL2)
Kortnummer
**** 1337
Pluss(VL3)
Kortnummer
**** 1337
Default(VL4)
Kortnummer
**** 1337
Ung(VL6)
Kortnummer
**** 1337
Ung(085)
Kortnummer
**** 1337
Default(VO1)
Kortnummer
**** 1337
Saga platinum(VP2)
Kortnummer
**** 1337
Private Banking(VP3)
Kortnummer
**** 1337
Saga platinum(VP4)
Kortnummer
**** 1337
Saga platinum(069)
Kortnummer
**** 1337
Private Banking(VP5)
Kortnummer
**** 1337
Private Banking(080)
Kortnummer
**** 1337
My first(VX1)
Kortnummer
**** 1337
Youth(VX3)
Kortnummer
**** 1337
My first(VX4)
Kortnummer
**** 1337
Youth(VX5)
Kortnummer
**** 1337
Gold(096)
Kortnummer
**** 1337
Ung(044)
Kortnummer
**** 1337
Pluss(043)
Kortnummer
**** 1337
Saga(098)
Kortnummer
**** 1337
Saga platinum(074)
Kortnummer
**** 1337
Private Banking(062)
Kortnummer
**** 1337
Bedriftskort BankAxept(BK1)
Kortnummer
**** 1337
Bedriftskort BankAxept(BP1)
Kortnummer
**** 1337
Bedriftskort Visa(VB1)
Kortnummer
**** 1337
Bedriftskort Visa(VB2)
Kortnummer
**** 1337
Bedriftskort Visa(VB5)
Kortnummer
**** 1337
Mastercard Black(P101)
Kortnummer
**** 1337
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><PaymentCardproduct_code={product_code}card_number="************1337"/></article>)})}</>)render(<Cards />)