Import
import { PaymentCardModule } from '@backbase/ui-ang/payment-card'
Usage
Use the bb-payment-card-ui component to display a payment card. The component requires a paymentCard object with card information.
<!-- Basic payment card usage -->
<bb-payment-card-ui
[paymentCard]="{
name: 'Ricardo Peterson',
number: '1234',
vendor: 'mastercard',
expirationDate: new Date(2021, 2),
type: 'Credit',
virtual: true
}">
</bb-payment-card-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
displayEmblem |
boolean |
true |
|
displayOverlay |
boolean |
false |
|
imageSrc |
string |
undefined |
|
overlayIcon |
'access-time' | 'lock' | 'not-interested' | 'remove-circle-outline' | 'warning'(deprecated) |
undefined |
|
overlayText |
string |
undefined |
|
paymentCard |
PaymentCard |
undefined |
|
paymentCardNumberFormat |
PaymentCardNumberFormat |
{ length: 16, maskRange: [0, 12], segments: 4 } |
|
size |
'sm' | 'md'` |
'md' |
|
vertical |
boolean |
false |
Global configuration
The payment card component supports global configuration through the PAYMENT_CARD_CONFIG_TOKEN. You can provide default values for certain inputs:
import { PAYMENT_CARD_CONFIG_TOKEN, PaymentCardConfig } from '@backbase/ui-ang/payment-card';
const config: PaymentCardConfig = {
vertical: true
};
// In your module providers
providers: [
{ provide: PAYMENT_CARD_CONFIG_TOKEN, useValue: config }
]
These default global values can be overridden locally by setting specific values for an input.
displayEmblem
The displayEmblem input controls whether to display the Backbase logo on the card.
<!-- Payment card without emblem -->
<bb-payment-card-ui
[paymentCard]="cardData"
[displayEmblem]="false">
</bb-payment-card-ui>
displayOverlay
The displayOverlay input determines whether to show an overlay on the card, typically used to indicate card status.
<!-- Payment card with overlay -->
<bb-payment-card-ui
[paymentCard]="cardData"
[displayOverlay]="true"
[overlayText]="'Deactivated'"
[overlayIcon]="'not-interested'">
</bb-payment-card-ui>
imageSrc
The imageSrc input allows you to provide a custom background image for the card. Accepts a link or base64/SVG image.
<!-- Payment card with custom background -->
<bb-payment-card-ui
[paymentCard]="cardData"
[imageSrc]="'data:image/svg+xml;base64,PHN2Zy...'">
</bb-payment-card-ui>
overlayIcon
The overlayIcon input sets the icon to be displayed on the card overlay. Only visible when displayOverlay is true.
<!-- Payment card with overlay icon -->
<bb-payment-card-ui
[paymentCard]="cardData"
[displayOverlay]="true"
[overlayIcon]="'lock'">
</bb-payment-card-ui>
overlayText
The overlayText input sets the status text to be displayed on the card overlay. Only visible when displayOverlay is true and size is not 'sm'.
<!-- Payment card with overlay text -->
<bb-payment-card-ui
[paymentCard]="cardData"
[displayOverlay]="true"
[overlayText]="'Blocked'">
</bb-payment-card-ui>
paymentCard
The paymentCard input provides the card data to be displayed. It accepts a PaymentCard object with the following properties:
- number: Unformatted payment card number (number | string)
- vendor: Payment card vendor (string)
- name: Name to be displayed on the payment card (string)
- expirationDate: Date the payment card expires (Date)
- cardName: Name of the card (string)
- type: Type of the card (Credit, Debit, etc.) (string)
- virtual: Whether the card is virtual (boolean)
<!-- Payment card with full card data -->
<bb-payment-card-ui
[paymentCard]="{
number: '4321567812345678',
vendor: 'visa',
name: 'John Smith',
expirationDate: new Date(2025, 11),
cardName: 'Premium Card',
type: 'Debit',
virtual: false
}">
</bb-payment-card-ui>
paymentCardNumberFormat
The paymentCardNumberFormat input configures how the card number should be formatted and masked.
<!-- Payment card with custom number format -->
<bb-payment-card-ui
[paymentCard]="cardData"
[paymentCardNumberFormat]="{
length: 19,
maskRange: [0, 15],
segments: 4
}">
</bb-payment-card-ui>
size
The size input defines the size of the card. Small cards show no content details, only the basic card shape.
<!-- Small payment card -->
<bb-payment-card-ui
[paymentCard]="cardData"
[size]="'sm'">
</bb-payment-card-ui>
vertical
The vertical input displays the card in a vertical orientation instead of the default horizontal layout.
<!-- Vertical payment card -->
<bb-payment-card-ui
[paymentCard]="cardData"
[vertical]="true">
</bb-payment-card-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- Semantic structure: The component uses proper semantic HTML structure for card information
- Internationalization: Supports localized text for expiration date labels and virtual card indicators
- Screen reader support: Card information is properly structured for assistive technologies
- Visual indicators: Clear visual differentiation between different card states and overlays
- Responsive design: Adapts to different screen sizes while maintaining readability
The component automatically handles date formatting using Angular's DatePipe and provides proper labeling for expiration dates and virtual card indicators.