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
Code Editor
<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
Code Editor
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
Code Editor
<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.
Kortnummer
**** 1337
Code Editor
<PaymentCard variant="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
Code Editor
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 />)