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:

  1. First, define your desired look and design.
  2. 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:

Initial development by Sindre M. Teigland.

Demos

Basic example

Basic card using productCode.

Custom card using rawData

You may have to import the extra named exports:

import PaymentCard, {
getCardData,
Designs,
ProductType,
CardType,
} from '@dnb/eufemia/extensions/PaymentCard'

Basic card using a status

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.

Demo cards

A few selected cards to showcase all the different PaymentCard designs.