#PaymentCard

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