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:

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'

Kortnummer

**** 1337

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

Kortnummer

**** 1337

Sperret

<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

<PaymentCard
  variant="compact"
  product_code="VG1"
  card_number="************1337"
/>

Kortnummer

**** 1337

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

#PaymentCard

#Description

#Demos

#Basic example

#Custom card using rawData

#Basic card using a status

#Basic card in compact variant

#Demo cards

Default

White

My first

Youth

Pluss

Gold

Saga

Saga platinum

Private Banking

Mastercard Black

Bedriftskort BankAxept

Bedriftskort Visa

PaymentCard

Description

Demos

Basic example

Custom card using rawData

Basic card using a status

Basic card in compact variant

Demo cards