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,} from '@dnb/eufemia/extensions/PaymentCard'
Basic card using a status
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.
Demo cards
A few selected cards to showcase all the different PaymentCard designs.
NK4
Kortnummer
**** 1337
NK5
Kortnummer
**** 1337
VE1
Kortnummer
**** 1337
VE2
Kortnummer
**** 1337
VG1
Kortnummer
**** 1337
VG4
Kortnummer
**** 1337
053
Kortnummer
**** 1337
VK2
Kortnummer
**** 1337
VK4
Kortnummer
**** 1337
084
Kortnummer
**** 1337
VL1
Kortnummer
**** 1337
VL2
Kortnummer
**** 1337
VL3
Kortnummer
**** 1337
VL4
Kortnummer
**** 1337
VL6
Kortnummer
**** 1337
085
Kortnummer
**** 1337
VO1
Kortnummer
**** 1337
VP2
Kortnummer
**** 1337
VP3
Kortnummer
**** 1337
VP4
Kortnummer
**** 1337
069
Kortnummer
**** 1337
VP5
Kortnummer
**** 1337
080
Kortnummer
**** 1337
VX1
Kortnummer
**** 1337
VX3
Kortnummer
**** 1337
VX4
Kortnummer
**** 1337
VX5
Kortnummer
**** 1337
096
Kortnummer
**** 1337
044
Kortnummer
**** 1337
043
Kortnummer
**** 1337
098
Kortnummer
**** 1337
074
Kortnummer
**** 1337
062
Kortnummer
**** 1337
BK1
Kortnummer
**** 1337
BP1
Kortnummer
**** 1337
VB1
Kortnummer
**** 1337
VB2
Kortnummer
**** 1337
VB5
Kortnummer
**** 1337
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>{product_code}</H4><PaymentCardproduct_code={product_code}card_number="************1337"/></article>)})}</>)render(<Cards />)