#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.None,
  bankAxept: BankAxeptType.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 = [
  '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 />)