#PaymentCard

<PaymentCard product_code="NK1" card_number="************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"
  />
)

<PaymentCard
  product_code="VG2"
  card_status="blocked"
  card_number="************1337"
/>

<PaymentCard
  variant="compact"
  product_code="VG1"
  card_number="************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 />)