Default(NK1)
Kortnummer
**** 1337
Basic card using productCode.
Kortnummer
**** 1337
<PaymentCard product_code="NK1" card_number="************1337" />
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( <PaymentCard product_code="UNDEFINED" raw_data={customData} card_number="************1337" />, )
Kortnummer
**** 1337
<PaymentCard product_code="VG2" card_status="blocked" card_number="************1337" />
Basic card using product code and status.
NB: The compact variant have to be aligned to a not yet defined SSOT style.
Kortnummer
**** 1337
<PaymentCard variant="compact" product_code="VG1" card_number="************1337" />
All the different card products and PaymentCard designs.
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
Kortnummer
**** 1337
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> <PaymentCard product_code={product_code} card_number="************1337" /> </article> ) })} </> ) render(<Cards />)